/* ProperHabitWeb · tokens.css
 * Design tokens: the landing page palette. One file, one palette, no exceptions:
 * every colour in styles.css is a var() that resolves here. Typefaces are NOT
 * here — they live in fonts.css, which the legal documents load too.
 *
 * Direction: bottle green, dark, premium. Deep green-black canvas, one emerald
 * accent that means "done", one gold signal reserved for the streak figure and
 * the lifetime plan. Gradient is for brand marks, the plan glow and the hero
 * light — never as decoration on flat surfaces.
 *
 * Contrast: every text token below is measured against the surfaces it is
 * actually used on (see the notes on each value). --faint was #62806f until
 * 2026-09-14 and failed AA on every surface except --surface-inset
 * (3.28–4.42:1); the current value clears 4.8:1 everywhere it appears.
 *
 * No third-party requests: every font file below lives in fonts/. The privacy
 * policy claims the site loads nothing from anyone else, and this is where that
 * promise is kept — no Google Fonts, no CDN.
 *
 * Unicode-range subsets: latin + latin-ext. Without latin-ext the Polish page
 * would silently fall back to a system font for ą ć ę ł ń ś ź ż.
 */

/* Typefaces and the font stacks live in fonts.css, which every page loads.
 * Keeping them out of the palette file is what stops a legal document from
 * inheriting the dark landing colours just to borrow a font. */

/* --------------------------------------------------------------- tokens ---- */

