/* Next Generation Tech — design tokens.
   Dark is the primary brand theme; light is a token-swap of the same system. */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px;

  /* brand */
  --primary: #1FB5B0;
  --primary-dark: #2FD6CC;
  --primary-darker: #17847F;
  --primary-light: #7FE9E2;
  --primary-tint: rgba(31, 181, 176, 0.12);
  --glow: #7FFFF4;
  --accent: #E8893A;
  --accent-light: #F0A050;
  --accent-tint: rgba(232, 137, 58, 0.14);

  /* surfaces */
  --ink: #EAF6F4;
  --ink-soft: #C3D9D5;
  --muted: #8FB0AA;
  --muted-soft: #648781;
  --bg: #061415;
  --bg-alt: #0B1F20;
  --surface: rgba(234, 246, 244, 0.04);
  --surface-solid: #0D2224;
  --border: rgba(127, 233, 226, 0.16);
  --border-soft: rgba(127, 233, 226, 0.08);
  --glass-border: linear-gradient(135deg, rgba(127,255,244,.55), rgba(232,137,58,.25) 60%, rgba(31,181,176,.15));
  --nav-bg: rgba(6, 20, 21, 0.72);

  /* status (unioned across product pages — values already consistent, no conflicts) */
  --good: #4ADE80; --good-bg: rgba(74, 222, 128, .12); --good-border: rgba(74, 222, 128, .35);
  --warn: #FBBF24; --warn-bg: rgba(251, 191, 36, .12); --warn-border: rgba(251, 191, 36, .35);
  --bad: #F87171; --bad-bg: rgba(248, 113, 113, .12); --bad-border: rgba(248, 113, 113, .35);
  --accent2: #F0A050; --accent2-bg: rgba(240, 160, 80, .12);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 32px -8px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 70px -18px rgba(0, 0, 0, .7);
  --shadow-glow: 0 0 0 1px rgba(127,233,226,.12), 0 0 32px -4px rgba(47,214,204,.35);
}

:root[data-theme="light"] {
  --ink: #0B1B1A;
  --ink-soft: #2B4442;
  --muted: #5C7876;
  /* Was #85A19E (2.62:1 on --bg, fails WCAG AA) — darkened to pass 4.5:1 for the small
     labels/captions this drives (hv-card .lbl, .post-sub, .demo-label, etc). */
  --muted-soft: #547270;
  --bg: #F3FAF9;
  --bg-alt: #E7F3F1;
  --surface: rgba(11, 27, 26, 0.035);
  --surface-solid: #FFFFFF;
  --border: rgba(15, 118, 110, 0.16);
  --border-soft: rgba(15, 118, 110, 0.08);
  --glass-border: linear-gradient(135deg, rgba(15,118,110,.35), rgba(232,137,58,.2) 60%, rgba(31,181,176,.18));
  --nav-bg: rgba(243, 250, 249, 0.82);

  --primary: #0D9488;
  --primary-dark: #0F766E;
  --primary-darker: #115E59;
  /* Was #99F6E4, a pale mint meant as a tint/background — but this token is used as
     foreground text/icon color throughout the new components (links, badges, icons),
     where a pale mint on a near-white background was 1.19:1 (essentially invisible).
     Replaced with a saturated, readable teal (4.95:1) that still reads as the "brighter"
     member of the primary family. */
  --primary-light: #0A7A6C;
  --primary-tint: rgba(13, 148, 136, 0.08);
  --glow: #14B8A6;
  --accent: #C2661E;
  /* Was #E8893A (2.46:1 on --bg, fails) — darkened to pass 4.5:1 for use as the
     "Starting from PKR [ ]" placeholder text color. */
  --accent-light: #A6490A;
  --accent-tint: rgba(194, 102, 30, 0.1);

  --good: #15803D; --good-bg: rgba(21, 128, 61, .08); --good-border: rgba(21, 128, 61, .3);
  --warn: #B45309; --warn-bg: rgba(180, 83, 9, .08); --warn-border: rgba(180, 83, 9, .3);
  --bad: #B91C1C; --bad-bg: rgba(185, 28, 28, .08); --bad-border: rgba(185, 28, 28, .3);
  --accent2: #C2661E; --accent2-bg: rgba(194, 102, 30, .08);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .16);
  --shadow-glow: 0 0 0 1px rgba(15,118,110,.1), 0 0 24px -6px rgba(15,118,110,.25);
}