/* ==========================================================================
   DataMedics design system  -  TOKENS
   --------------------------------------------------------------------------
   Dark-first, glassmorphic, built for a data consultancy that sells trust.
   Distilled from two proven in-house systems and tuned to the DataMedics
   brand (navy + electric blue), with the 2026 techniques layered on:
   glass 2.0 (depth, not decoration), scroll-driven motion, kinetic type.

   One rule above all: components use var(--token), never a raw hex. That is
   what makes dark and light both free and both correct. Change the brand in
   section 1 and the whole product rebrands.

   No em dashes anywhere in this project.
   ========================================================================== */

:root {
  /* ---- 1. BRAND. Change these to rebrand everything. --------------------- */
  --brand:        #008DFF;   /* electric blue, the primary accent          */
  --brand-600:    #0B63B8;   /* hover / links on light                      */
  --brand-700:    #094e92;   /* pressed                                     */
  --brand-soft:   #5fb4ff;   /* accent text on dark                         */
  --teal:         #1fd6c6;   /* the second note in the accent gradient     */
  --navy:         #0A1A33;   /* hero bands, headers, the brand surface      */
  --navy-900:     #050d1c;   /* deepest page base in dark                   */
  --accent-warm:  #E67833;   /* the one warm highlight, used sparingly      */

  /* ---- meaning colours. Same meaning in both themes. -------------------- */
  --success:  #16a34a;
  --warning:  #f59e0b;
  --danger:   #e2231a;

  /* ---- data-viz ramp (cool, on-brand) ---------------------------------- */
  --c-1:#5fb4ff; --c-2:#008DFF; --c-3:#0B63B8; --c-4:#1fd6c6; --c-5:#8b7bf0;
  --c-6:#E67833; --c-7:#f6c344;

  /* ---- type ------------------------------------------------------------ */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-display: clamp(2.6rem, 6vw, 5rem);
  --t-h1: clamp(2rem, 4vw, 3rem);
  --t-h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-h3: 1.2rem;
  --t-body: 1rem; --t-small: 0.875rem; --t-tiny: 0.75rem;

  /* ---- space (4px base) / radius / layout ------------------------------ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --maxw:1280px; --maxw-wide:1440px; --header-h:72px;

  /* ---- motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:600ms; --dur-amb:7s;
}

/* ==========================================================================
   DARK  (default). A deep navy, never black. Glass is a faint light film.
   ========================================================================== */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  --ink:    #eaf2ff;
  --muted:  #9fb2d4;
  --faint:  #67789c;

  --bg:        #050d1c;
  --surface:   #0c1a30;
  --surface-2: #122340;
  --border:    #22365c;
  --border-strong: #32507e;
  --hover:     rgba(255,255,255,.055);
  --link:      var(--brand-soft);
  --accent:    var(--brand-soft);

  /* the page backdrop: layered glows + a masked grid, the premium base */
  --bg1:#0a1a33; --bg2:#081429; --bg3:#050d1c;
  --glow-1:#123a73; --glow-2:#0d3b46; --grid:rgba(255,255,255,.035);

  --header-bg: rgba(8,18,38,.62);

  /* GLASS. The signature. Faint film on dark, near-opaque where text sits. */
  --glass:        rgba(255,255,255,.055);
  --glass-strong: rgba(14,28,52,.72);
  --glass-brd:    rgba(255,255,255,.12);
  --glass-hi:     rgba(255,255,255,.14);   /* the top inner "edge of light" */
  --glass-blur:   20px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-2: 0 10px 30px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.35);
  --shadow-3: 0 30px 70px rgba(0,0,0,.6);
  --glow-accent: 0 10px 40px -8px rgba(0,141,255,.45);

  /* status, lightened so it reads on dark */
  --st-new:#5fb4ff; --st-active:#f6c344; --st-done:#4ade80; --st-lost:#ff6a5f;
}

/* ==========================================================================
   LIGHT. Soft off-white, never pure white. Glass becomes near-opaque.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --ink:    #0a1a33;
  --muted:  #51607a;
  --faint:  #8595ad;

  --bg:        #eef3f8;
  --surface:   #ffffff;
  --surface-2: #f5f8fc;
  --border:    #e0e7f0;
  --border-strong: #c7d2e0;
  --hover:     rgba(10,26,51,.04);
  --link:      var(--brand-600);
  --accent:    var(--brand-600);

  --bg1:#fbfcff; --bg2:#f4f8fd; --bg3:#eef3f8;
  --glow-1:#dcebfb; --glow-2:#e4f4f1; --grid:rgba(10,26,51,.04);

  --header-bg: rgba(255,255,255,.78);

  --glass:        rgba(255,255,255,.65);
  --glass-strong: rgba(255,255,255,.88);
  --glass-brd:    rgba(10,26,51,.1);
  --glass-hi:     rgba(255,255,255,.9);
  --glass-blur:   18px;

  --shadow-1: 0 1px 2px rgba(10,26,51,.06), 0 2px 6px rgba(10,26,51,.07);
  --shadow-2: 0 12px 32px rgba(10,26,51,.1), 0 4px 10px rgba(10,26,51,.06);
  --shadow-3: 0 26px 60px rgba(10,26,51,.16);
  --glow-accent: 0 12px 36px -10px rgba(0,141,255,.4);

  --brand-soft: #0B63B8;  /* darker so accent text reads on white */
  --st-new:#0B63B8; --st-active:#b7791f; --st-done:#15803d; --st-lost:#dc2626;
}

/* native controls follow the theme */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] option { color: var(--ink); background: var(--surface); }