/*
 * CredVault design tokens. Components use ONLY these variables - no raw
 * hex values anywhere else. Dark mode swaps token values; it never
 * duplicates component styles.
 *
 * Hierarchy: primary (main actions, active nav, links) > secondary
 * (supporting actions) > tertiary (tags, subtle accents), plus a neutral
 * scale and semantic success/warning/danger/info.
 */
:root {
  color-scheme: light;

  /* --- brand --- */
  --primary-50:  #eef2ff;
  --primary-100: #dfe6ff;
  --primary-500: #4a63e7;
  --primary-600: #3b50d0;
  --primary-700: #2f40a8;
  --secondary-50:  #e8f6f5;
  --secondary-500: #0f8f86;
  --secondary-600: #0b746d;
  --tertiary-50:  #f4effe;
  --tertiary-500: #7c5cd6;
  --tertiary-600: #6645bf;

  /* --- neutrals --- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfd;
  --neutral-50:  #f5f6f9;
  --neutral-100: #eceef3;
  --neutral-200: #dde1e9;
  --neutral-300: #c6ccd8;
  --neutral-500: #7a8294;
  --neutral-600: #5c6477;
  --neutral-800: #262b37;
  --neutral-900: #151821;

  /* --- semantic --- */
  --success-50: #e9f7ef; --success-600: #1c7c47;
  --warning-50: #fff5e0; --warning-600: #a45f00;
  --danger-50:  #fdecec; --danger-600:  #c02f2f;
  --info-50:    #e8f3fc; --info-600:    #1d6fb5;

  /* --- roles (what components actually consume) --- */
  --bg-app:        var(--neutral-50);
  --bg-surface:    var(--neutral-0);
  --bg-subtle:     var(--neutral-25);
  --bg-muted:      var(--neutral-100);
  --bg-sidebar:    var(--neutral-900);
  --fg-sidebar:    #c9cedb;
  --fg-sidebar-strong: #ffffff;
  --bg-sidebar-active: rgba(255, 255, 255, 0.08);
  --text-strong:   var(--neutral-900);
  --text:          var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-faint:    var(--neutral-500);
  --text-on-primary: #ffffff;
  --text-on-danger:  #ffffff;
  /* sign-in hero panel (always on a dark brand gradient, both themes) */
  --fg-hero:        #e8ebff;
  --fg-hero-strong: #ffffff;
  --fg-hero-muted:  #c9d0f5;
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --focus-ring:    color-mix(in srgb, var(--primary-500) 45%, transparent);
  --link:          var(--primary-600);

  /* --- type: fluid, rem-based; --font-scale is the user's Settings slider --- */
  --font-scale: 1;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs:  calc(clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem) * var(--font-scale));
  --text-sm:  calc(clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem) * var(--font-scale));
  --text-md:  calc(clamp(0.90rem, 0.86rem + 0.18vw, 1.02rem) * var(--font-scale));
  --text-lg:  calc(clamp(1.05rem, 0.98rem + 0.30vw, 1.25rem) * var(--font-scale));
  --text-xl:  calc(clamp(1.30rem, 1.15rem + 0.60vw, 1.75rem) * var(--font-scale));
  --text-2xl: calc(clamp(1.60rem, 1.35rem + 1.00vw, 2.30rem) * var(--font-scale));

  /* --- spacing: fluid scale, grows on large screens --- */
  --space-1: clamp(0.20rem, 0.18rem + 0.08vw, 0.30rem);
  --space-2: clamp(0.40rem, 0.36rem + 0.16vw, 0.55rem);
  --space-3: clamp(0.60rem, 0.54rem + 0.24vw, 0.85rem);
  --space-4: clamp(0.80rem, 0.70rem + 0.40vw, 1.20rem);
  --space-5: clamp(1.10rem, 0.95rem + 0.60vw, 1.70rem);
  --space-6: clamp(1.50rem, 1.20rem + 1.10vw, 2.60rem);

  /* --- shape & depth --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.9rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.22), 0 4px 12px rgba(16, 24, 40, 0.10);
  --scrim: rgba(16, 24, 40, 0.45); /* behind a dialog */

  /* --- chart series (categorical, fixed order; validated with the dataviz
         palette checker on this surface: CVD/normal-vision pass all-pairs for 3;
         slot 3 is < 3:1 on white, so charts always carry visible labels) --- */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;

  /* --- layout --- */
  --sidebar-width: clamp(13.5rem, 11rem + 5vw, 17rem);
  --content-max: min(100%, 110rem);
  --measure: 70ch;
}

/* Blue (v1's "Blue" theme): light-blue page, white panels, navy text, blue accent.
   Primary shades are a step deeper than v1's #2196F3 so white text on buttons stays readable. */
:root[data-theme="blue"] {
  color-scheme: light;
  --primary-50:  #e3f2fd;
  --primary-100: #bbdefb;
  --primary-500: #1e88e5;
  --primary-600: #1565c0;
  --primary-700: #0d47a1;
  --bg-app:        #e3f2fd;
  --bg-surface:    #ffffff;
  --bg-subtle:     #f3f9ff;
  --bg-muted:      #d6eafb;
  --bg-sidebar:    #0d47a1;
  --fg-sidebar:    #cfe3fb;
  --fg-sidebar-strong: #ffffff;
  --bg-sidebar-active: rgba(255, 255, 255, 0.14);
  --text-strong:   #0a3570;
  --text:          #0d47a1;
  --text-muted:    #4a6fa5;
  --text-faint:    #6b8cbc;
  --border:        #90caf9;
  --border-strong: #64b5f6;
  --link:          #1565c0;
  --focus-ring:    color-mix(in srgb, #2196f3 45%, transparent);
  --shadow-sm: 0 1px 2px rgba(13, 71, 161, 0.08);
  --shadow-md: 0 4px 14px rgba(13, 71, 161, 0.10), 0 1px 3px rgba(13, 71, 161, 0.08);
}

/* Dark values. <head> resolves the user's choice (light / dark / blue / system)
   to data-theme before first paint - see partials/head.ejs. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app:        #0f1117;
  --bg-surface:    #171a23;
  --bg-subtle:     #1b1f2a;
  --bg-muted:      #232838;
  --bg-sidebar:    #0b0d12;
  --fg-sidebar:    #aab1c2;
  --bg-sidebar-active: rgba(255, 255, 255, 0.06);
  --text-strong:   #f2f4f8;
  --text:          #dde1ea;
  --text-muted:    #a3aabb;
  --text-faint:    #7f8799;
  --border:        #2a3040;
  --border-strong: #3a4256;
  --link:          #8ea0ff;
  --primary-50:    #1c2242;
  --primary-100:   #232b55;
  --secondary-50:  #10302e;
  --tertiary-50:   #261d40;
  --success-50: #12301f; --success-600: #58c98b;
  --warning-50: #33260c; --warning-600: #f0b24f;
  --danger-50:  #3a1717; --danger-600:  #ff7b7b;
  --info-50:    #122a40; --info-600:    #6db5f2;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.6);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
}