/* ==========================================================================
   theme.css — Fluent 2 / M365 Copilot design tokens (single source of truth)
   --------------------------------------------------------------------------
   Loaded FIRST, before styles.css and every module CSS, so the variables
   cascade everywhere. Do NOT put tokens in module-shell.css (it loads last).

   Token values come verbatim from docs/07-fluent-theme-migration.md.

   Fonts: system-first (real Segoe UI on Windows ships nothing), falling back
   to vendored Selawik (Microsoft's own SIL OFL, metric-compatible Segoe
   substitute) on macOS / Linux / Android. No remote font requests — the woff2
   files are self-hosted under /vendor/selawik/, covered by font-src 'self'.
   ========================================================================== */

/* ---- Selawik @font-face (weights 400, 600, 700) -------------------------- */
@font-face {
  font-family: "Selawik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Selawik"), url("/vendor/selawik/selawik-400.woff2") format("woff2");
}
@font-face {
  font-family: "Selawik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local("Selawik Semibold"), url("/vendor/selawik/selawik-600.woff2") format("woff2");
}
@font-face {
  font-family: "Selawik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Selawik Bold"), url("/vendor/selawik/selawik-700.woff2") format("woff2");
}

/* ---- Light mode (default) ------------------------------------------------ */
:root {
  /* SINGLE canonical font stack (the whole app references this token). System-
     FIRST so every OS shows its own clean native UI font and macOS matches the
     clikwork-home-final mockup (San Francisco): macOS/iOS → -apple-system,
     Windows → Segoe UI, others → Selawik/Roboto. Selawik (vendored @font-face
     above) is now only a fallback for OSes without a native UI font, so it no
     longer overrides San Francisco on macOS. */
  --font-base: -apple-system, system-ui, "Segoe UI", "Selawik", Roboto,
               Helvetica, Arial, sans-serif;

  /* Text */
  --text-primary: #242424;
  --text-secondary: #616161;
  --text-tertiary: #707070;
  --text-disabled: #BDBDBD;
  --text-on-brand: #FFFFFF;

  /* Page canvas — PURE WHITE app-wide (matches the clikwork-home-final mockup).
     Was a lilac/pink gradient; removed at the source so no surface (SPA shell,
     module, or standalone page that links theme.css) shows a purple band. */
  --bg-canvas: #fff;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F5F4F9;
  --bg-card-accent: #EFEDFB;

  /* Glassmorphism (frosted surfaces) */
  --glass-fill: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.65);
  --glass-blur: 10px;
  --glass-shadow: 0 4px 24px rgba(40,30,90,.08);
  --glass-fill-solid: #F6F5FC;   /* opaque fallback */

  /* Strokes */
  --stroke-default: #E0E0E0;
  --stroke-subtle: #EDEBE9;
  --stroke-strong: #D1D1D1;

  /* Brand (Fluent purple) */
  --brand-primary: #5B5FC7;
  --brand-rgb: 91, 95, 199;   /* #5B5FC7 channels for rgba(var(--brand-rgb), a) tints/glows */
  --brand-hover: #4F52B2;
  --brand-pressed: #444791;
  --brand-foreground: #4F52B2;
  --brand-tint: #E8EBFA;
  --copilot-gradient: linear-gradient(135deg, #8A6FE8 0%, #D267CE 50%, #5AA1F0 100%);

  /* Status */
  --success: #107C10;
  --warning: #F7630C;
  --danger: #C50F1F;
  --info: #5B5FC7;

  /* Typography ramp — `font` shorthands: weight size/line family.
     Weights: 400 regular, 600 semibold. */
  --font-caption:      400 12px/16px var(--font-base);
  --font-body:         400 14px/20px var(--font-base);
  --font-body-strong:  600 14px/20px var(--font-base);
  --font-subtitle:     600 16px/22px var(--font-base);
  --font-subtitle-lg:  600 20px/26px var(--font-base);
  --font-title-3:      600 24px/32px var(--font-base);
  --font-title-2:      600 28px/36px var(--font-base);
  --font-title-1:      600 32px/40px var(--font-base);
  --font-display:      600 40px/52px var(--font-base);

  /* Radii (Fluent 2) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Elevation (Fluent — subtle, two-part shadows) */
  --shadow-2:  0 1px 2px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
  --shadow-4:  0 2px 4px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
  --shadow-8:  0 4px 8px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
  --shadow-16: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12);
}

/* ---- Dark mode ----------------------------------------------------------
   Overrides only the tokens the doc lists for dark; everything else inherits
   the light values. Driven by OS preference, with an explicit
   [data-theme="dark"|"light"] attribute able to override it. Dark mode ships
   later — these are defined now so the surface is ready.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #FFFFFF;
    --text-secondary: #D6D6D6;
    --text-tertiary: #ADADAD;

    --bg-canvas: #1C1C22;  /* solid dark page canvas — no purple glow */
    --bg-surface: #292929;
    --bg-subtle: #1F1F1F;
    --bg-card-accent: #2D2A3D;

    --stroke-default: #3D3D3D;

    --brand-primary: #7F85F5;
    --brand-rgb: 127, 133, 245;
    --brand-hover: #9299FF;
    --brand-foreground: #9299FF;

    /* Glassmorphism (dark) */
    --glass-fill: rgba(40,40,48,.45);
    --glass-border: rgba(255,255,255,.10);
    --glass-shadow: 0 4px 24px rgba(0,0,0,.35);
    --glass-fill-solid: #26262E;
  }
}

:root[data-theme="dark"] {
  --text-primary: #FFFFFF;
  --text-secondary: #D6D6D6;
  --text-tertiary: #ADADAD;

  --bg-canvas: #1C1C22;  /* solid dark page canvas — no purple glow */
  --bg-surface: #292929;
  --bg-subtle: #1F1F1F;
  --bg-card-accent: #2D2A3D;

  --stroke-default: #3D3D3D;

  --brand-primary: #7F85F5;
  --brand-rgb: 127, 133, 245;
  --brand-hover: #9299FF;
  --brand-foreground: #9299FF;

  /* Glassmorphism (dark) */
  --glass-fill: rgba(40,40,48,.45);
  --glass-border: rgba(255,255,255,.10);
  --glass-shadow: 0 4px 24px rgba(0,0,0,.35);
  --glass-fill-solid: #26262E;
}

/* ---- Page canvas -------------------------------------------------------
   Paint --bg-canvas once as a full-viewport FIXED layer so the layered
   gradient never tiles or scrolls (more reliable on mobile than
   background-attachment:fixed). Lives on html::before so it doesn't clobber
   the body::before/::after texture layers in styles.css. Linked on every page,
   so the canvas applies to index.html and every standalone page; page bodies
   must stay transparent for it to show through (z-index:-1 sits behind content).
   ------------------------------------------------------------------------ */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-canvas);
  pointer-events: none;
}

/* Form controls don't inherit the page font by default — make them follow
   --font-base (via <body>) on EVERY entry point, including standalone pages
   that don't load styles.css. So Selawik applies to inputs/buttons too. */
input, button, select, textarea { font-family: inherit; }

/* ---- Glass utility -----------------------------------------------------
   One reusable frosted-surface class. Reuses the glass-* tokens — never
   hardcode these per component. Falls back to an opaque fill where
   backdrop-filter is unsupported or transparency is reduced.
   ------------------------------------------------------------------------ */
.glass {
  background: var(--glass-fill);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-fill-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-fill-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}