/*
 * Valon tenant theme for the Gestalt home shell (gestalt-providers app/default).
 *
 * Served at /theme.css: apps.home.static.theme in deploy/config.yaml points
 * `stylesheet` at this file, and gestaltd serves it under the mount.
 * override the bundle's built-in defaults.
 *
 * Conventions (workdocs theming guideline): raw color values live only on the
 * --valon-* palette constants; every system token maps to a palette name.
 * Values are whole `oklch()` colors (the consuming contract's house
 * format; alpha composition happens bundle-side via color-mix). Brand source: Valon style guide (warm neutrals derived from
 * #231810, brand gold #E19614, never pure grays).
 */

:root {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --valon-paper: oklch(100% 0 0);            /* #FFFFFF */
  --valon-cream-100: oklch(97.983% 0.0045 78.3);  /* ~#FAF8F5 — surface bg */
  --valon-cream-200: oklch(95.005% 0.0074 80.72);  /* ~#F1EEE9 — raised surfaces */
  --valon-cream-line: oklch(90.365% 0.0105 67.69); /* borders, dividers */
  --valon-ink: oklch(22.81% 0.0195 52.41);        /* ~#231810 — primary text + alpha ink system */
  --valon-neutral-100: oklch(97.384% 0.0045 78.3); /* sidebar + neutral hover chrome */
  --valon-gold-100: oklch(97.9% 0.02 81.8);
  --valon-gold-200: oklch(93.6% 0.053 81.8);   /* ≡ gold-soft */
  --valon-gold-300: oklch(85.9% 0.112 82.4);   /* selected fills (nav, sidebar) */
  --valon-gold-400: oklch(79.3% 0.144 80.4);   /* focus ring / solid chrome */
  --valon-gold-500: oklch(73.1% 0.152 78.53);   /* link text (accent-strong) */
  --valon-gold-800: oklch(46.522% 0.0933 70.48);   /* #7a4f10 — brand on light (AA on white) */
  --valon-gold-soft: var(--valon-gold-200);
  --valon-ember: oklch(58.766% 0.1526 25);      /* #c75050 family — same hue as red ramp */
  --valon-grove: oklch(48.204% 0.120 144);      /* success ink — chroma on envelope, not a mid-ramp dip */

  /* ── System tokens ───────────────────────────────────────────────── */
  --background: var(--valon-paper);
  --surface: var(--valon-cream-100);
  --surface-raised: var(--valon-cream-200);
  /* Solid cards use published Base 100 / neutral-100, not raised cream-200. */
  --secondary: var(--valon-neutral-100);
  --secondary-foreground: var(--valon-ink);
  /* Card + flyout overlays (bg-card, bg-popover) — Registry maps to paper, not
   * --surface / --surface-raised; the bundle defaults alias those roles. */
  --card: var(--valon-paper);
  --card-foreground: var(--valon-ink);
  --popover: var(--valon-paper);
  --popover-foreground: var(--valon-ink);
  /* Interaction ladder — Registry parity (registry/theme/theme.css). Bundle
   * defaults alias vivid→brand-soft, solid/strong/ring→brand, sidebar→surface. */
  --accent-vivid: var(--valon-gold-300);
  --accent-vivid-foreground: var(--valon-ink);
  --accent-solid: var(--valon-gold-400);
  --accent-strong: var(--valon-gold-500);
  --ring: var(--valon-gold-400);
  --neutral-hover: var(--valon-neutral-100);
  --sidebar: var(--valon-neutral-100);
  --sidebar-foreground: var(--valon-ink);
  --border: var(--valon-cream-line);
  /* Control border — stronger than structural --border (Gestalt THEMING.md /
   * Registry --input). Idle checkbox rings use this. */
  --input: color-mix(in oklab, var(--valon-ink) 28%, var(--valon-paper));
  --foreground: var(--valon-ink);
  --alpha-dark: var(--valon-ink);
  --brand: var(--valon-gold-800);
  --brand-soft: var(--valon-gold-soft);
  --danger: var(--valon-ember);
  --success: var(--valon-grove);

  /* Brand layout spec: container max-width 1300px. */
  --content-max-width: 81.25rem;

  /* Season Serif Medium (the brand style guide's display weight is 400;
   * medium is the current product-design direction). */
  --heading-weight: 500;
}

