/* Callyou's design tokens: the single vocabulary shared by design and every implementation.
   Each platform maps these names 1:1 to its own theme.

   Themes. Dark is the default: the first block applies to :root and to any element
   marked data-theme="dark". Light is the second block, applied to any element marked
   data-theme="light" (set it on <html> to preview a screen in light). The app's chrome
   follows light, dark, or system, but calls and watches always stay dark: their frame
   carries data-theme="dark", which pins it and everything inside it to the dark values
   whatever the page around it uses.

   Contrast. Every text token stands 7:1 or more (WCAG AAA) on the page, on a surface, and
   on a neutral button, in both themes. Coral as a fill carries a glyph and never a word,
   because no word reaches 7:1 on it; a destructive action in words is --danger-text.
   --faint is never text.

   Sun. Sun is a fill: it marks the main action of a screen, such as Call, Accept, or Send
   request, and what is switched on or chosen. On a light page Sun cannot be text, so
   --accent-text is the text color there.

   Dark. The page is a warm black. Every grey on it carries almost no color of its own.

   Never hardcode a color, space, radius, size, or type value in a screen: reference these. */

:root, [data-theme="dark"] {
  /* ---- Color: warm black, clean greys, Sun, and coral ---- */
  --bg:            #110F0B; /* window / screen background */
  --titlebar:      #151412; /* window title bars */
  --surface:       #1B1A18; /* cards, sheets, popovers, notifications, banners */
  --surface-inset: #0B0A09; /* fields and wells */
  --secondary-btn: #232220; /* neutral buttons, badges, a switch that is off */
  --line:          #252422; /* card and panel borders, lines between rows */
  --line-2:        #31302E; /* control borders, a neutral button while it is held */

  --text:          #F2F0ED; /* names and body text */
  --muted:         #B0AFAC; /* secondary text and labels */
  --faint:         #595755; /* non-text marks only: chevrons, dashed outlines, grips */

  --accent:        #FFC83D; /* Sun, as a fill: the main action, and what is on or chosen */
  --accent-pressed:#EBB52C; /* Sun while it is held */
  --on-accent:     #1A1200; /* text / glyph on a Sun fill */
  --accent-text:   #FFC83D; /* Sun as text or a thin glyph; the text color in light */
  --focus:         #FFC83D; /* the ring around the control that has keyboard focus */

  --danger:        #E5675C; /* coral, as a fill: decline, hang up, the error dot */
  --on-danger-glyph:#FFFFFF;/* a glyph on a coral fill: 3:1, enough for graphics, never text */
  --danger-text:   #FF8C80; /* coral as text or a thin glyph; deepens in light for contrast */
  --danger-tint:   #2E1C18; /* opaque coral wash behind coral content */
  --danger-outline:rgba(229,103,92,0.40); /* coral borders */

  /* QR is ALWAYS dark-on-light, even in the dark UI */
  --qr-module:     #16130C;
  --qr-bg:         #FFFFFF;

  /* System call buttons use the OS palette, not ours (OS-rendered). */
  --system-accept: #34C759;
  --system-decline:#EB4D3D;

  /* Overlays and screen-specific fills */
  --scrim:         rgba(8,7,5,0.55); /* dims what sits behind a sheet or menu */
  --fill-incall:   #0B0A09;          /* behind a call, and behind live video */

  /* Preview chrome: drawn by the OS or the device, not part of the app */
  --desk:          #E9E8E4; /* backdrop for standalone viewing */
  --traffic-close: #FF5F57; /* macOS window buttons */
  --traffic-minimize:#FEBC2E;
  --traffic-zoom:  #28C840;
  --watch-case:    #050506;
  --watch-bezel:   #232529;

  /* ---- Minoes: a device's mino takes one of twelve hues, 30 degrees apart in OKLCH
     from 15. In the dark theme a haze of its hue lies behind a large mino, at the
     strength below; a light page shows no haze. On a card a mino stands on the
     card's floor, which shows its shadow in black at the strength below.
     README.md says how a key picks. ---- */
  --mino-haze-0: #C3656F;  --mino-haze-1: #C16D45;  --mino-haze-2: #B07A20;  --mino-haze-3: #918A21;  --mino-haze-4: #669649;  --mino-haze-5: #249C74;
  --mino-haze-6: #009A9A;  --mino-haze-7: #0094BB;  --mino-haze-8: #5188CD;  --mino-haze-9: #7F7BCB;  --mino-haze-10: #A16FB8;  --mino-haze-11: #B86797;
  --mino-haze-strength: 0.2;
  --mino-shadow:        0.6;

  /* ---- Typography (bundled in assets/fonts; identical on every platform) ---- */
  --font-ui:   'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* names, text, buttons */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* caps labels, timers, values */

  /* Each style is weight, size / line height, and face. No text is smaller than --type-label. */
  --type-display: 700 46px/48px var(--font-ui); /* the caller's name */
  --type-title:   700 33px/36px var(--font-ui); /* a device's name on its own screen, a headline */
  --type-name:    600 19px/22px var(--font-ui); /* a name beside or over a mino */
  --type-body:    500 16px/22px var(--font-ui); /* rows and fields */
  --type-button:  600 16px/20px var(--font-ui); /* a word on a button, a row's name */
  --type-small:   400 14px/20px var(--font-ui); /* explanations */
  --type-label:   500 12px/14px var(--font-mono); /* kinds and captions, in capitals */
  --type-value:   500 13px/16px var(--font-mono); /* timers, counts, values */
  --track-tight:  -0.02em; /* display and title */
  --track-name:   -0.01em; /* name */
  --track-caps:   0.08em;  /* labels in capitals */

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-row: 20px; /* list inset: rows, section headers */
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ---- Radius ---- */
  --radius-pill:  999px; /* buttons with a word, badges, chips */
  --radius-field: 16px;  /* fields, menus, messages, small panels */
  --radius-panel: 22px;  /* cards, banners, notifications, popovers */
  --radius-sheet: 30px;  /* the top corners of a sheet */
  --radius-phone: 36px;
  --radius-tablet: 26px;
  --radius-win:   12px;
  --radius-os:    8px; /* OS-drawn menus and toasts */
  --radius-os-sm: 4px; /* items and buttons inside them */
  --radius-watch-outer: 50px;
  --radius-watch-inner: 41px;

  /* ---- Size ---- */
  --size-target:   48px; /* the smallest area that takes a tap */
  --size-btn:      52px; /* the height of a button with a word */
  --size-btn-sm:   40px; /* a small button in a row */
  --size-icon-btn: 48px; /* a round button with a glyph */
  --size-cbtn:     64px; /* a call button */
  --size-cbtn-lg:  76px; /* Accept, Decline, and Hang up */
  --size-card:     214px; /* the height of a device's card on Home */
  --size-mino:     136px; /* a mino that a screen is about: a profile, a request */
  --size-mino-card:124px; /* a mino standing on its device's card on Home */
  --size-mino-hero:178px; /* a mino on its device's screen */
  --size-mino-call:248px; /* a mino during a call */
  --size-ring:     340px; /* the first pulse ring around a mino during a call */
  --size-mino-md:  88px;  /* a mino in a sheet, or beside what it is checked against */
  --size-mino-sm:  44px;  /* a mino in a header, a banner, or a row */
  --size-mino-xs:  30px;  /* a mino in a pill */
  --size-mino-watch:64px; /* the mino of a call on a watch, inside a first ring of --size-mino-md */

  /* ---- Shadow ---- */
  --shadow-win:    0 44px 96px -36px rgba(8,10,12,0.78);
  --shadow-card:   0 30px 64px -20px rgba(8,10,12,0.8);
  --shadow-phone:  0 30px 70px -28px rgba(8,10,12,0.7);
  --shadow-watch:  0 30px 60px -26px rgba(8,10,12,0.8);

  /* ---- Motion: how long a change lasts, and the curve it follows. A spec names these, never
     a number of its own; platform.md, Motion, says which change takes which. ---- */
  --motion-quick:  150ms; /* the app shows, hides, or changes a small part in place */
  --motion-fade:   220ms; /* the app fades a whole layer: the launch screen, or any change under reduce motion */
  --motion-enter:  250ms; /* the app brings in a message, a banner, or a sheet from an edge */
  --motion-reveal: 350ms; /* the app changes parts of one screen: it fades in a picture, or moves cards to new places */
  --motion-screen: 400ms; /* the app changes screens and moves a mino from one to the other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* for what the app moves or changes on a screen, a travelling mino too */
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);   /* for what the app brings in: fast at first, then settling */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);   /* for what the app takes away: slow at first, then faster */

  /* ---- Fixed canvas sizes (CSS px) ---- */
  --w-phone: 390px;  --h-phone: 844px;
  --w-desktop: 1280px; --h-desktop: 800px;
  --w-watch: 198px;  --h-watch: 242px;
  --w-watch-round: 247px; /* a large round Wear OS watch: a 227 pt face in its case */
  --w-tablet: 1180px; --h-tablet: 820px;
}

