/*
 * PM Habit design tokens, version 1 (Phase 2.5 step 2, session 38, Oct 9 2026).
 *
 * THE ONE SOURCE OF TRUTH for colours, type, spacing and shape. Decided by
 * Geea (B1, Oct 7): the site owns this file; the snippet kit's theme.css and
 * the Tuesday email READ it and define no values of their own. To restyle the
 * product, edit this file. No component may hard-code a colour, font or size.
 *
 * Look: "L1a Sky" by day, "B2d Deep Ocean, darker" by night (design page
 * https://claude.ai/artifact/RXmnYjvRbNxySgejeeoA4E).
 *
 * Rules for the values in this file (they are read by email clients):
 *   - Colours are plain hex. Never oklch(), color-mix() or 8-digit hex.
 *   - The ONE exception is --ph-shadow, which uses rgba(): email clients
 *     mostly drop shadows anyway, so nothing breaks there.
 *   - Sizes and spacing are rem, so they grow with a reader's own default
 *     text size. The send job converts rem to px when it inlines the email
 *     (Outlook desktop ignores rem). Radius stays px on purpose.
 *   - Names follow claude/snippet-kit-spec-v1.md section 5, plus one
 *     site-and-email-only name, --ph-logo-dot (the kit does not use it).
 *
 * Glass, blur and the coloured lights are NOT here: the site keeps them in
 * app/globals.css (--site-...) with solid fallbacks, because email cannot
 * render them.
 */

/* ---- Fonts (self-hosted, SIL Open Font License; see fonts/OFL-*.txt) ---- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/ph/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/ph/fonts/bricolage-grotesque-latin-ext-var.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/ph/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  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;
}

/* ---- Tokens: light (L1a Sky) ---- */

:root {
  color-scheme: light dark;

  /* Type */
  --ph-font-display: "Bricolage Grotesque", Arial, Helvetica, sans-serif;
  --ph-font-body: "Atkinson Hyperlegible", Arial, Helvetica, sans-serif;
  --ph-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ph-size-0: 0.8125rem;  /* 13px: eyebrows, captions, footer */
  --ph-size-1: 1rem;       /* 16px: body */
  --ph-size-2: 1.1875rem;  /* 19px: buttons, quotes; white-on-violet minimum */
  --ph-size-3: 1.5rem;     /* 24px: section titles */
  --ph-size-4: 1.875rem;   /* 30px: page titles on phones */
  --ph-size-5: 2.5rem;     /* 40px: page titles on desktop */
  --ph-leading: 1.6;
  --ph-leading-tight: 1.2;  /* titles, headings, quotes (H7, Oct 12) */
  --ph-measure: 62ch;

  /* Colour */
  --ph-bg: #EFEAFB;
  --ph-surface: #FAF8FF;
  --ph-surface-alt: #E6DFFA;
  --ph-border: #D6CCF5;
  --ph-text: #1F1B30;
  --ph-text-muted: #3F3A55;
  --ph-accent: #5A3FD8;
  --ph-on-accent: #FFFFFF;
  --ph-positive: #0B6E65;
  --ph-negative: #B3261E;
  --ph-neutral: #5B5675;
  --ph-logo-dot: #0E8C80;  /* aqua by day; the email's full stop */

  /* Shape */
  --ph-radius: 12px;
  --ph-space-1: 0.25rem;   /* 4px */
  --ph-space-2: 0.5rem;    /* 8px */
  --ph-space-3: 0.75rem;   /* 12px */
  --ph-space-4: 1rem;      /* 16px */
  --ph-space-5: 1.5rem;    /* 24px */
  --ph-space-6: 2.5rem;    /* 40px */
  --ph-shadow: 0 16px 36px rgba(90, 63, 216, 0.14);
}

/* ---- Tokens: dark (B2d Deep Ocean, darker) ---- */

@media (prefers-color-scheme: dark) {
  :root {
    --ph-bg: #03111A;
    --ph-surface: #0E1D27;
    --ph-surface-alt: #15222A;
    --ph-border: #26323A;
    --ph-text: #FFFFFF;
    --ph-text-muted: #C2DADB;
    --ph-accent: #8FE3D8;
    --ph-on-accent: #0B2421;
    --ph-positive: #6EE7A8;
    --ph-negative: #FF8A8A;
    --ph-neutral: #A9B8C2;
    --ph-logo-dot: #FFC9A3;  /* pale peach at night: the only warm mark */
    --ph-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
  }
}