/* ============================================================================
   theme.css — Design-Tokens.
   Drei Ebenen: Primitive (rohe Werte) → Semantik (Rolle) → Komponente.
   In Komponenten wird ausschliesslich die Semantik-Ebene benutzt; rohe Hex-Werte
   oder px-Abstaende stehen nirgends sonst im Projekt.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
  /* Selbst gehostet: kein Aufruf zu einem fremden CDN, passend zur Datenschutz-Zusage. */
}

:root {
  /* ---------- Primitive: warme Papier-Neutralen ----------
     Bewusst nicht das uebliche Blaugrau — die App soll nach Papier und
     Schulheft aussehen, nicht nach Admin-Panel. */
  --sand-50:  #faf9f6;
  --sand-100: #f4f2ec;
  --sand-150: #edeae1;
  --sand-200: #e3dfd3;
  --sand-300: #d2ccbc;
  --sand-400: #aaa393;
  --sand-500: #857e6e;
  --sand-600: #635d51;
  --sand-700: #47433a;
  --sand-800: #2b2823;
  --sand-850: #211f1b;
  --sand-900: #1a1815;
  --sand-950: #121110;

  /* ---------- Primitive: Marke (gedecktes Tannengruen) ---------- */
  --moss-50:  #eef5f0;
  --moss-100: #d9e9df;
  --moss-200: #b3d3c0;
  --moss-300: #7fb497;
  --moss-400: #4f9370;
  --moss-500: #2f7050;
  --moss-600: #245b41;
  --moss-700: #1d4834;
  --moss-800: #163527;

  /* ---------- Primitive: Signalfarben ---------- */
  --amber-100: #fbeeda;
  --amber-300: #eab765;
  --amber-500: #9c5c11;
  --amber-600: #8b4f12;
  --clay-100:  #f9e4e0;
  --clay-300:  #e08a7e;
  --clay-500:  #b04434;
  --clay-600:  #8d3527;
  --sky-100:   #dfeaf6;
  --sky-300:   #7fa8d4;
  --sky-500:   #2f5f96;
  --violet-300: #a999d8;
  --violet-500: #5f4aa8;

  /* ---------- Semantik: Flaechen ---------- */
  --bg:            var(--sand-100);
  --bg-elevated:   var(--sand-50);
  --surface:       #ffffff;
  --surface-sunken: var(--sand-150);
  --surface-hover: var(--sand-100);
  --surface-active: var(--sand-150);
  --scrim:         rgb(26 24 21 / 45%);

  /* ---------- Semantik: Text ---------- */
  --text:        var(--sand-900);   /* 15.8:1 auf --surface */
  --text-muted:  var(--sand-600);   /*  7.4:1 auf --surface */
  --text-subtle: #6b6555;           /*  5.8:1 auf --surface, 4.8:1 auf --surface-sunken */
  --text-on-brand: #ffffff;

  /* ---------- Semantik: Linien ---------- */
  --border:        var(--sand-200);
  --border-strong: #8a8272;         /* Rand von Bedienelementen: 3.8:1, erfuellt 1.4.11 */
  --border-focus:  var(--moss-500);

  /* ---------- Semantik: Marke und Signale ---------- */
  --brand:          var(--moss-500);
  --brand-hover:    var(--moss-600);
  --brand-active:   var(--moss-700);
  --brand-subtle:   var(--moss-50);
  --brand-subtle-2: var(--moss-100);
  --brand-text:     var(--moss-600);

  --warn:        #9c5c11;
  --warn-subtle: var(--amber-100);
  --danger:        var(--clay-500);
  --danger-hover:  var(--clay-600);
  --danger-subtle: var(--clay-100);
  --info:        var(--sky-500);
  --info-subtle: var(--sky-100);

  --ink: #191a2e;   /* Tintenfarbe fuer Handschrift */

  /* ---------- Typografie ----------
     Schriftgroessen als Stufen. Der Seitentitel skaliert fluid mit,
     alles andere bleibt fest — sonst tanzt die Zeilenhoehe. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Inter', ui-monospace, monospace;

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.8125rem;  /* 13 */
  --text-md:  0.9375rem;  /* 15 — Basis, angenehmer als 16 bei Inter */
  --text-lg:  1.0625rem;  /* 17 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
  --text-4xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.012em;
  --tracking-wide:  0.04em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   680;

  /* ---------- Abstaende: 4er-Rhythmus ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */

  /* ---------- Radien ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- Erhebung: warm getoente Schatten, keine grauen Kaesten ---------- */
  --shadow-xs: 0 1px 2px rgb(43 40 35 / 6%);
  --shadow-sm: 0 1px 2px rgb(43 40 35 / 5%), 0 2px 6px rgb(43 40 35 / 5%);
  --shadow-md: 0 2px 4px rgb(43 40 35 / 5%), 0 8px 20px rgb(43 40 35 / 7%);
  --shadow-lg: 0 4px 8px rgb(43 40 35 / 6%), 0 18px 44px rgb(43 40 35 / 10%);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 60%);

  /* ---------- Bewegung ----------
     Eine Dauer fuer alles wirkt tot. Kurze Wege schnell, lange Wege langsamer;
     Verlassen schneller als Ankommen. */
  --dur-instant: 90ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-slower:  420ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in:       cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- Layout ---------- */
  --topbar-h:  56px;
  --tabbar-h:  62px;
  --rail-w:    72px;
  --sidebar-w: 244px;
  --content-max: 1120px;
  --measure: 68ch;
  --gutter: var(--sp-4);

  /* ---------- Ebenen ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 20;
  --z-dock: 30;
  --z-overlay: 40;
  --z-toast: 50;

  /* ---------- Icons ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;

  color-scheme: light;
}

/* ============================================================================
   Dunkles Thema. Nicht invertiert, sondern eigenstaendig ausgemessen:
   Flaechen heben sich mit steigender Erhebung auf, Schatten treten zurueck,
   Marken- und Signalfarben werden aufgehellt, damit sie auf dunklem Grund
   dieselbe Lesbarkeit erreichen.
   ========================================================================= */

