/*
 * DSH-Mizar web — design tokens.
 *
 * Spacing and type density come from the apps (a 4-pt grid; small, tabular,
 * system type). The accent is the site's own cyan-blue, not the app's blue.
 * Every radius is a SwiftUI-style *continuous* corner: `--r` is read by
 * js/squircle.js, which replaces the circular arc CSS would draw.
 */

/* Registered so `calc()` resolves to a number squircle.js can read, which is
   what makes concentric radii (outer − inset) work. Not inherited: each
   surface states its own radius. */
@property --r {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  color-scheme: dark;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing — the apps' 4-pt grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  /* Continuous-corner radii (pt == px). Unitless: they feed `--r`. */
  --r-xs: 8;      /* chips, code */
  --r-sm: 12;     /* inline cards — the apps' default card */
  --r-md: 14;     /* message bubbles */
  --r-field: 19;  /* the composer field */
  --r-lg: 26;     /* feature cards */
  --r-xl: 36;     /* section panels */
  --r-device: 55; /* an iPhone's screen corner */

  /* Springs. js/core.js replaces these with exact `linear()` springs where
     supported; these cubic approximations are the fallback. */
  --ease-snappy: cubic-bezier(.2, .9, .25, 1);   --dur-snappy: 360ms;
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);   --dur-smooth: 700ms;
  --ease-bouncy: cubic-bezier(.34, 1.45, .64, 1); --dur-bouncy: 620ms;
  --ease-gentle: cubic-bezier(.25, 1, .4, 1);    --dur-gentle: 1000ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);

  /* Dark (default) */
  --bg: #060A13;
  --bg-elev: #0A111E;
  --navy: #131F3D;                 /* the Live Activity card, from the app */
  --surface: #0D1524;
  --surface-2: #121C2F;
  --surface-3: #192540;
  --fill: rgba(140, 175, 230, .07);
  --fill-2: rgba(140, 175, 230, .13);
  --fill-3: rgba(140, 175, 230, .2);
  --line: rgba(150, 185, 235, .12);
  --line-strong: rgba(150, 185, 235, .22);
  --text: #EAF0F8;
  --text-2: #A5B1C4;
  --text-3: #6C798D;

  --accent: #3CCBF4;               /* 10.3:1 on --bg */
  --accent-2: #2E7BFF;
  --accent-ink: #3CCBF4;           /* accent as text */
  --on-accent: #03141F;            /* ink on accent fills, both themes */
  --accent-fill: rgba(60, 203, 244, .12);
  --accent-line: rgba(60, 203, 244, .35);
  --accent-glow: rgba(60, 203, 244, .38);

  --warn: #FF9F0A;  --warn-ink: #FFB340;  --warn-fill: rgba(255, 159, 10, .11);  --warn-line: rgba(255, 159, 10, .34);
  --ok: #30D158;    --ok-ink: #4CE07A;    --ok-fill: rgba(48, 209, 88, .12);
  --fail: #FF453A;  --fail-ink: #FF6B61;  --fail-fill: rgba(255, 69, 58, .11);   --fail-line: rgba(255, 69, 58, .32);

  /* A selection you can read: a solid mid-tone, not a translucent accent
     (the reasoning in the Android app's Theme.kt). */
  --sel: #1D4D66;

  --glass: rgba(18, 28, 47, .62);
  --glass-hi: rgba(255, 255, 255, .5);
  --glass-lo: rgba(255, 255, 255, .05);
  --shadow: 0 30px 80px -24px rgba(0, 0, 0, .7), 0 8px 24px -12px rgba(0, 0, 0, .5);

  /* Phone screens */
  --ph-bg: #05070C;
  --ph-surface: #161B24;
  --ph-surface-2: #1F2632;
  --ph-text: #F2F5FA;
  --ph-text-2: #8E99AB;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FA;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F5F9;
  --surface-3: #E8EDF4;
  --fill: rgba(20, 45, 90, .045);
  --fill-2: rgba(20, 45, 90, .085);
  --fill-3: rgba(20, 45, 90, .13);
  --line: rgba(20, 45, 90, .1);
  --line-strong: rgba(20, 45, 90, .17);
  --text: #0B1322;
  --text-2: #4A5669;
  --text-3: #7F8A9A;

  --accent: #22BDEB;
  --accent-2: #2E6BFF;
  --accent-ink: #0A78AE;           /* 4.9:1 on white */
  --accent-fill: rgba(34, 189, 235, .12);
  --accent-line: rgba(10, 120, 174, .3);
  --accent-glow: rgba(34, 189, 235, .4);

  --warn: #FF9500;  --warn-ink: #B25E00;  --warn-fill: rgba(255, 149, 0, .1);   --warn-line: rgba(220, 120, 0, .32);
  --ok: #34C759;    --ok-ink: #1E8A3C;    --ok-fill: rgba(52, 199, 89, .12);
  --fail: #FF3B30;  --fail-ink: #C4261C;  --fail-fill: rgba(255, 59, 48, .08);  --fail-line: rgba(255, 59, 48, .3);

  --sel: #BFE9F8;

  --glass: rgba(255, 255, 255, .66);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-lo: rgba(20, 45, 90, .06);
  --shadow: 0 30px 70px -28px rgba(20, 40, 80, .32), 0 8px 22px -12px rgba(20, 40, 80, .18);

  --ph-bg: #F2F4F8;
  --ph-surface: #FFFFFF;
  --ph-surface-2: #E9EDF2;
  --ph-text: #0B0F17;
  --ph-text-2: #6B7584;
}