/*
 * HeyHi design system: fonts and tokens.
 *
 * The look is warm editorial precision. Warm paper and ink, one dark band where a page needs weight, and HeyHi amber
 * as the only accent, on under a twentieth of any screen: the action a section leads with, what's live, the AI's
 * voice. Headlines are set in an editorial serif, everything else in a quiet grotesk, and the metadata (indices,
 * statuses, times) in a mono, so the page reads like a well-made document. Structure is drawn in one-pixel lines: rails
 * down the content's edges, rules across between sections, hairlines between rows. Product screens are the only things
 * that cast a shadow.
 *
 * The stylesheets load in file-name order (Propshaft's :app sorts by path), so the numbers set the cascade:
 *   00 tokens · 10 base · 12 motion · 15 media (video) · 20 chrome (header, footer) · 25 products (UI cards, the call)
 *   30 dialogs · 40 assistant · 50 home · 55 proof (logos, quotes, numbers, news) · 60 product page · 70 pages
 *
 * Components use these tokens, never raw values. Colours come in two layers: the palette (--c-*), which never changes,
 * and the roles components use (--ink, --line, --surface…), which a surface re-points: a .section--night swaps them for
 * the night palette, and a product screen (.ui-card) pins them back to the light one, so every component reads right
 * on whatever it sits on.
 */

