/* Jarvis · design tokens
 * Fonts: IBM Plex Sans (200, 300, 400, 500) and IBM Plex Mono (400, 500), Google Fonts or self-hosted.
 * Set data-device="nest" | "ipad" | "iphone" on <html> to pick the type scale for that format.
 */
:root {
  /* ---------- colour: surfaces */
  --c-ground: #121311;          /* app background, runs to the top edge (behind the status bar) */
  --c-ground-rest: #0F100E;     /* rest screen (day) and doorbell pop-over */
  --c-ground-night: #050504;    /* night screen */
  --c-panel: #1B1C19;           /* cards, panels, input fields */
  --c-key: #24251F;             /* buttons, rails, chips */
  --c-key-2: #2A2B27;           /* hairlines, inner borders */
  --c-key-on: #2E2F2A;          /* selected tab, pressed button, own chat bubble */
  --c-off: #3A3B36;             /* "off" indicator, divider lines */
  --c-scrim: rgba(18, 19, 17, .96); /* full-screen Jarvis overlay */

  /* ---------- colour: text */
  --c-text: #EFE8D8;
  --c-text-2: #C9C1B0;
  --c-text-3: #A49D8E;          /* labels, secondary text */
  --c-text-4: #8C877C;          /* placeholders, words not yet spoken, notes */

  /* ---------- colour: meaning (never decorative) */
  --c-on: #F2A541;              /* amber: something is ON / active / charging / volume */
  --c-on-glow: rgba(242, 165, 65, .7);
  --c-on-soft: rgba(242, 165, 65, .32);
  --c-jarvis: #7CF0B0;          /* mint: anything that is Jarvis */
  --c-jarvis-glow: rgba(124, 240, 176, .7);
  --c-jarvis-soft: rgba(124, 240, 176, .14);
  --c-primary: #E9DFC6;         /* cream: the one primary button in a choice */
  --c-on-primary: #121311;
  --c-alert: #E0533A;           /* red: ONLY doorbell ringing and the LIVE badge */
  --c-alert-dark: #C8461C;
  --c-alert-glow: rgba(224, 83, 58, .7);
  --c-night-clock: rgba(242, 165, 65, .34);

  /* ---------- colour: people in the agenda */
  --c-person-mitchel: #8FB3E0;
  --c-person-valerie: #D9A3C4;
  --c-person-samen: #C9C1B0;

  /* ---------- colour: the orb (shader palette, dark → light) */
  --c-orb-0: #22392F;
  --c-orb-1: #2E5444;
  --c-orb-2: #477F60;
  --c-orb-3: #79B596;
  --c-orb-4: #B9D9C7;
  --orb-fallback: radial-gradient(circle at 38% 32%, #79B596 0%, #477F60 45%, #22392F 100%);

  /* ---------- type */
  --font-sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fw-display: 200;            /* big clocks */
  --fw-light: 300;              /* values, Jarvis answers, headings */
  --fw-regular: 400;
  --fw-medium: 500;             /* primary button label */
  --lh-tight: 1.15;
  --lh-normal: 1.35;
  --lh-text: 1.42;              /* chat text */
  --ls-label: 2px;              /* mono labels in CAPITALS */
  --ls-chip: 1px;
  --ls-display: -0.04em;

  /* ---------- space (4 px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --gutter-iphone: 16px;
  --safe-top-iphone: 56px;      /* below the Dynamic Island */
  --safe-bottom-iphone: 21px;   /* home indicator */

  /* ---------- radius */
  --r-chip: 10px;
  --r-button: 12px;
  --r-button-lg: 14px;
  --r-field: 20px;
  --r-card: 22px;
  --r-card-lg: 24px;
  --r-pill: 999px;

  /* ---------- shadow */
  --sh-hairline: inset 0 0 0 1px #2A2B27;
  --sh-raised: inset 0 0 0 1px #3A3B36, 0 8px 24px rgba(0, 0, 0, .4);
  --sh-sheet: inset 0 0 0 1px #24251F, 0 -12px 30px rgba(18, 19, 17, .9);
  --glow-on: 0 0 8px rgba(242, 165, 65, .7);
  --glow-lamp: 0 0 10px rgba(242, 165, 65, .7), 0 0 2px rgba(255, 220, 160, .9);
  --glow-jarvis: 0 0 8px rgba(124, 240, 176, .7);
  --glow-alert: 0 0 8px rgba(224, 83, 58, .7);

  /* ---------- touch */
  --hit-min: 44px;              /* every tap target, all devices */
  --hit-comfort: 56px;          /* Nest Hub and iPad primary buttons */

  /* ---------- motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);   /* things arriving: sheets, orb growing */
  --ease-in: cubic-bezier(.5, 0, .75, 0);    /* things leaving: orb shrinking */
  --ease-std: ease;
  --d-instant: 100ms;           /* dock orb fades out when the big orb takes over */
  --d-fast: 200ms;              /* colour/background changes, toggles, chips */
  --d-pop: 250ms;               /* menus, pop-overs, dialogs */
  --d-sheet: 300ms;             /* sheets on Nest Hub/iPad (iPhone 340–420ms) */
  --d-filter: 300ms;            /* orb dimming (starting/error) */
  --d-overlay: 350ms;           /* Jarvis overlay background in */
  --d-text-in: 400ms;           /* Jarvis texts rise in, 250ms delay */
  --d-close: 450ms;             /* Jarvis overlay out, orb shrinks */
  --d-grow: 600ms;              /* orb grows from dock to centre */
  --d-back: 1100ms;             /* iPhone: wait after an answer before returning to the tab */
  --d-breathe: 6s;              /* rest-screen orb */
}

/* ---------- type scale per device */
:root, [data-device="ipad"] {
  --fs-label: 13px;   --fs-small: 15px;  --fs-body: 17px;  --fs-text: 19px;
  --fs-title: 22px;   --fs-heading: 30px; --fs-value: 34px; --fs-display: 124px;
  --fs-chip: 13px;    --fs-button: 17px;
}
[data-device="nest"] {
  /* seen from across the room: one step larger than the content needs on a tablet */
  --fs-label: 13px;   --fs-small: 15px;  --fs-body: 17px;  --fs-text: 18px;
  --fs-title: 22px;   --fs-heading: 26px; --fs-value: 30px; --fs-display: 98px;
  --fs-chip: 13px;    --fs-button: 17px;
}
[data-device="iphone"] {
  --fs-label: 11px;   --fs-small: 14px;  --fs-body: 16px;  --fs-text: 17px;
  --fs-title: 20px;   --fs-heading: 28px; --fs-value: 34px; --fs-display: 62px;
  --fs-chip: 11px;    --fs-button: 17px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-grow: 0ms; --d-close: 0ms; --d-sheet: 0ms; --d-text-in: 0ms; --d-breathe: 0s;
  }
}