/* Design tokens. Colours, glass and motion come from the Prime Phones site (logo blue #0A5CEB,
   Manrope, rounded cards, frosted glass). Dark mode swaps the colour tokens only. */

@font-face { font-family: Manrope; font-weight: 400; font-style: normal; font-display: swap; src: url(../../assets/fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Manrope; font-weight: 600; font-style: normal; font-display: swap; src: url(../../assets/fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Manrope; font-weight: 700; font-style: normal; font-display: swap; src: url(../../assets/fonts/manrope-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Manrope; font-weight: 800; font-style: normal; font-display: swap; src: url(../../assets/fonts/manrope-latin-800-normal.woff2) format('woff2'); }

/* Light: nothing is set here that the dark block does not also set. */
:root {
  color-scheme: light;
  --font: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --brand: #0a5ceb;
  --chart-line: var(--brand);
  --brand-text: #0a52d2;
  --brand-soft: #e5edff;
  --btn-bg: #0a5ceb;
  --btn-ink: #ffffff;
  --cyan: #0cb2c8;
  --teal: #0cb2c8;

  --bg: #edf1f8;
  --surface: #ffffff;
  --surface-2: #f2f5fb;
  --ink: #0b1220;
  --ink-2: #38445a;
  --ink-3: #566277;
  --line: rgba(11, 18, 32, 0.08);

  --good: #08784f;
  --good-soft: #def4ea;
  --bad: #bd2a1f;
  --bad-soft: #fde9e6;
  --warn: #8f4b00;
  --warn-soft: #fff0d3;

  /* glass: sheets, top bar, small controls */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(20, 30, 50, 0.07);
  --glass-shine: rgba(255, 255, 255, 0.85);
  --blur: saturate(180%) blur(18px);
  --ctl-track: rgba(11, 18, 32, 0.07);
  --ctl-thumb: rgba(255, 255, 255, 0.82);
  --ctl-thumb-on: rgba(255, 255, 255, 0.55);

  /* the floating tab bar is dark Liquid Glass in both themes (or clear glass, see data-bar below).
     --plate-bg is the resting selection; --lens-* the clear lens it becomes while a finger holds it. */
  --nav-bg: rgba(10, 17, 32, 0.76);
  --nav-blur: blur(20px) saturate(180%);
  --tab-ink: #d3ddf0;
  --tab-ink-on: #ffffff;
  --plate-bg: rgba(255, 255, 255, 0.15);
  --lens-tint: rgba(255, 255, 255, 0.06);
  --lens-rim-a: rgba(255, 255, 255, 0.95);
  --lens-rim-b: rgba(255, 255, 255, 0.16);
  --lens-rim-c: rgba(255, 255, 255, 0.6);
  --lens-sheen: rgba(255, 255, 255, 0.32);
  --lens-glow: rgba(255, 255, 255, 0.16);

  --shadow-1: 0 1px 0 rgba(11, 18, 32, 0.04), 0 16px 30px -20px rgba(11, 18, 32, 0.32);
  --shadow-glass: 0 20px 40px -16px rgba(5, 12, 28, 0.6);
  --blob-a: color-mix(in srgb, var(--btn-bg) 7%, transparent);
  --blob-b: rgba(12, 178, 200, 0.06);
  --blob-c: transparent;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 30px;

  --ease: cubic-bezier(0.2, 0, 0, 1); /* spring-shaped curves below replace these where the browser can draw them */
  --spring: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 0.16s;
  --t-med: 0.3s;
  --t-slow: 0.5s;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 58px;
  --nav-h: 64px;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --brand: #4d8eff;
  --brand-text: #8db8ff;
  --brand-soft: rgba(77, 142, 255, 0.18);
  --chart-line: #6fa3ff;

  --bg: #04070d;
  --surface: #0d1420;
  --surface-2: #131c2c;
  --ink: #f0f4fb;
  --ink-2: #bbc6d8;
  --ink-3: #93a0b5;
  --line: rgba(255, 255, 255, 0.08);

  --good: #4adf9d;
  --good-soft: rgba(74, 223, 157, 0.14);
  --bad: #ff8178;
  --bad-soft: rgba(255, 129, 120, 0.15);
  --warn: #fbbf4a;
  --warn-soft: rgba(251, 191, 74, 0.14);

  --glass-bg: rgba(26, 35, 50, 0.55);
  --glass-strong: rgba(24, 33, 47, 0.82);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-edge: rgba(0, 0, 0, 0.45);
  --glass-shine: rgba(255, 255, 255, 0.16);
  --ctl-track: rgba(255, 255, 255, 0.07);
  --ctl-thumb: rgba(255, 255, 255, 0.16);
  --ctl-thumb-on: rgba(255, 255, 255, 0.1);

  --nav-bg: rgba(22, 32, 52, 0.72);

  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-glass: 0 20px 44px -20px rgba(0, 0, 0, 0.75);
  --blob-a: color-mix(in srgb, var(--btn-bg) 20%, transparent);
  --blob-b: rgba(12, 178, 200, 0.08);
}

/* Tab bar setting "Clear glass": a see-through bar. White glass in the light theme, a lighter dark glass in the dark theme. */
html[data-bar='glass'] {
  --nav-bg: rgba(255, 255, 255, 0.62);
  --nav-blur: blur(20px) saturate(190%);
  --tab-ink: var(--ink-2);
  --tab-ink-on: var(--brand-text);
  --plate-bg: rgba(11, 18, 32, 0.08);
  --lens-tint: rgba(255, 255, 255, 0.22);
  --lens-rim-b: rgba(255, 255, 255, 0.4);
  --lens-rim-c: rgba(255, 255, 255, 0.85);
  --lens-sheen: rgba(255, 255, 255, 0.55);
  --lens-glow: rgba(255, 255, 255, 0.3);
  --shadow-glass: 0 18px 38px -20px rgba(15, 23, 42, 0.45);
}
html[data-bar='glass'][data-theme='dark'] {
  --nav-bg: rgba(40, 54, 82, 0.55);
  --tab-ink: #d3ddf0;
  --tab-ink-on: #ffffff;
  --plate-bg: rgba(255, 255, 255, 0.14);
  --lens-tint: rgba(255, 255, 255, 0.06);
  --lens-rim-b: rgba(255, 255, 255, 0.16);
  --lens-rim-c: rgba(255, 255, 255, 0.6);
  --lens-sheen: rgba(255, 255, 255, 0.32);
  --lens-glow: rgba(255, 255, 255, 0.16);
}

/* Lighter effects: solid surfaces instead of frosted glass (for slower phones). */
html.lite {
  --blur: none;
  --nav-blur: none;
  --glass-bg: var(--surface);
  --glass-strong: var(--surface);
  --glass-border: var(--line);
  --glass-shine: transparent;
  --nav-bg: var(--surface);
  --shadow-glass: var(--shadow-1);
}

/* The motion curves are real spring responses, not eased timers: --ease is a critically damped spring
   (runs straight to its target and stops, no bounce); --spring is a hair underdamped (about 2% overshoot,
   which settles at once). Both stretch over the duration they are given. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease: linear(0, 0.03, 0.102, 0.194, 0.293, 0.389, 0.48, 0.562, 0.634, 0.697, 0.75, 0.795, 0.833, 0.864, 0.89, 0.911, 0.929, 0.943, 0.954, 0.963, 0.971, 0.977, 0.981, 0.985, 0.988, 0.991, 1);
    --spring: linear(0, 0.024, 0.085, 0.169, 0.265, 0.365, 0.464, 0.557, 0.641, 0.716, 0.781, 0.837, 0.882, 0.919, 0.949, 0.972, 0.989, 1.001, 1.01, 1.015, 1.018, 1.02, 1.02, 1.019, 1.017, 1.016, 1.014, 1.012, 1.01, 1.008, 1);
  }
}