/* ---- Light: warm white. Only the palette shifts; type, spacing, radius, size, shadow,
   and canvas sizes are shared with the block above. The call and watch surfaces have no
   light values, because their frames pin themselves to dark. ---- */
[data-theme="light"] {
  --bg:            #FFFDF8;
  --titlebar:      #F7F3E9;
  --surface:       #FFFFFF;
  --surface-inset: #F5F1E7;
  --secondary-btn: #F5F1E7;
  --line:          #ECE6D8;
  --line-2:        #DDD5C2;

  --text:          #16130C;
  --muted:         #565143;
  --faint:         #B3AC9A;

  --accent-text:   #16130C; /* Sun cannot be text on a light page */
  --focus:         #16130C;

  --danger-text:   #9A231F; /* deeper coral so coral text keeps its contrast on light */
  --danger-tint:   #FDF1EE;
  --danger-outline:#EFBDB6;

  --scrim:         rgba(22,19,12,0.32);

  --mino-haze-strength: 0;
  --mino-shadow:        0.2;
}

/* Added for the website: the light values for a browser that prefers light. */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
  --bg:            #FFFDF8;
  --titlebar:      #F7F3E9;
  --surface:       #FFFFFF;
  --surface-inset: #F5F1E7;
  --secondary-btn: #F5F1E7;
  --line:          #ECE6D8;
  --line-2:        #DDD5C2;

  --text:          #16130C;
  --muted:         #565143;
  --faint:         #B3AC9A;

  --accent-text:   #16130C; /* Sun cannot be text on a light page */
  --focus:         #16130C;

  --danger-text:   #9A231F; /* deeper coral so coral text keeps its contrast on light */
  --danger-tint:   #FDF1EE;
  --danger-outline:#EFBDB6;

  --scrim:         rgba(22,19,12,0.32);

  --mino-haze-strength: 0;
  --mino-shadow:        0.2;
}
}