:root[data-theme='dark'] {
  --bg:            var(--sand-950);
  --bg-elevated:   var(--sand-900);
  --surface:       var(--sand-850);
  --surface-sunken: var(--sand-900);
  --surface-hover: #2a2823;
  --surface-active: #322f29;
  --scrim:         rgb(0 0 0 / 62%);

  --text:        var(--sand-100);
  --text-muted:  #b0a99a;
  --text-subtle: #948d7d;
  --text-on-brand: #0d1a13;

  --border:        #322f29;
  --border-strong: #7a7365;
  --border-focus:  var(--moss-300);

  --brand:          var(--moss-300);
  --brand-hover:    #93c7a8;
  --brand-active:   #a9d4b9;
  --brand-subtle:   #1a2b21;
  --brand-subtle-2: #22392b;
  --brand-text:     var(--moss-300);

  --warn:        var(--amber-300);
  --warn-subtle: #362a17;
  --danger:        var(--clay-300);
  --danger-hover:  #e9a196;
  --danger-subtle: #37201c;
  --info:        var(--sky-300);
  --info-subtle: #1a2635;

  --ink: #e8e6f2;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 20px rgb(0 0 0 / 36%);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 46%), 0 18px 44px rgb(0 0 0 / 44%);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 5%);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            var(--sand-950);
    --bg-elevated:   var(--sand-900);
    --surface:       var(--sand-850);
    --surface-sunken: var(--sand-900);
    --surface-hover: #2a2823;
    --surface-active: #322f29;
    --scrim:         rgb(0 0 0 / 62%);

    --text:        var(--sand-100);
    --text-muted:  #b0a99a;
    --text-subtle: #948d7d;
    --text-on-brand: #0d1a13;

    --border:        #322f29;
    --border-strong: #7a7365;
    --border-focus:  var(--moss-300);

    --brand:          var(--moss-300);
    --brand-hover:    #93c7a8;
    --brand-active:   #a9d4b9;
    --brand-subtle:   #1a2b21;
    --brand-subtle-2: #22392b;
    --brand-text:     var(--moss-300);

    --warn:        var(--amber-300);
    --warn-subtle: #362a17;
    --danger:        var(--clay-300);
    --danger-hover:  #e9a196;
    --danger-subtle: #37201c;
    --info:        var(--sky-300);
    --info-subtle: #1a2635;

    --ink: #e8e6f2;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 20px rgb(0 0 0 / 36%);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 46%), 0 18px 44px rgb(0 0 0 / 44%);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 5%);

    color-scheme: dark;
  }
}

/* Groessere Bildschirme bekommen mehr Luft, nicht nur mehr Breite. */
@media (min-width: 600px) { :root { --gutter: var(--sp-6); } }
@media (min-width: 1024px) { :root { --gutter: var(--sp-8); } }

/* Wer weniger Bewegung eingestellt hat, bekommt Zustandswechsel ohne Weg. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms;
    --dur-slow: 1ms; --dur-slower: 1ms;
  }
}