/* ============================================================
   BlueCortex Design System — CSS Custom Properties
   Generated from: assest/stitch_.../bluecortex_design_system/DESIGN.md
   DO NOT add hardcoded values anywhere outside this file.
   ============================================================ */

:root {

  /* ── Colors ────────────────────────────────────────────── */

  /* Surfaces */
  --color-surface:                    #f9f9ff;
  --color-surface-dim:                #cfdaf2;
  --color-surface-bright:             #f9f9ff;
  --color-surface-container-lowest:   #ffffff;
  --color-surface-container-low:      #f0f3ff;
  --color-surface-container:          #e7eeff;
  --color-surface-container-high:     #dee8ff;
  --color-surface-container-highest:  #d8e3fb;
  --color-surface-variant:            #d8e3fb;
  --color-surface-tint:               #0053db;

  /* On-surfaces */
  --color-on-surface:                 #111c2d;
  --color-on-surface-variant:         #434655;
  --color-inverse-surface:            #263143;
  --color-inverse-on-surface:         #ecf1ff;

  /* Outlines */
  --color-outline:                    #737686;
  --color-outline-variant:            #c3c6d7;

  /* Primary */
  --color-primary:                    #004ac6;
  --color-on-primary:                 #ffffff;
  --color-primary-container:          #2563eb;
  --color-on-primary-container:       #eeefff;
  --color-inverse-primary:            #b4c5ff;
  --color-primary-fixed:              #dbe1ff;
  --color-primary-fixed-dim:          #b4c5ff;
  --color-on-primary-fixed:           #00174b;
  --color-on-primary-fixed-variant:   #003ea8;

  /* Secondary */
  --color-secondary:                  #3755c3;
  --color-on-secondary:               #ffffff;
  --color-secondary-container:        #708cfd;
  --color-on-secondary-container:     #00217a;
  --color-secondary-fixed:            #dde1ff;
  --color-secondary-fixed-dim:        #b8c4ff;
  --color-on-secondary-fixed:         #001453;
  --color-on-secondary-fixed-variant: #173bab;

  /* Tertiary */
  --color-tertiary:                   #51555b;
  --color-on-tertiary:                #ffffff;
  --color-tertiary-container:         #696d73;
  --color-on-tertiary-container:      #edf0f7;
  --color-tertiary-fixed:             #dfe2e9;
  --color-tertiary-fixed-dim:         #c3c7cd;
  --color-on-tertiary-fixed:          #181c21;
  --color-on-tertiary-fixed-variant:  #43474d;

  /* Error */
  --color-error:                      #ba1a1a;
  --color-on-error:                   #ffffff;
  --color-error-container:            #ffdad6;
  --color-on-error-container:         #93000a;

  /* Background */
  --color-background:                 #f9f9ff;
  --color-on-background:              #111c2d;

  /* Brand gradient */
  --gradient-primary: linear-gradient(135deg, #004ac6 0%, #2563eb 100%);

  /* Icon well */
  --color-icon-well:                  #ebf4ff;

  /* ── Typography ────────────────────────────────────────── */

  --font-display:   'Plus Jakarta Sans', sans-serif;
  --font-body:      'Inter', sans-serif;

  /* Font sizes — fluid via clamp() */
  --fs-display-lg:    clamp(2.25rem, 5vw, 4rem);    /* 36–64px */
  --fs-headline-lg:   clamp(1.75rem, 3.5vw, 2.5rem); /* 28–40px */
  --fs-headline-md:   clamp(1.25rem, 2.5vw, 1.5rem); /* 20–24px */
  --fs-body-lg:       clamp(1rem, 1.5vw, 1.125rem);  /* 16–18px */
  --fs-body-md:       1rem;                           /* 16px */
  --fs-label-md:      0.875rem;                       /* 14px */
  --fs-button:        1rem;                           /* 16px */
  --fs-xs:            0.75rem;                        /* 12px */

  /* Font weights */
  --fw-extrabold: 800;
  --fw-bold:      700;
  --fw-semibold:  600;
  --fw-medium:    500;
  --fw-regular:   400;

  /* Line heights */
  --lh-display:   1.1;
  --lh-headline:  1.2;
  --lh-heading:   1.3;
  --lh-body:      1.6;
  --lh-body-md:   1.5;
  --lh-label:     1.4;

  /* Letter spacings */
  --ls-display:   -0.02em;
  --ls-headline:  -0.01em;
  --ls-label:      0.05em;

  /* ── Border Radii ──────────────────────────────────────── */

  --radius-sm:      0.25rem;   /* 4px  — default */
  --radius-md:      0.75rem;   /* 12px — inputs  */
  --radius-lg:      1rem;      /* 16px */
  --radius-xl:      1.25rem;   /* 20px — cards   */
  --radius-2xl:     1.5rem;    /* 24px — large cards */
  --radius-3xl:     2.5rem;    /* 40px — CTA banner */
  --radius-full:    9999px;    /* pill buttons, chips */

  /* ── Spacing ───────────────────────────────────────────── */

  --spacing-unit:          0.5rem;  /* 8px */
  --spacing-gutter:        1.5rem;  /* 24px */
  --spacing-margin-mobile: 1rem;    /* 16px */
  --spacing-margin-desktop: 3rem;   /* 48px */
  --spacing-section:       5rem;    /* 80px */
  --container-max:         80rem;   /* 1280px */

  /* ── Shadows ───────────────────────────────────────────── */

  /* Resting elevation — blue-tinted ambient */
  --shadow-card:   0 8px 24px rgba(37, 99, 235, 0.10);
  /* Hover elevation */
  --shadow-hover:  0 20px 48px rgba(37, 99, 235, 0.18);
  /* Nav shadow */
  --shadow-nav:    0 1px 0 var(--color-outline-variant);
  /* Mobile reduced shadow */
  --shadow-card-mobile: 0 4px 12px rgba(37, 99, 235, 0.08);

  /* ── Transitions ───────────────────────────────────────── */

  --transition-base:    0.3s ease;
  --transition-fast:    0.15s ease;
}