/*
  Combined v2 · design tokens · the single source the app and the marketing site link
  ------------------------------------------------------------------------------------------
  The idea in one line: people are ink, the AI is jamun. Everything else is a calm, exact
  instrument (hairlines, tabular figures, one sunk panel per screen) around the buyer's own words.

  Colour roles (one meaning each):
    ink    people, actions and structure. The one big key on a screen is ink.
    jamun  the AI and nothing else: Kavitha's words, her AI tag, her voice in a recording,
           the lamp when real calls are on. Text, rings and marks only: never a filled block,
           never a button fill, never a status, never a wash (the AI's own key is an outline).
    field  the brand surface (sign-in, marketing). On it, white carries people, structure and
           actions; --color-on-ai-field-2 (rose) is the AI's words, its tag and the lamp, nothing else.
    state  success / warn / danger: always an icon and a word, never a block beside jamun.
  Canonical values are OKLCH; hex in comments is sRGB from tools/colour.py
  (uv run --no-sync python -B -I docs/brand/directions/combined/tools/colour.py).

  Fonts (SIL OFL 1.1, Google Fonts; pages link them, see README):
    Anek Latin + Anek Tamil + Anek Devanagari, one design by Ek Type for every script.
    Planned next scripts, same family: Anek Telugu, Anek Kannada, Anek Malayalam, Anek Bangla
    (all served by Google Fonts today; add the family to the link and to --font-sans).
  Theme: light is the default (sunlight). Dark is a chosen second palette, never an inversion.
*/

