/* ==========================================================================
   Rodan brand tokens — vendored for standalone deployment.
   Source of truth: Rodan Design System / colors_and_type.css.
   Space Grotesk is loaded from Google Fonts in index.html (not the local TTF),
   so this site deploys to Cloudflare Pages with no local font binary.
   Keep values in sync with the design system; do not invent new brand colours.
   ========================================================================== */

:root {
  /* Base palette */
  --rodan-white:        #FFFFFF;
  --rodan-lavender:     #DCDCF2;
  --rodan-navy:         #000034;
  --rodan-ink:          #111138;
  --rodan-black:        #000000;

  --rodan-lavender-50:  #F4F4FA;
  --rodan-lavender-100: #ECEDF6;
  --rodan-lavender-200: #DCDCF2;
  --rodan-lavender-300: #B2B3C9;
  --rodan-lavender-400: #8A8BA8;

  --rodan-ink-700:      #2F3046;
  --rodan-ink-600:      #46445C;

  --rodan-navy-elev:    #0B0B40;
  --rodan-navy-quiet:   #14143F;
  --rodan-navy-line:    rgba(255,255,255,0.12);

  /* Semantic — dark is default */
  --bg:                 var(--rodan-navy);
  --bg-elev:            var(--rodan-navy-elev);
  --surface:            var(--rodan-navy-elev);
  --surface-quiet:      var(--rodan-navy-quiet);
  --line:               var(--rodan-navy-line);
  --line-strong:        rgba(255,255,255,0.22);

  --fg-1:               var(--rodan-white);
  --fg-2:               rgba(255,255,255,0.82);
  --fg-3:               rgba(255,255,255,0.60);
  --fg-4:               rgba(255,255,255,0.40);

  --accent:             var(--rodan-white);
  --accent-fg:          var(--rodan-navy);
  --link:               var(--rodan-lavender);

  /* Data viz — sequential light -> deep on dark canvas */
  --data-1:             var(--rodan-lavender-200);
  --data-2:             #9799D6;
  --data-3:             #6D70C9;
  --data-4:             #4A4FB8;
  --data-pos:           #4FB07F;
  --data-neg:           #E8636F;

  /* Type */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --fs-h1: 36px;  --lh-h1: 44px;
  --fs-h2: 28px;  --lh-h2: 36px;
  --fs-h3: 22px;  --lh-h3: 30px;
  --fs-body: 16px; --lh-body: 22px;
  --fs-small: 14px; --lh-small: 22px;
  --fs-display-l: 72px; --lh-display-l: 76px;
  --fs-display-m: 48px; --lh-display-m: 52px;
  --fs-label: 12px; --lh-label: 16px;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-1: 4px; --radius-2: 8px; --radius-3: 10px; --radius-4: 20px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,52,0.06), 0 1px 1px rgba(0,0,52,0.04);
  --shadow-2: 0 4px 16px rgba(0,0,52,0.08), 0 1px 2px rgba(0,0,52,0.04);
  --shadow-3: 0 12px 40px rgba(0,0,52,0.12), 0 2px 6px rgba(0,0,52,0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;

  /* Layout */
  --container-max: 1360px;
  --container-pad: 40px;
}

/* Light surface — opt-in, restores white palette */
.theme-light, [data-theme="light"] {
  --bg: var(--rodan-white);
  --bg-elev: var(--rodan-lavender-50);
  --surface: var(--rodan-white);
  --surface-quiet: var(--rodan-lavender-100);
  --line: var(--rodan-lavender-200);
  --line-strong: var(--rodan-lavender-300);

  --fg-1: var(--rodan-navy);
  --fg-2: var(--rodan-ink);
  --fg-3: #4A4B66;
  --fg-4: var(--rodan-lavender-300);

  --accent: var(--rodan-black);
  --accent-fg: var(--rodan-white);
  --link: var(--rodan-navy);

  --data-1: var(--rodan-navy);
  --data-2: #4A4FB8;
  --data-3: #7B7FD1;
  --data-4: var(--rodan-lavender-200);
  --data-pos: #2F6F4F;
  --data-neg: #B23A48;
}