/* tokens.css  (design kit v2, one palette for the landing, the app and the legal pages)
   One :root block. No @import, no url(), no web fonts. Light only. Valid under style-src 'self'.
   Names that proto A already used keep their meaning: --navy --navy2 --ink --muted --sky --sky-l --sky-d --blue
   --yellow --y1 --y2 --y3 --y4 --orange --orange2 --red --skin --paper --white --font --e-out --e-pop.
   Breakpoints cannot be variables. They are literal: phone up to 767px, PC from 768px, wide from 960px.
   Hue families in the UI: navy (ink), warm (yellow, with orange as its deepest step), sky. Red is the one signal colour.
   Pink, skin, hair and wall colours are for drawings only, never for UI chrome and never for text. */
:root {
  color-scheme: light;

  /* ---- ink: navy family (text, outlines, key shapes) ---- */
  --navy: #1d2f6f;        /* text, outlines, solid shapes */
  --navy2: #15235a;       /* deep navy: pressed states, shading and black hair inside drawings */
  --ink: var(--navy);     /* alias: body text */
  --muted: #4a5880;       /* secondary text and inactive icons; 5.7:1 or more on every surface it is used on */
  --line: #d3d8e4;        /* hairline between rows; decoration only, never the only mark of a control */
  --focus: var(--navy);

  /* ---- sky family (info, quiet panels, scene walls) ---- */
  --sky: #a8d8f0;
  --sky-l: #ddf0fa;       /* quiet panel, open FAQ bar, selected row */
  --sky-d: #3c9be0;       /* drawings only; 2.8:1 on paper, never a UI line */
  --blue: #3d6fc4;        /* drawings only */

  /* ---- warm family (key colour; orange is its deepest step and lives in drawings) ---- */
  --yellow: #ffd449;      /* main button, marker, key shapes */
  --y1: #f2be45;
  --y2: #f7d681;
  --y3: #fbe7b5;
  --y4: #fff6e2;          /* pale field, note panel */
  --y-hover: #ffdd6e;     /* main button on hover (PC) */
  --orange: #ee8a2e;      /* bursts and arcs in drawings; 2.5:1 on white, never text */
  --orange2: #d9731c;

  /* ---- ground and surfaces ---- */
  --paper: #f6f6f3;       /* the page: flat, no grain */
  --white: #ffffff;       /* cards, fields, picture frames */
  --off: #e6e8ee;         /* disabled fill */
  --off-line: #aeb6cc;    /* disabled outline */
  --scrim: rgb(21 35 90 / .4);

  /* ---- signal: red, and one meaning per shape (never colour alone) ---- */
  --red: #b3261e;         /* problem: error icon, error text, unread dot. 6.0:1 on paper */
  --red-l: #fdecea;
  --warn: #8a5600;        /* warning icon and outline. 5.7:1 on --y4 */
  --warn-l: var(--y4);
  --good: var(--navy);    /* good = check mark in a navy circle on --sky-l */
  --good-l: var(--sky-l);
  --bad: var(--red);
  --bad-l: var(--red-l);

  /* ---- drawings only: pink (small), skin, hair, scene ---- */
  --pink: #ff9bb0;        /* cheek, lip. At most 2% of a picture */
  --pink-d: #e8607f;      /* one hair accessory or one badge per picture */
  --pink-l: #ffdce4;
  --skin: var(--skin2);   /* default skin */
  --skin1: #fad6bf;  --skin1s: #eebb9f;
  --skin2: #f2b48f;  --skin2s: #e29b74;
  --skin3: #d49668;  --skin3s: #bd7c50;
  --skin4: #96603f;  --skin4s: #7d4a2e;
  --hair-k: var(--navy2); /* black hair is navy */
  --hair-b: #6b4029;
  --hair-c: #d98a3d;
  --hair-a: #8fa7c9;
  --wall: #d3eaf6;
  --floor: #edf3f7;
  --glass: #e9f6fc;

  /* ---- type: Netflix's stack without Netflix Sans; Japanese glyphs come from the device (lang="ja") ---- */
  --font: "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif;
  --w-regular: 400;
  --w-bold: 700;
  /* sizes: phone first, fluid to the PC size at 960px */
  --fs-micro: 12px;                               /* count and NEW badges only */
  --fs-label: 14px;                               /* labels, captions, tab names, legends */
  --fs-body: 16px;                                /* body, buttons, fields, errors */
  --fs-cond: clamp(16px, .35vw + 14.6px, 18px);   /* every condition, price line, free-edit line: 16 phone, 18 PC */
  --fs-lead: clamp(17px, .35vw + 15.6px, 19px);
  --fs-h3: clamp(18px, .35vw + 16.6px, 20px);
  --fs-h2: clamp(20px, .7vw + 17.3px, 24px);      /* app screen and sheet titles */
  --fs-h1: clamp(25px, 2.28vw + 16.1px, 38px);    /* landing section titles */
  --fs-display: clamp(33px, 4.4vw + 15.9px, 58px);/* landing key line */
  --fs-num: clamp(42px, 1.05vw + 37.9px, 48px);   /* step numerals 01 to 04 */
  --fs-price: 40px;
  --lh-tight: 1.25;
  --lh-head: 1.4;
  --lh-ui: 1.5;
  --lh-cond: 1.7;
  --lh-body: 1.8;
  --ls-head: .02em;
  --ls-body: .02em;
  --ls-btn: .06em;

  /* ---- spacing (4 px base) and widths ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 96px;
  --gut: clamp(16px, 3.4vw, 32px);                /* side gutter: 16 px minimum */
  --w-phone: 390px;
  --w-col: 480px;                                  /* app column, forms */
  --w-dialog: 480px;
  --w-read: 640px;                                 /* text measure */
  --w-label: 140px;                                /* TermsRow label column on PC */
  --w-app: 960px;
  --w-page: 1120px;                                /* landing */

  /* ---- sizes of parts ---- */
  --hit: 44px;                                     /* minimum touch target */
  --btn-h: 48px;
  --cta-h: 60px;
  --field-h: 48px;
  --chip-h: 40px;
  --top-h: 64px;
  --top-h-l: 76px;
  --tabbar-h: 64px;
  --tab-h: 56px;
  --ic-s: 16px;
  --ic: 24px;
  --ic-l: 28px;
  --ic-xl: 44px;
  --il-l: 160px;                                   /* illustration slots */
  --il-m: 120px;
  --il-s: 96px;
  --box-s: 28px;                                   /* FreeBar box heights: Home, card screen, plan tab */
  --box-m: 40px;
  --box-l: 48px;
  --dot: 12px;
  --check: 28px;
  --pm: 32px;
  --ring: 96px;
  --thumb-w: 40px;

  /* ---- radii (small set) ---- */
  --r-s: 4px;             /* tags, key swatches */
  --r-m: 8px;             /* chips, fields, picture frames, list rows */
  --r-l: 12px;            /* cards, buttons */
  --r-xl: 20px;           /* sheet, dialog, phone frame */
  --r-pill: 999px;        /* circles only (bell, dot, plus ring), never a rectangular button */

  /* ---- outlines and strokes ---- */
  --ol-1: 1px;            /* hairlines, table rules */
  --ol-2: 2px;            /* chips, tags, fields, icon buttons, list rows */
  --ol-3: 3px;            /* picture frames, cards, buttons, sheets */
  --ic-stroke: 2;         /* icons: stroke width in a 24 x 24 box (SVG units) */
  --ic-stroke-s: 2.5;     /* the same icons drawn at 16 px keep a 1.7 px line */
  --st-main: 3;           /* drawings, in a 360-wide scene: main contour */
  --st-detail: 2;
  --st-hair: 1.5;
  --cta-lift: 5px;        /* the one hard shadow: main button only */
  --cta-press: 2px;
  --press-shift: 3px;
  --shadow-cta: 0 var(--cta-lift) 0 var(--navy);
  --shadow-cta-down: 0 var(--cta-press) 0 var(--navy);
  --focus-w: 3px;
  --focus-off: 3px;
  --ul-off: .22em;        /* link underline: 2 px line, this far below the text */
  --mk-from: 58%;         /* marker: the lower 42% of the line is yellow */
  --mk-pad: .08em;
  --ls-num: -.03em;       /* big numerals 01 to 04 sit a little closer */
  --st-face: 4.5;         /* drawings: face line, 4.5 units on a 100-unit-wide figure (about 6% of the head height) */
  --rg-w: 12;             /* progress ring: 100-unit circle, 12 thick, 6 thick when queued */
  --rg-w-s: 6;
  --rg-dash: 6 9;
  --dash-s: 3 3;
  --bx-plan: 2.4;         /* the plan box is 2.4 times as wide as a free box */
  --pm-bar: .42;          /* plus and minus bar: 42% of the circle */

  /* ---- motion: the app is calm (no overshoot), the landing builds once ---- */
  --t-press: 120ms;
  --t-ui: 200ms;
  --t-sheet: 280ms;
  --t-toast-in: 240ms;
  --t-toast-out: 180ms;
  --t-ring: 600ms;        /* progress ring value change */
  --t-ring-in: 1100ms;    /* landing: rings grow */
  --t-ray: 900ms;
  --t-arc: 1000ms;
  --t-pop: 700ms;
  --t-draw: 420ms;
  --t-rest: 5s;           /* drifting shapes rest after this */
  --t-loop: 8s;           /* landing: one turn of steps 01 to 04 and of the play bar under each picture. The motion fills the whole turn (the last piece ends at about 90%, then a short hold, then start over). The start and width of every piece are written in landing.css as shares (%) of this time */
  --stg-1: 60ms;          /* uneven stagger steps for rings, rays and arcs */
  --stg-2: 140ms;
  --stg-3: 190ms;
  --stg-4: 270ms;
  --stg-5: 350ms;
  --stg-6: 420ms;
  --stg-7: 530ms;
  --step-1: 200ms;        /* landing: step 01 to 04 start; the last motion ends before 5 s */
  --step-2: 1100ms;
  --step-3: 2000ms;
  --step-4: 2900ms;
  --e-out: cubic-bezier(.16, 1, .3, 1);       /* things arriving */
  --e-io: cubic-bezier(.4, 0, .2, 1);         /* app: sheets, toasts, ring */
  --e-in: cubic-bezier(.4, 0, 1, 1);          /* things leaving */
  --e-pop: cubic-bezier(.3, 1.6, .6, 1);      /* landing only: pop-in with overshoot */

  /* ---- layers ---- */
  --z-bg: -1;
  --z-base: 0;
  --z-sticky: 10;         /* tab bar */
  --z-top: 20;            /* header */
  --z-scrim: 30;
  --z-sheet: 40;          /* bottom sheet, dialog */
  --z-toast: 50;
}