:root {
  color-scheme: light;

  /* The brand name (Lampcall, chosen 2026-11-13). One string; the marketing site may use it with content: var(--brand-name). */
  --brand-name: "Lampcall";

  /* ---------------------------------------------------------------- type */
  --font-sans: "Anek Latin", "Anek Tamil", "Anek Devanagari", "Anek Telugu", "Anek Kannada",
    "Anek Malayalam", "Anek Bangla", "Nirmala UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Tamil UI and any Tanglish content: Anek Tamil first, so Latin words in a Tamil line come from
     the same design (Anek Tamil carries Latin glyphs). One rhythm on "lakhs-ல இருந்து". */
  --font-ta: "Anek Tamil", "Anek Latin", "Nirmala UI", system-ui, sans-serif;
  --font-hi: "Anek Devanagari", "Anek Latin", "Nirmala UI", system-ui, sans-serif;

  /* fixed rem scale for the product (ratio about 1.15 to 1.25); never smaller than 14 px */
  --text-caption: 0.875rem;   /* 14  timestamps, meta, axis labels */
  --text-label: 0.9375rem;    /* 15  labels, chips, honesty lines, AI tag */
  --text-body: 1.0625rem;     /* 17  body, rows, inputs (Anek sets small: 17 reads like 16 elsewhere) */
  --text-lead: 1.1875rem;     /* 19  the briefing sentence; Tamil transcript lines */
  --text-title: 1.3125rem;    /* 21  section titles */
  --text-h2: 1.5rem;          /* 24  panel titles, phone page titles */
  --text-h1: 1.875rem;        /* 30  page title */
  --text-quote: 2rem;         /* 32  the buyer's words in a feed row (display voice) */
  --text-quote-l: 2.625rem;   /* 42  the buyer's words on Next up and the lead header */
  --text-display: 3.5rem;     /* 56  sign-in brand moment only */
  --text-readout: 2rem;       /* 32  timecode readout */

  --weight-text: 400;
  --weight-label: 500;
  --weight-strong: 560;
  --weight-head: 600;
  --width-text: 100%;         /* font-stretch: UI text */
  --width-display: 84%;       /* the semi-condensed voice: quotes, outcome titles, readouts, the wordmark */

  --leading-tight: 1.15;      /* Latin display */
  --leading-head: 1.25;
  --leading-body: 1.55;
  --leading-indic: 1.7;       /* Tamil and every Indian script, body and transcript */
  --leading-indic-tight: 1.4; /* Indian-script headings, keys and chips: never below 1.35 */
  --measure: 65ch;
  --measure-ta: 52ch;

  /* ---------------------------------------------------------------- space (4 pt) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --gutter-phone: 1rem;      /* 16 px side gutter on phones */
  --gutter-desk: 2.5rem;     /* 40 */
  --content-max: 78rem;      /* 1248 */

  /* ---------------------------------------------------------------- shape */
  --radius-tag: 4px;     /* AI tag, chips (tags, not pills) */
  --radius-control: 10px;/* keys, inputs, segmented controls */
  --radius-panel: 14px;  /* the one sunk panel, sheets */
  --radius-device: 40px; /* phone frame in review pages only */
  --radius-round: 999px; /* monograms, play keys, the lamp */
  --hairline: 1px;

  /* ---------------------------------------------------------------- targets */
  --hit: 44px;           /* fine pointer minimum */
  --hit-touch: 48px;     /* touch minimum */
  --hit-safety: 48px;    /* Pause all calls, Resume calls, Never call: 48 everywhere */
  --hit-big: 56px;       /* the one big next-step key on a phone */

  /* ---------------------------------------------------------------- motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);     /* ease-out-quart */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);    /* ease-out-expo */
  --duration-press: 90ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --duration-lamp: 2400ms;                       /* the lamp breathes only in Live */

  /* ---------------------------------------------------------------- z */
  --z-sticky: 10;
  --z-bar: 20;
  --z-pop: 30;
  --z-scrim: 40;
  --z-sheet: 50;
  --z-toast: 60;
  --z-review: 70;   /* review controls of these mockups, not product */

  /* ================================================================ LIGHT (default) */
  --color-page:        oklch(0.988 0.002 358);  /* #FCFAFB */
  --color-surface:     oklch(1 0 0);            /* #FFFFFF  inputs, sheets, raised */
  --color-sunk:        oklch(0.962 0.004 358);  /* #F5F1F2  the one sunk panel; status line */
  --color-hover:       oklch(0.945 0.005 358);  /* #F0EBED */
  --color-line:        oklch(0.905 0.005 358);  /* #E3DEDF  hairline, decorative */
  --color-line-strong: oklch(0.840 0.007 358);  /* #CFC9CA  hatch, stronger rule */
  --color-control:     oklch(0.580 0.010 358);  /* #80787A  control outline, 4.1:1 */
  --color-ink:         oklch(0.205 0.012 358);  /* #1C1517  text, the ink key */
  --color-ink-2:       oklch(0.400 0.012 358);  /* #4D4548  secondary text */
  --color-ink-3:       oklch(0.475 0.012 358);  /* #625A5C  meta, 6.4:1 */
  --color-on-ink:      oklch(0.988 0.002 358);  /* #FCFAFB */

  --color-ai:          oklch(0.410 0.140 358);  /* #811D4A  Kavitha's words, AI tag, her channel */
  --color-ai-rest:     oklch(0.620 0.090 358);  /* #B26F86  her channel, not played yet (3.7:1 graphic) */
  --color-on-ai:       oklch(0.985 0.006 358);  /* #FEF8FA  text on a jamun mark (kept for the site; no filled AI key in the app) */
  --color-ai-field:    oklch(0.290 0.105 358);  /* #500A2B  the brand field (sign-in, marketing) */
  --color-on-ai-field: oklch(0.985 0.006 358);  /* #FEF8FA  14.1:1 */
  --color-on-ai-field-2: oklch(0.800 0.035 358);/* #D2B5BD  the AI only, on the field: its words, tag, lamp. 7.8:1; 11.6 from the rejected wash */
  --color-lamp:        oklch(0.410 0.140 358);  /* lamp lit = real calls on */
  --color-lamp-off:    oklch(0.640 0.008 358);  /* #918A8C  lamp grey = paused (3.3:1) */
  --color-person:      oklch(0.600 0.010 358);  /* #867E80  buyer channel, not played (3.8:1) */
  --color-person-played: oklch(0.400 0.012 358);

  --color-success:     oklch(0.490 0.115 155);  /* #117342 */
  --color-warn:        oklch(0.520 0.110 62);   /* #955816  text + icon only, never beside a jamun fill */
  --color-danger:      oklch(0.520 0.185 22);   /* #BC2534 */
  --color-on-danger:   oklch(0.990 0 0);
  --color-paused:      oklch(0.205 0.012 358);  /* the Paused bar is ink */
  --color-on-paused:   oklch(0.985 0.003 358);
  --color-focus:       oklch(0.205 0.012 358);
  --color-scrim:       oklch(0.18 0.01 358 / 0.42);
  --color-hatch:       oklch(0.840 0.007 358);

  --shadow-float: 0 1px 0 oklch(0.2 0.01 358 / 0.04), 0 16px 40px -12px oklch(0.2 0.02 358 / 0.22);
  --ring-float: 0 0 0 1px var(--color-line);
}

