/* =========================================================
   theme.css — MyOwnWishes (warm/classic) + dark/auto
   ========================================================= */

/* =========================
   THEME TOKENS (defaults)
   ========================= */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/InterVariable-Italic.ttf") format("truetype");
}

:root{
    color-scheme: light;

    /* Brødtekst/UI = Inter */
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Overskrifter = Comic Sans (kun overskrifter) */
    --font-heading: "Comic Sans MS", cursive, sans-serif;

    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    
    /* Radius */
    --radius: 18px;

    /* Core colors */
    --bg: #fbf7f0;
    --surface: #ffffff;

    /* “Glass/overlay” surfaces */
    --surface2: rgba(255,255,255,.75); /* buttons, small fields */
    --surface3: rgba(255,255,255,.65); /* mini-cards/pills */

    --text: #1f1a16;
    --muted: #6b5f56;

    --border: rgba(31,26,22,.10);

    /* Accent */
    --accent: #2f6f5e;
    --accentSoft: rgba(47,111,94,.12);
    --accentBorder: rgba(47,111,94,.35);
    --accentHover: #2a6556;

    /* Accent tint surfaces */
    --tint: rgba(47,111,94,.06);
    --tintBorder: rgba(47,111,94,.22);
    --tintStrong: rgba(47,111,94,.50);

    /* Shadows */
    --shadow: 0 12px 30px rgba(31,26,22,.08);
    --shadowSoft: 0 8px 18px rgba(31,26,22,.06);
    --cardShadow: 0 10px 24px rgba(31,26,22,.08);
    --hoverShadow: 0 10px 22px rgba(31,26,22,.10);

    /* Hover surfaces */
    --hoverSurface: #fff;

    /* Avatar glows */
    --avatarGlow1: rgba(47,111,94,.18);
    --avatarGlow2: rgba(150, 90, 60, .14);

    /* Splash / hero background */
    --splashGlow1: rgba(47,111,94,.10);
    --splashGlow2: rgba(150, 90, 60, .10);
    --splashFadeTop: rgba(255,255,255,.65);
    --splashFadeBottom: rgba(255,255,255,0);

    /* Spinner */
    --spinnerTrack: var(--border);
    --spinnerHead: rgba(47,111,94,.70);

    /* Toast */
    --toastBg: rgba(31,26,22,.92);
    --toastText: #ffffff;
    --toastShadow: 0 16px 40px rgba(0,0,0,.25);

    /* Optional alt section background (if you want a token instead of color-mix) */
    --altBg: rgba(255,255,255,.55);
}

/* =========================
   BASELINE WRAPPER (.root)
   ========================= */
.root{
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  /* Makes native controls match theme */
  color-scheme: light;
}

/* =========================
   DARK THEME (forced)
   ========================= */
:root[data-theme="dark"]{

    color-scheme: dark;

    --bg: #0f1112;
    --surface: #151819;
    --surface2: rgba(255,255,255,.06);
    --surface3: rgba(255,255,255,.04);

    --text: #f2ece7;
    --muted: rgba(242,236,231,.70);
    --border: rgba(242,236,231,.10);

    --accent: #5bbfa6;
    --accentSoft: rgba(91,191,166,.16);
    --accentBorder: rgba(91,191,166,.35);
    --accentHover: rgba(91,191,166,.85);

    --tint: rgba(91,191,166,.10);
    --tintBorder: rgba(91,191,166,.25);
    --tintStrong: rgba(91,191,166,.55);

    --shadow: 0 16px 44px rgba(0,0,0,.35);
    --shadowSoft: 0 10px 26px rgba(0,0,0,.28);
    --cardShadow: 0 10px 26px rgba(0,0,0,.28);
    --hoverShadow: 0 14px 34px rgba(0,0,0,.32);

    --hoverSurface: rgba(255,255,255,.08);

    --avatarGlow1: rgba(91,191,166,.24);
    --avatarGlow2: rgba(210, 140, 95, .14);

    --splashGlow1: rgba(91,191,166,.16);
    --splashGlow2: rgba(210, 140, 95, .10);
    --splashFadeTop: rgba(0,0,0,.30);
    --splashFadeBottom: rgba(0,0,0,0);

    --spinnerTrack: var(--border);
    --spinnerHead: rgba(91,191,166,.85);

    /* Toast in dark: keep it dark for consistency (feel free to switch to light toast) */
    --toastBg: rgba(0,0,0,.78);
    --toastText: rgba(255,255,255,.95);
    --toastShadow: 0 16px 40px rgba(0,0,0,.45);

    --altBg: rgba(255,255,255,.03);
}

/* =========================
   AUTO THEME (system dark)
   ========================= */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg: #0f1112;
    --surface: #151819;
    --surface2: rgba(255,255,255,.06);
    --surface3: rgba(255,255,255,.04);

    --text: #f2ece7;
    --muted: rgba(242,236,231,.70);
    --border: rgba(242,236,231,.10);

    --accent: #5bbfa6;
    --accentSoft: rgba(91,191,166,.16);
    --accentBorder: rgba(91,191,166,.35);
    --accentHover: rgba(91,191,166,.85);

    --tint: rgba(91,191,166,.10);
    --tintBorder: rgba(91,191,166,.25);
    --tintStrong: rgba(91,191,166,.55);

    --shadow: 0 16px 44px rgba(0,0,0,.35);
    --shadowSoft: 0 10px 26px rgba(0,0,0,.28);
    --cardShadow: 0 10px 26px rgba(0,0,0,.28);
    --hoverShadow: 0 14px 34px rgba(0,0,0,.32);

    --hoverSurface: rgba(255,255,255,.08);

    --avatarGlow1: rgba(91,191,166,.24);
    --avatarGlow2: rgba(210, 140, 95, .14);

    --splashGlow1: rgba(91,191,166,.16);
    --splashGlow2: rgba(210, 140, 95, .10);
    --splashFadeTop: rgba(0,0,0,.30);
    --splashFadeBottom: rgba(0,0,0,0);

    --spinnerTrack: var(--border);
    --spinnerHead: rgba(91,191,166,.85);

    --toastBg: rgba(0,0,0,.78);
    --toastText: rgba(255,255,255,.95);
    --toastShadow: 0 16px 40px rgba(0,0,0,.45);

    --altBg: rgba(255,255,255,.03);

    color-scheme: dark;
  }
}

/* =========================
   RESET (safe)
   ========================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
}

/* Optional: neutral defaults */
a{
  color: inherit;
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

button{
  font: inherit;
}

::selection{
  background: var(--accentSoft);
}