/* TutedoFlow · „Almanach” — tokens.
   This is the first stylesheet: it declares the cascade-layer order once for the whole app.
   primitives → themes (data-theme on <html>, set by the inline head script and js/core/theme.js) → semantic roles. */
@layer tokens, base, layout, components, views, motion;

@layer tokens {
  /* ---------- primitives ---------- */
  :root {
    /* type: Bricolage Grotesque = display, figures, monograms; Source Sans 3 = text and UI (css/fonts.css) */
    --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Segoe UI", system-ui, sans-serif;
    --font-text: "Source Sans 3", "Source Sans Fallback", "Segoe UI", system-ui, sans-serif;
    --fvs-display: "opsz" 72, "wdth" 100;
    --fvs-fig: "opsz" 96, "wdth" 100;
    --fvs-ital: "opsz" 24, "wdth" 100;
    --fvs-small: "opsz" 12, "wdth" 100;
    /* numbers that must line up (amounts, times, counters): the self-hosted Source Sans 3 subset has no tnum/smcp,
       Bricolage has tnum — so figures use the display face and status words are letter-spaced capitals, not small caps */
    --font-num: var(--font-display);
    --fs-mark: 11.5px; --ls-mark: .08em;
    --w-display: 500; --ls-display: -.012em; --ls-fig: -.02em;
    /* the "note" voice: Bricolage has no italic — a lighter upright, never a synthesised slant */
    --ital-style: normal; --ital-weight: 400;

    /* type scale (px): few sizes, strong contrast */
    --fs-kicker: 11.5px; --fs-caption: 13.5px; --fs-body: 15.5px; --fs-lead: 17px;
    --fs-h3: 19px; --fs-h2: 24px; --fs-h1: 30px; --fs-fig: 34px; --fs-fig-lg: 46px;

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    /* radius by role — never one radius for everything (DESIGN.md §2.4) */
    --r-xs: 4px;      /* kbd, tiny marks */
    --r-sm: 8px;      /* month pills, small parts */
    --r-ev: 10px;     /* calendar lesson block */
    --r-ctl: 12px;    /* buttons, fields, segmented, the "Do potwierdzenia" tray */
    --r-group: 16px;  /* grouped lists, menus, toast, calendar surface */
    --r-lg: 18px;     /* tonal panels: hero, limit, plan */
    --r-sheet: 26px;  /* bottom sheet (desktop modal 22) */
    --r-pill: 999px;

    --gutter: 16px;
    --topbar-h: 56px;
    --tabbar-h: 58px;
    --mast-h: 105px;  /* desktop masthead: 60 top row + 44 nav + rule */
    --content-w: none;  /* the app always uses the full window width; side padding = --gutter (desktop: clamp below) */
    --measure: 75ch;    /* readable line length for paragraphs on wide screens */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    /* motion */
    --ease-out: cubic-bezier(.22, .8, .2, 1);
    --ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --ease-stamp: cubic-bezier(.2, 1.4, .4, 1);
    --ease-spring: cubic-bezier(.16, 1, .3, 1);      /* sheet open: fast start, long soft settle, no overshoot */
    --ease-settle: cubic-bezier(.3, 1.35, .5, 1);    /* toast, FAB, small marks: a short overshoot */
    --t-fast: 120ms; --t-base: 200ms; --t-sheet: 420ms;
    --t-enter: 280ms; --stagger: 40ms;               /* widget entrance: each widget 280 ms, 40 ms apart, capped at 7 steps */

    /* widgets (css/components/widget.css): every section is an outlined sheet of paper; no shadows, the border carries it */
    --widget-radius: var(--r-group);        /* sections */
    --widget-radius-tone: var(--r-lg);      /* tonal widgets: hero, limit, plan, inbox tray */
    --widget-radius-tile: 14px;             /* repeated tiles: student cards, price cards */
    --widget-pad: 16px; --widget-pad-x: 16px;
    --widget-gap: 12px;

    /* accent: user-selectable (js/core/theme.js sets --ah --as --al-l --al-d from ACCENTS); default "Atrament" */
    --ah: 232; --as: 84%; --al-l: 48%; --al-d: 74%;
  }

  /* ---------- themes ---------- */
  /* Jasny: białe tło, tylko lekkie akcenty. Poświaty na body (css/base.css). */
  :root, :root[data-theme="light"] {
    --paper: #ffffff; --paper-2: #f5f5f7; --paper-3: #ebebef;
    --surface: #ffffff; --ink: #16161c; --ink-2: #4c4c58; --ink-3: #6e6e7c;
    --rule: #e6e6ec; --rule-2: #d2d2da; --rule-3: #a4a4b0;
    --good: #1e7a4c; --good-ink: #176b42; --warn: #855300; --danger: #b3261e; --info: #2b5aa5;
    --good-inv: #5fcf8f; --danger-inv: #f3837a;   /* tones on an inverted (ink) surface: toast */
    --good-soft: rgba(30, 122, 76, .14); --warn-soft: rgba(143, 90, 0, .14); --danger-soft: rgba(179, 38, 30, .12); --info-soft: rgba(43, 90, 165, .12);
    --al: var(--al-l); --on-accent: #ffffff; --sl: 38%; --ss: 62%;
    --shadow-sm: 0 1px 2px rgba(22, 22, 28, .06);
    --shadow-sheet: 0 -8px 30px rgba(22, 22, 28, .12);
    --shadow-pop: 0 10px 28px rgba(22, 22, 28, .14), 0 1px 0 rgba(22, 22, 28, .05);
    --scrim: rgba(22, 22, 28, .42);
    --tint-strength: .12;
    --widget-border: #e0e0e6; --widget-border-hover: #c4c4ce;
    --widget-bg: color-mix(in srgb, #ffffff 94%, transparent);
    --glass-blur: blur(10px) saturate(1.08);
    --wash-a: hsl(var(--ah) var(--as) 62% / .10);
    --wash-b: hsl(300 40% 72% / .06);
    --wash-c: hsl(168 35% 58% / .05);
    color-scheme: light;
  }
  /* Ciemny: prawie czerń, cicha poświata */
  :root[data-theme="dark"] {
    --paper: #07070a; --paper-2: #101014; --paper-3: #18181e;
    --surface: #101014; --ink: #f3f3f6; --ink-2: #c6c6d0; --ink-3: #9a9aa6;
    --rule: #222228; --rule-2: #32323a; --rule-3: #5a5a66;
    --good: #5fcf8f; --good-ink: #5fcf8f; --warn: #e9b44c; --danger: #f3837a; --info: #9eb6ff;
    --good-inv: #1e7a4c; --danger-inv: #b3261e;
    --good-soft: rgba(95, 207, 143, .16); --warn-soft: rgba(233, 180, 76, .16); --danger-soft: rgba(243, 131, 122, .16); --info-soft: rgba(158, 182, 255, .16);
    --al: var(--al-d); --on-accent: #07070a; --sl: 72%; --ss: 60%;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sheet: 0 -8px 36px rgba(0, 0, 0, .5);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55), 0 0 0 1px var(--rule-2);
    --scrim: rgba(8, 6, 16, .62);
    --tint-strength: .22;
    --widget-border: #2a2a32; --widget-border-hover: #3e3e48;
    --widget-bg: color-mix(in srgb, #101014 94%, transparent);
    --glass-blur: blur(10px) saturate(1.08);
    --wash-a: hsl(var(--ah) var(--as) 40% / .06);
    --wash-b: hsl(300 35% 36% / .04);
    --wash-c: hsl(168 30% 32% / .035);
    color-scheme: dark;
  }
  /* widget spacing by width */
  @media (min-width: 761px) { :root { --widget-pad: 18px; --widget-pad-x: 22px; --widget-gap: 16px; } }
  @media (max-width: 380px) { :root { --widget-pad: 14px; --widget-pad-x: 12px; --widget-gap: 10px; } }
  /* No prefers-color-scheme block: the head script always sets data-theme to light or dark. */

  /* ---------- semantic roles ---------- */
  :root {
    --accent: hsl(var(--ah) var(--as) var(--al));
    --accent-soft: hsl(var(--ah) var(--as) var(--al) / .12);
    --accent-soft-2: hsl(var(--ah) var(--as) var(--al) / .22);
    --accent-line: hsl(var(--ah) var(--as) var(--al) / .45);
    --edge: var(--rule-3);   /* resting edge of fields and boxed surfaces, ≥ 3:1 */
  }
  /* per-student colour: --h is set inline (style="--h:…") on any element; the derived roles follow it */
  * {
    --hue: hsl(var(--h, 220) var(--ss) var(--sl));
    --hue-soft: hsl(var(--h, 220) var(--ss) var(--sl) / var(--tint-strength));
    --hue-line: hsl(var(--h, 220) var(--ss) var(--sl) / .8);   /* ≥ 3:1 on surface */
  }
}