/* ABOUTME: Divine brand token layer — palette, type, spacing, and shape.
   ABOUTME: Component rules live in app.css and must reference only these tokens. */

/* Inter carries body and UI text. Self-hosted so it never depends on a CDN. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/app/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/app/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primary palette — VISUAL_IDENTITY.md */
  --divine-green: #27C58B;
  --divine-green-dark: #07241B;
  --divine-green-light: #D0FBCB;
  --divine-off-white: #F9F7F6;

  /* Secondary palette — main / light / dark triplets */
  --divine-yellow: #FFF140;
  --divine-yellow-light: #FFFABB;
  --divine-yellow-dark: #363313;
  --divine-lime: #D2FF40;
  --divine-lime-light: #F1FFC8;
  --divine-lime-dark: #272F0E;
  --divine-pink: #FF7FAF;
  --divine-pink-light: #FFDEEA;
  --divine-pink-dark: #3E0C1F;
  --divine-orange: #FF7640;
  --divine-orange-light: #FFD8C9;
  --divine-orange-dark: #471F10;
  --divine-violet: #A3A9FF;
  --divine-violet-light: #E1E3FF;
  --divine-violet-dark: #2D214D;
  --divine-purple: #8568FF;
  --divine-purple-light: #DDD4FF;
  --divine-purple-dark: #231557;
  --divine-blue: #34BBF1;
  --divine-blue-light: #CCEEFE;
  --divine-blue-dark: #0A223C;

  /* Semantic surfaces */
  --surface: var(--divine-off-white);
  --surface-raised: #fff;
  --surface-chrome: var(--divine-green-dark);
  --surface-sunken: color-mix(in srgb, var(--ink) 6%, var(--surface));
  --surface-inset: color-mix(in srgb, var(--ink) 12%, var(--surface));
  --chrome-hover: color-mix(in srgb, var(--ink-on-chrome) 14%, transparent);

  /* Semantic ink. Muted is derived from the palette, never invented.
     Measured 6.38:1 against --surface. */
  --ink: var(--divine-green-dark);
  --ink-muted: color-mix(in srgb, #07241B 72%, #F9F7F6);
  --ink-on-chrome: var(--divine-off-white);

  /* Semantic action. Dark Green on Green measures 7.39:1. */
  --action: var(--divine-green);
  --action-ink: var(--divine-green-dark);
  --action-hover: color-mix(in srgb, var(--action) 86%, var(--ink));

  /* Semantic status, each drawn from one palette triplet.
     Orange dark on orange light measures 10.82:1. */
  --danger-fill: var(--divine-orange-light);
  --danger-ink: var(--divine-orange-dark);
  --danger-accent: var(--divine-orange);
  --success-fill: var(--divine-green-light);
  --success-ink: var(--divine-green-dark);
  --success-accent: var(--divine-green);
  --pending-fill: var(--divine-yellow-light);
  --pending-ink: var(--divine-yellow-dark);
  --pending-accent: var(--divine-yellow);
  /* The focus indicator is two-tone because no single palette color clears the
     3:1 non-text contrast floor of WCAG SC 1.4.11 on both surfaces the app
     uses. Blue is 7.46:1 on the dark chrome but only 2.06:1 on the off-white
     page; Dark Green is 15.40:1 on the off-white page but 1:1 on the chrome.
     Painting both means one tone always carries the indicator. */
  --focus-ring: var(--divine-blue);
  --focus-ring-outer: var(--divine-green-dark);
  --focus-halo: 0 0 0 6px var(--focus-ring-outer);

  /* Lines and depth. Depth is a solid offset: the brand bans blurred
     effects and gradients, so a hard shadow is the only permitted device. */
  --divine-border: color-mix(in srgb, #07241B 16%, transparent);
  --divine-border-strong: color-mix(in srgb, #07241B 88%, transparent);
  --border-hairline: 1px;
  --border-chunky: 2px;
  --shadow-solid: 0 2px 0 var(--divine-border-strong);
  --shadow-solid-sm: 0 1px 0 var(--divine-border-strong);

  /* Shape */
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Type */
  --divine-font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --divine-font-display: 'Bricolage Grotesque', 'Inter Variable', Inter,
    ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --display-sm: clamp(1.25rem, 2vw, 1.5rem);
  --display-md: clamp(1.5rem, 3vw, 2rem);
  --display-lg: clamp(2rem, 5vw, 2.75rem);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Controls. 44px is a comfortable pointer and touch target. */
  --control-height: 44px;
  --header-height: 68px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--divine-font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* Bricolage Grotesque carries display type. Its opsz axis spans 12..96, so
   optical sizing must be active for large headings to render correctly. */
h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--divine-font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--display-lg); }
h2 { font-size: var(--display-md); }
h3 { font-size: var(--display-sm); }

/* Every interactive element gets a visible ring. The app previously had no
   focus styling at all, leaving keyboard users with the browser default.

   The halo is a solid spread with zero blur — the brand bans blurred effects —
   and it fills the outline's offset gap as well as the band beyond it, so the
   indicator reads as Dark Green / Blue / Dark Green, 2px per band. */
:focus-visible {
  outline: var(--border-chunky) solid var(--focus-ring);
  outline-offset: var(--border-chunky);
  box-shadow: var(--focus-halo);
}