/*
 * Self-hosted fonts (the security policy allows only our own), all under the SIL Open Font License 1.1
 * (openfontlicense.org). Newsreader by Production Type, for headlines, cut to the weights (360–600) and optical sizes
 * (20–72) the site uses; Instrument Sans by Instrument, for text; Geist Mono by Vercel, for metadata. (The wordmark is a
 * drawing, in app/assets/images/icons.svg.) Each Latin file has an extended-Latin partner where one is needed, fetched
 * only when a page uses one of its characters.
 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 360 600;
  font-display: swap;
  src: url("/assets/newsreader-latin-0014af45.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: "Newsreader";
  font-style: normal;
  font-weight: 360 600;
  font-display: swap;
  src: url("/assets/newsreader-latin-ext-9ea5dee9.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/instrument-sans-latin-a8631a51.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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/instrument-sans-latin-ext-328e2b6e.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-mono-latin-a600ad3f.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;
}

:root {
  color-scheme: light;

  /* ---------- Palette: fixed values ---------- */
  /* Paper and ink are warm, never pure. Text colours pass WCAG AA on paper and panel: ink-soft 8:1, ink-mute 4.9:1. */
  --c-paper: #F7F4EE;          /* the page */
  --c-panel: #EFEAE1;          /* a panel or a tinted band, 3% deeper */
  --c-panel-deep: #E6DFD3;     /* a panel on a panel */
  --c-white: #FFFFFF;          /* product screens */
  --c-ink: #1A1713;            /* headlines and text */
  --c-ink-soft: #4F4840;       /* leads and secondary text */
  --c-ink-mute: #6B6359;       /* captions, metadata */
  --c-line: #E2DBD0;           /* hairlines on paper: ink at about 10% */
  --c-line-strong: #CFC5B6;    /* lines that must be seen: inputs, ghost buttons, rules under a list */

  /* Night: one dark band where a page needs weight, and the footer */
  --c-night: #15120F;
  --c-night-raised: #1E1A16;
  --c-night-text: #F3EFE7;
  --c-night-soft: #C8C0B4;
  --c-night-mute: #958D81;
  --c-night-line: rgba(243, 239, 231, 0.13);
  --c-night-line-strong: rgba(243, 239, 231, 0.26);

  /* HeyHi amber: the leading action, "live", the AI's voice */
  --amber: #F5A524;
  --amber-hover: #FFB83D;
  --amber-press: #E39615;
  --amber-soft: #FCEBCB;       /* an amber wash, for a highlighted row */
  --amber-ink: #8A5300;        /* amber as text on paper or white */
  --amber-glow: rgba(245, 165, 36, 0.24);

  /* ---------- Roles: what components use; surfaces re-point them ---------- */
  --surface: var(--c-paper);
  --surface-raised: var(--c-panel);
  --ink: var(--c-ink);
  --ink-soft: var(--c-ink-soft);
  --ink-mute: var(--c-ink-mute);
  --line: var(--c-line);
  --line-strong: var(--c-line-strong);
  --accent-ink: var(--amber-ink);   /* amber as text, on this surface */
  --on-ink: var(--c-paper);         /* text on an ink-filled button */

  /* Names the earlier stylesheets use, kept pointing at the system */
  --paper: var(--c-paper);
  --paper-deep: var(--c-panel);
  --paper-edge: var(--c-line);
  --white: var(--c-white);

  /* ---------- Type ---------- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* A fluid scale, phone to desktop. Headlines are serif and light; everything below a heading is the grotesk. */
  --text-hero: clamp(3rem, 1.25rem + 5.9vw, 6.75rem);         /* 48px → 108px: a page's one headline */
  --text-title: clamp(2.25rem, 1.45rem + 3vw, 4.5rem);         /* 36px → 72px: a section's headline */
  --text-heading: clamp(1.75rem, 1.3rem + 1.6vw, 2.875rem);    /* 28px → 46px: a product's name, a closing line */
  --text-subheading: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); /* 19px → 22px: a row's or a card's title */
  --text-lead: clamp(1.125rem, 1.03rem + 0.42vw, 1.4375rem);   /* 18px → 23px: the paragraph under a headline */
  --text-body: 1.0625rem;      /* 17px */
  --text-small: 0.9375rem;     /* 15px */
  --text-ui: 0.875rem;         /* 14px: inside product screens */
  --text-caption: 0.8125rem;   /* 13px */
  --text-label: 0.75rem;       /* 12px: mono metadata, in capitals */
  --leading-hero: 0.98;
  --leading-title: 1.02;
  --leading-heading: 1.08;
  --leading-text: 1.6;
  --tracking-hero: -0.028em;
  --tracking-title: -0.022em;
  --tracking-heading: -0.014em;
  --tracking-label: 0.08em;

  /* ---------- Space: a 4px grid, and the page's rhythm ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --content: 80rem;                              /* 1280px: the widest a page's content runs, between the rails */
  --gutter: clamp(20px, 4.4vw, 64px);            /* the page's side margin */
  --col-gap: clamp(20px, 2.4vw, 32px);           /* between the columns of a 12-column grid */
  --section: clamp(96px, 3rem + 8vw, 184px);     /* the space above and below a section */
  --header-h: 64px;
  /* Where the rails stand: the content's edges, measured from the edge of a full-width box */
  --rail: max(var(--gutter), calc((100% - var(--content)) / 2));

  /* ---------- Shape and depth ---------- */
  /* Small, consistent radii; buttons alone are round. Only product screens and menus cast a shadow. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-round: 999px;
  --shadow-window:
    0 0 0 1px rgba(26, 23, 19, 0.08), 0 1px 2px rgba(26, 23, 19, 0.05),
    0 14px 32px -10px rgba(26, 23, 19, 0.16), 0 36px 80px -32px rgba(26, 23, 19, 0.26);
  --shadow-pop:
    0 0 0 1px rgba(26, 23, 19, 0.07), 0 2px 4px rgba(26, 23, 19, 0.04), 0 18px 44px -14px rgba(26, 23, 19, 0.22);
  --shadow-ring: 0 0 0 1px rgba(26, 23, 19, 0.08);
  /* Earlier names */
  --shadow-card: var(--shadow-window);
  --shadow-float: var(--shadow-window);

  /* ---------- Motion ---------- */
  /* One long, soft settle for arrivals; a firm in-out for things that open and close; exits are quicker and ease in */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --dur-fast: 0.18s;           /* hovers */
  --dur-ui: 0.34s;             /* menus, popups */
  --dur-reveal: 0.9s;          /* a block arriving */
  --dur-split: 1.15s;          /* a headline's lines rising */
  --dur-media: 1.3s;           /* a photograph or screen arriving */
  --dur-line: 1.4s;            /* a hairline drawing across */
  --stagger: 80ms;             /* between items of a group */
  --stagger-line: 95ms;        /* between a headline's lines */
  --reveal-rise: 18px;
  /* Earlier names */
  --ease: var(--ease-out);
  --fast: var(--dur-fast);
  --slow: 0.6s;
}

/* ---------- Surfaces ---------- */
/* Night: the roles re-pointed for a dark band, so whatever sits in it (type, lines, buttons, labels) reads right */
.surface-night,
.section--night {
  --surface: var(--c-night);
  --surface-raised: var(--c-night-raised);
  --ink: var(--c-night-text);
  --ink-soft: var(--c-night-soft);
  --ink-mute: var(--c-night-mute);
  --line: var(--c-night-line);
  --line-strong: var(--c-night-line-strong);
  --accent-ink: var(--amber);
  --on-ink: var(--c-night);
  color-scheme: dark;
}

/* A product screen is always a light screen, wherever it sits */
.surface-light {
  --surface: var(--c-white);
  --surface-raised: var(--c-paper);
  --ink: var(--c-ink);
  --ink-soft: var(--c-ink-soft);
  --ink-mute: var(--c-ink-mute);
  --line: var(--c-line);
  --line-strong: var(--c-line-strong);
  --accent-ink: var(--amber-ink);
  --on-ink: var(--c-paper);
  color-scheme: light;
}