.dark {
  /* Redeclare every color token the bundle's .dark sets: :root and .dark
   * tie on specificity, so omitting one here would leak this file's :root
   * (light) value into dark mode. */

  /* ── Palette (dark) ──────────────────────────────────────────────── */
  --valon-night: oklch(19.494% 0.0088 55.5);
  --valon-night-100: oklch(22.685% 0.0097 54.8);
  --valon-night-200: oklch(27.009% 0.0106 54.2);
  --valon-night-line: oklch(32.208% 0.0111 55.96);
  --valon-cream-ink: oklch(92.718% 0.0097 72.66);  /* also the dark alpha ink */
  --valon-gold-300: oklch(85.935% 0.1118 82.45);   /* #f5ca78 — brand on dark */
  --valon-gold-dark-200: oklch(85.935% 0.1118 82.45);
  --valon-gold-dark-300: oklch(77% 0.125 80);
  --valon-gold-dark-400: oklch(67% 0.135 78);
  --valon-gold-dark-500: oklch(57% 0.1198 76);
  --valon-gold-deep: oklch(38.46% 0.075 71.86);  /* #5c3c0c */
  --valon-ember-soft: oklch(79.039% 0.0918 19.31); /* #f0a3a3 */
  --valon-grove-soft: oklch(86.526% 0.0672 144.97); /* #b8dfb8 */

  /* ── System tokens (dark) ────────────────────────────────────────── */
  --background: var(--valon-night);
  --surface: var(--valon-night-100);
  --surface-raised: var(--valon-night-200);
  --secondary: var(--valon-night-200);
  --secondary-foreground: var(--valon-cream-ink);
  /* Match Registry: card + popover use night-100, not raised night-200. */
  --card: var(--valon-night-100);
  --card-foreground: var(--valon-cream-ink);
  --popover: var(--valon-night-100);
  --popover-foreground: var(--valon-cream-ink);
  /* Interaction ladder — Registry parity (see :root). */
  --accent-vivid: var(--valon-gold-dark-300);
  --accent-vivid-foreground: var(--valon-night);
  --accent-solid: var(--valon-gold-dark-400);
  --accent-strong: var(--valon-gold-dark-500);
  --ring: var(--valon-gold-dark-200);
  --neutral-hover: var(--valon-night-200);
  --sidebar: var(--valon-night);
  --sidebar-foreground: var(--valon-cream-ink);
  --border: var(--valon-night-line);
  --input: color-mix(in oklab, var(--valon-cream-ink) 28%, var(--valon-night));
  --foreground: var(--valon-cream-ink);
  --alpha-dark: var(--valon-cream-ink);
  --brand: var(--valon-gold-300);
  --brand-soft: var(--valon-gold-deep);
  --danger: var(--valon-ember-soft);
  --success: var(--valon-grove-soft);
}

/*
 * Brand faces — licensed cuts served by gestaltd from this deployment's
 * ui/fonts directory (config.theme.assetsDir) at /theme/fonts/…. Absolute
 * URLs so dev (rewritten to gestaltd) and prod resolve identically.
 */

@font-face {
  font-family: "Season Serif";
  src: url("/theme/fonts/SeasonSerif_Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Season Serif";
  src: url("/theme/fonts/SeasonSerif_RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* The Medium cut's OS/2 usWeightClass is a non-standard 650 (Displaay
 * foundry quirk); declaring 500 here is what CSS matches against, so it
 * pairs with the --heading-weight: 500 above. */
@font-face {
  font-family: "Season Serif";
  src: url("/theme/fonts/SeasonSerif_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Grotesk";
  src: url("/theme/fonts/KMRMelangeGrotesk_BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/theme/fonts/GeistMono_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/theme/fonts/GeistMono_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/theme/fonts/GeistMono_SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/theme/fonts/GeistMono_Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* body-scoped, not :root — the bundle's font seam reads tenant overrides
 * from body (see THEMING.md). */
body {
  --font-display: "Season Serif", Georgia, serif;
  --font-body: "KMR Melange Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}