:root {
  color-scheme: dark;

  /* Canvas — bottle green pulled almost to black. Never pure #000. */
  --bg: #06110c;
  --bg-2: #08160f;
  --surface-1: #0a1a13;
  --surface-2: #0e2318;
  --surface-3: #133021;
  --surface-inset: #050e09;

  /* Hairlines — low opacity so structure reads before the border does. */
  --line: rgb(255 255 255 / 0.07);
  --line-2: rgb(255 255 255 / 0.12);
  --line-3: rgb(255 255 255 / 0.2);

  /* Text — four levels, all AA-checked against --bg through --surface-3.
     ink 12.7:1 · ink-2 9.4:1 · muted 5.5:1 · faint 4.8:1 (worst surface). */
  --ink: #ecf5f0;
  --ink-2: #c2d7cc;
  --muted: #8ba79a;
  --faint: #7c9e8b;

  /* Bottle green — brand core, used for marks and deep fills. */
  --bottle: #0b4a33;
  --bottle-mid: #0f5f45;
  --bottle-deep: #06301f;

  /* Accent — emerald. Means "done", "available", "this is the action". */
  --accent: #2fbf87;
  --accent-bright: #47dda2;
  --accent-light: #7ef0bd;
  --accent-deep: #1f9a6d;
  --accent-dim: rgb(47 191 135 / 0.14);
  --accent-line: rgb(47 191 135 / 0.32);
  --on-accent: #04150d;

  /* Signal — gold. Only the streak figure and the lifetime plan. */
  --gold: #ddb771;
  --gold-2: #c79a52;
  --gold-3: #e8cd94;
  --gold-soft: rgb(221 183 113 / 0.13);
  --gold-line: rgb(221 183 113 / 0.3);
  --on-gold: #24190a;
  --grad-gold: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 100%);

  /* Hardware — the device mockups. Named separately from brand surfaces so a
     future palette change never repaints an iPhone as if it were a card. */
  --hardware: #1b2c24;
  --hardware-2: #0c1a14;
  --hardware-3: #16241d;
  --hardware-island: #04100a;
  --screen-1: #08150f;
  --screen-2: #06110c;
  --grad-hardware: linear-gradient(160deg, var(--hardware) 0%, var(--hardware-2) 55%, var(--hardware-3) 100%);
  --grad-screen: linear-gradient(180deg, var(--screen-1) 0%, var(--screen-2) 100%);

  /* Pure — the maximum-contrast highlight on a filled control. */
  --pure: #ffffff;

  /* Health — Apple Health association, warmer than the brand danger red. */
  --health-bright: #ff8a89;

  /* Danger — a missed scheduled day. Used once, on purpose. */
  --danger: #e2605f;
  --danger-soft: rgb(226 96 95 / 0.16);
  --danger-text: #ff9a99; /* the readable step, for text on dark surfaces */

  /* Gradients — brand, hero light, plan glow. */
  --grad-brand: linear-gradient(135deg, var(--bottle) 0%, var(--accent) 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--bottle-deep) 0%, var(--bottle) 55%, var(--bottle-mid) 100%);
  --grad-text: linear-gradient(120deg, var(--accent-light) 0%, var(--accent) 45%, var(--accent-deep) 100%);

  /* ------------------------------------------------------------ layers ----
   * Translucent overlays and scrims. These are the ONLY alpha colours in the
   * system: a component asks for a layer by role instead of writing rgb(). */

  /* Light over dark: the top sheen of a raised surface, the veil of a hover. */
  --sheen: rgb(255 255 255 / 0.03);
  --sheen-2: rgb(255 255 255 / 0.05);
  --veil: rgb(255 255 255 / 0.06);
  --veil-2: rgb(255 255 255 / 0.09);
  --glass: rgb(255 255 255 / 0.045);
  --edge: rgb(255 255 255 / 0.14);
  --edge-2: rgb(255 255 255 / 0.16);
  --edge-strong: rgb(255 255 255 / 0.18);

  /* Dark over dark: shadows, scrims behind modals, the vignette on hardware. */
  --shade-1: rgb(0 0 0 / 0.35);
  --shade-2: rgb(0 0 0 / 0.4);
  --shade-3: rgb(0 0 0 / 0.5);
  --shade-4: rgb(0 0 0 / 0.9);
  --scrim: rgb(2 8 5 / 0.78);
  --scrim-screen: rgb(6 17 12 / 0.9);
  --scrim-screen-soft: rgb(4 16 11 / 0.55);
  --surface-glass: rgb(10 26 19 / 0.86);

  /* Ink at reduced strength — for secondary lines inside a mockup screen or a
     filled control, where a solid grey would read as a different colour. */
  --ink-85: rgb(236 245 240 / 0.85);
  --ink-80: rgb(236 245 240 / 0.8);
  --ink-72: rgb(236 245 240 / 0.72);
  --ink-66: rgb(236 245 240 / 0.66);
  --ink-60: rgb(236 245 240 / 0.6);

  /* Accent and gold at the strengths the components actually need. */
  --accent-70: rgb(47 191 135 / 0.7);
  --accent-55: rgb(47 191 135 / 0.55);
  --accent-28: rgb(47 191 135 / 0.28);
  --accent-22: rgb(47 191 135 / 0.22);
  --accent-16: rgb(47 191 135 / 0.16);
  --accent-bright-50: rgb(71 221 162 / 0.5);
  --accent-bright-28: rgb(71 221 162 / 0.28);
  --accent-bright-0: rgb(71 221 162 / 0);
  --gold-75: rgb(221 183 113 / 0.75);
  --gold-60: rgb(221 183 113 / 0.6);
  --gold-15: rgb(221 183 113 / 0.15);
  --bottle-55: rgb(11 74 51 / 0.55);

  /* Mask stop — the solid end of a fade-to-transparent mask. */
  --mask: #000;

  /* Focus */
  --focus: var(--accent-bright);

  /* Type scale (fluid) */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-hero: clamp(2.25rem, 1.35rem + 3.6vw, 3.5rem);
  --text-section: clamp(1.7rem, 1.25rem + 2vw, 2.5rem);
  --text-lead: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  /* Spacing — base 4px */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  /* Radius */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 999px;

  /* Elevation — dark, so depth comes from a lighter surface plus a soft dark
     shadow underneath. Two steps only. */
  --shadow-sm: 0 1px 2px var(--shade-2), 0 4px 12px -6px var(--shade-3);
  --shadow-md: 0 2px 6px var(--shade-1), 0 18px 40px -24px var(--shade-4);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 24px 60px -24px rgb(47 191 135 / 0.35);
  --shadow-gold: 0 0 0 1px var(--gold-line), 0 24px 60px -26px rgb(221 183 113 / 0.32);

  /* Motion */
  --dur-micro: 130ms;
  --dur-short: 200ms;
  --dur-med: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --page-max: 72rem;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --nav-h: 4rem;
  --z-nav: 100;
  --z-sticky: 90;
  --z-modal: 200;

  /* Minimum interactive size. WCAG 2.5.8 wants 24px; this site holds 44px for
     anything a thumb is expected to hit. */
  --tap: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}