/* Fylunor design tokens — teal & mint brand, Sora + Manrope. */

/* Both vendored as variable woff2 (OFL), latin subset, so the app makes no
   external requests and works offline. One file per family covers every weight. */
@font-face {
  font-family: 'Sora';
  src: url('../vendor/fonts/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../vendor/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand: one warm greige family ----------
     Greige is light and only lightly saturated, so the dark base is a warm
     near-neutral rather than the golden browns the old beige needed. Against a
     strongly brown ground a desaturated accent reads as "off-white" instead of
     as the brand; pulling the darks towards warm grey is what keeps it a
     colour. */
  --espresso: #1A1918;       /* primary background */
  --cocoa: #232221;          /* secondary background */
  --taupe: #2D2B29;          /* surface */
  --bark: #55514C;           /* border */
  --beige: #DDD5CD;          /* primary brand */
  --beige-bright: #EBE5DF;   /* bright accent */
  --beige-pale: #F3EFEB;     /* soft accent */
  --beige-light-surface: #FAF8F6;

  /* Semantic aliases — components reference these, never the raw brand names,
     so light and dark can remap without touching a single component. */
  --accent: var(--beige);
  --accent-strong: var(--beige-bright);
  --accent-soft: rgba(221, 213, 205, .14);
  --accent-line: rgba(221, 213, 205, .38);
  --on-accent: #23211E;

  /* System states only — never decorative (§3) */
  --danger: #FF8A7A;
  --warning: #F0C078;
  --success: var(--beige);

  /* Legacy alias: components still say `background: var(--brand-grad)`.
     It is a flat brand colour, not a gradient. */
  --brand-grad: var(--accent);

  /* ---------- Type (§4) ----------
     Sora carries the brand and every heading; Manrope carries the interface. */
  --font-brand: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Weights, named so intent survives refactors */
  --w-body: 400;
  --w-label: 500;
  --w-value: 600;      /* file sizes, counts, statuses */
  --w-control: 500;    /* buttons */
  --w-section: 600;    /* section headings */
  --w-page: 700;       /* page headings */

  /* rem-based so the OS font-size setting scales the whole app (§4, §32) */
  --fs-display: clamp(1.75rem, 6vw, 2.375rem);
  --fs-h1: clamp(1.375rem, 4.6vw, 1.75rem);
  --fs-h2: 1.1875rem;
  --fs-h3: 1rem;
  --fs-body: .9375rem;
  --fs-sm: .8125rem;
  --fs-xs: .72rem;

  --lh-tight: 1.2;
  --lh-body: 1.6;
  --tracking-h: -.02em;

  /* ---------- Radius ---------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;

  /* ---------- Layout ---------- */
  --page-max: 560px;
  --tablet-max: 1080px;
  --navbar-h: 68px;
  --tap-min: 44px;          /* minimum touch target (§34) */

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 460ms;
}

/* ---------- Dark (default) ---------- */
:root,
:root[data-theme="dark"] {
  --bg: var(--espresso);
  --bg-2: var(--cocoa);
  --bg-3: var(--taupe);
  --surface: rgba(250, 242, 226, .05);
  --surface-2: rgba(250, 242, 226, .09);
  --surface-solid: #2A241E;
  --line: rgba(87, 76, 64, .62);
  --line-strong: var(--bark);
  --text: #FBF7F0;
  --text-2: #CFC0AC;   /* 10.0:1 on --bg */
  /* The quietest text still carries meaning (dates, file details), so it holds
     AA at 12px rather than fading out: 6.2:1 on --bg. */
  --text-3: #A79684;
  --shadow-1: 0 2px 12px rgba(12, 9, 6, .5);
  --shadow-2: 0 18px 44px rgba(12, 9, 6, .64);
  --scrim: rgba(14, 11, 8, .74);
  color-scheme: dark;
}

/* ---------- Light ---------- */
:root[data-theme="light"] {
  /* Greige is far too pale to carry meaning on a light page, so light mode
     steps the same warm hue down to a deep stone. It has to clear AA twice —
     as link text on the page, and as a button fill under white text. Measured
     in the browser against the real blended backgrounds: 5.99:1 both ways. */
  --accent: #6A625A;
  --accent-strong: #514A44;
  --accent-soft: rgba(106, 98, 90, .10);
  --accent-line: rgba(106, 98, 90, .34);
  --on-accent: #FFFFFF;
  --danger: #B3402F;
  --warning: #8A5A12;
  --success: var(--accent);

  --bg: var(--beige-light-surface);
  --bg-2: #FFFFFF;
  --bg-3: #EDE9E4;
  --surface: rgba(35, 33, 30, .04);
  --surface-2: rgba(35, 33, 30, .08);
  --surface-solid: #FFFFFF;
  --line: rgba(35, 33, 30, .13);
  --line-strong: rgba(35, 33, 30, .26);
  --text: #23211E;
  --text-2: #55504A;   /* 7.5:1 on the page */
  --text-3: #67625B;   /* 5.7:1 — the quietest text still clears AA */
  --shadow-1: 0 2px 10px rgba(35, 33, 30, .08);
  --shadow-2: 0 18px 40px rgba(35, 33, 30, .16);
  --scrim: rgba(35, 33, 30, .44);
  color-scheme: light;
}

/* ---------- High contrast (§32) ----------
   Deliberately flattens the text hierarchy: quiet text becomes full-strength
   and every border becomes visible. Legibility is the point, and losing the
   three tones is the price. Fills drop out so a card reads as an outlined box
   rather than a low-contrast tint. */
:root[data-contrast="high"] {
  --text-2: var(--text);
  --text-3: var(--text);
  --line: var(--text);
  --line-strong: var(--text);
  --surface: transparent;
}

/* ---------- Text size (§32) ----------
   The whole type scale is in rem, so moving the root size moves everything at
   once — including anything the OS font-size setting has already applied, which
   this multiplies rather than replaces. Touch targets grow with the text, since
   a bigger label in a 44px control helps nobody. */
:root[data-text="large"]  { font-size: 112.5%; --tap-min: 48px; }
:root[data-text="larger"] { font-size: 125%;   --tap-min: 52px; }

/* ---------- Density ----------
   Spacing only. Text size is the separate axis above. */
:root[data-density="compact"] {
  --s4: 12px; --s5: 15px; --s6: 18px; --s7: 24px;
  --navbar-h: 60px;
}

/* ---------- Reduced motion ---------- */
:root[data-motion="reduced"] * ,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *,
  :root:not([data-motion="full"]) *::before,
  :root:not([data-motion="full"]) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}