/* ================================================================ DARK (chosen, not inverted) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-page:        oklch(0.180 0.008 358);  /* #151012 */
    --color-surface:     oklch(0.225 0.010 358);  /* #201A1C */
    --color-sunk:        oklch(0.152 0.007 358);  /* #0E0A0C */
    --color-hover:       oklch(0.245 0.011 358);
    --color-line:        oklch(0.300 0.012 358);
    --color-line-strong: oklch(0.380 0.014 358);
    --color-control:     oklch(0.600 0.014 358);
    --color-ink:         oklch(0.950 0.005 358);  /* #F1EDEE */
    --color-ink-2:       oklch(0.810 0.008 358);
    --color-ink-3:       oklch(0.720 0.010 358);  /* 7.5:1 */
    --color-on-ink:      oklch(0.180 0.008 358);
    --color-ai:          oklch(0.790 0.060 358);  /* #DCABBA  dusty rose: text, rings and marks, never a fill */
    --color-ai-rest:     oklch(0.560 0.070 358);
    --color-on-ai:       oklch(0.255 0.090 358);
    --color-ai-field:    oklch(0.255 0.090 358);  /* #420823 */
    --color-on-ai-field: oklch(0.975 0.006 358);
    --color-on-ai-field-2: oklch(0.800 0.035 358);
    --color-lamp:        oklch(0.660 0.100 358);  /* #C47892 */
    --color-lamp-off:    oklch(0.520 0.010 358);
    --color-person:      oklch(0.520 0.012 358);
    --color-person-played: oklch(0.810 0.008 358);
    --color-success:     oklch(0.800 0.120 155);
    --color-warn:        oklch(0.820 0.110 75);
    --color-danger:      oklch(0.760 0.130 22);
    --color-on-danger:   oklch(0.180 0.008 358);
    --color-paused:      oklch(0.900 0.006 358);  /* in dark the Paused bar inverts to light ink */
    --color-on-paused:   oklch(0.180 0.008 358);
    --color-focus:       oklch(0.950 0.005 358);
    --color-scrim:       oklch(0.05 0.005 358 / 0.62);
    --color-hatch:       oklch(0.380 0.014 358);
    --shadow-float: 0 0 0 1px oklch(0.34 0.014 358), 0 20px 48px -12px oklch(0 0 0 / 0.6);
    --ring-float: 0 0 0 1px var(--color-line-strong);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page:        oklch(0.180 0.008 358);
  --color-surface:     oklch(0.225 0.010 358);
  --color-sunk:        oklch(0.152 0.007 358);
  --color-hover:       oklch(0.245 0.011 358);
  --color-line:        oklch(0.300 0.012 358);
  --color-line-strong: oklch(0.380 0.014 358);
  --color-control:     oklch(0.600 0.014 358);
  --color-ink:         oklch(0.950 0.005 358);
  --color-ink-2:       oklch(0.810 0.008 358);
  --color-ink-3:       oklch(0.720 0.010 358);
  --color-on-ink:      oklch(0.180 0.008 358);
  --color-ai:          oklch(0.790 0.060 358);
  --color-ai-rest:     oklch(0.560 0.070 358);
  --color-on-ai:       oklch(0.255 0.090 358);
  --color-ai-field:    oklch(0.255 0.090 358);
  --color-on-ai-field: oklch(0.975 0.006 358);
  --color-on-ai-field-2: oklch(0.800 0.035 358);
  --color-lamp:        oklch(0.660 0.100 358);
  --color-lamp-off:    oklch(0.520 0.010 358);
  --color-person:      oklch(0.520 0.012 358);
  --color-person-played: oklch(0.810 0.008 358);
  --color-success:     oklch(0.800 0.120 155);
  --color-warn:        oklch(0.820 0.110 75);
  --color-danger:      oklch(0.760 0.130 22);
  --color-on-danger:   oklch(0.180 0.008 358);
  --color-paused:      oklch(0.900 0.006 358);
  --color-on-paused:   oklch(0.180 0.008 358);
  --color-focus:       oklch(0.950 0.005 358);
  --color-scrim:       oklch(0.05 0.005 358 / 0.62);
  --color-hatch:       oklch(0.380 0.014 358);
  --shadow-float: 0 0 0 1px oklch(0.34 0.014 358), 0 20px 48px -12px oklch(0 0 0 / 0.6);
  --ring-float: 0 0 0 1px var(--color-line-strong);
}

/* ---------------------------------------------------------------- base that every surface shares */
html {
  font-family: var(--font-sans);
  font-size: 100%;
  font-variant-numeric: lining-nums tabular-nums;   /* every number lines up, everywhere */
  font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-text);
}
/* The Script Respect Rule: no tracking, no caps, no italics on Indian scripts, room for vowel signs */
:lang(ta), :lang(hi), :lang(te), :lang(kn), :lang(ml), :lang(bn) {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
}
:lang(ta) { font-family: var(--font-ta); line-height: var(--leading-indic); }
:lang(hi) { font-family: var(--font-hi); line-height: var(--leading-indic); }
:lang(en) { font-family: var(--font-sans); }
::selection { background: var(--color-line-strong); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }