/* ============================================================
   Qumulo Cloud AI Accelerator — Design Tokens
   Brand hex values ported verbatim from the Qumulo Design System.
   A dark-theme semantic layer is added on top (the brand defaults
   to a light page; this site is the dark "command center" variant).
   ============================================================ */
:root {
  /* ---- Primary brand ---- */
  --qumulo-black: #08081A;
  --qumulo-blue:  #3463F1;
  --dark-blue:    #04123D;
  --orange:       #FF7A46;   /* single warm accent — use sparingly */

  /* ---- Secondary accents ---- */
  --medium-blue:  #193BA0;
  --light-blue:   #6699FF;
  --periwinkle:   #EBEFFE;
  --cyan:         #0AF1FF;
  --vibrant-green:#00FF7D;

  /* ---- Grayscale ---- */
  --pearl:    #F5F6F9;
  --silver:   #D5D7DE;
  --dove:     #B2B7C1;
  --slate:    #6D7174;
  --charcoal: #363642;
  --white:    #FFFFFF;
  --black:    #000000;

  /* ---- Blue ramp ---- */
  --blue-950: #04123D;
  --blue-900: #08184f;
  --blue-800: #142052;
  --blue-700: #193BA0;
  --blue-600: #2a52cf;
  --blue-500: #3463F1;
  --blue-400: #6699FF;
  --blue-300: #9fbbff;
  --blue-200: #cdd9fd;
  --blue-100: #EBEFFE;
  --blue-50:  #f4f6fe;

  /* ---- Gradients ---- */
  --gradient-blue:        linear-gradient(135deg, #3463F1 0%, #142052 100%);
  --gradient-blue-hero:   linear-gradient(135deg, #3463F1 0%, #04123D 100%);
  --gradient-orange:      linear-gradient(135deg, #FFE2D7 0%, #FF7A46 100%);
  --gradient-accent-line: linear-gradient(90deg, #0AF1FF 0%, #3463F1 60%, #193BA0 100%);

  /* ============================================================
     DARK-THEME SEMANTIC LAYER
     ============================================================ */
  /* Surfaces */
  --bg-page:        #050614;            /* deepest base */
  --bg-page-2:      #070a1d;
  --bg-elevated:    #0b1024;            /* sections that lift off the base */
  --surface-card:   rgba(255,255,255,0.035);
  --surface-card-2: rgba(255,255,255,0.06);
  --surface-glass:  rgba(12,18,46,0.55);
  --surface-line:   rgba(255,255,255,0.09);   /* hairline borders */
  --surface-line-2: rgba(255,255,255,0.16);   /* stronger borders */

  /* Text */
  --text-primary:   #F4F6FE;            /* near-white on dark */
  --text-secondary: #AAB2CE;            /* >= 4.5:1 on bg-page */
  --text-muted:     #7F88A8;
  --text-on-accent: #FFFFFF;

  /* Accents */
  --accent:         var(--qumulo-blue);
  --accent-hover:   #4a76ff;
  --accent-soft:    rgba(52,99,241,0.16);
  --accent-electric:var(--cyan);
  --accent-warm:    var(--orange);

  /* Glows */
  --glow-blue: 0 0 60px rgba(52,99,241,0.45);
  --glow-cyan: 0 0 44px rgba(10,241,255,0.32);

  /* Elevation (deeper for dark UI) */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 26px 60px rgba(0,0,0,0.55);

  /* Typography */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;

  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-base:16px;
  --text-md:18px; --text-lg:20px; --text-xl:24px; --text-2xl:30px;
  --text-3xl:38px; --text-4xl:48px; --text-5xl:60px; --text-6xl:76px;
  /* fluid display sizes */
  --text-hero: clamp(2.6rem, 6.2vw, 5.0rem);
  --text-h2:   clamp(2.0rem, 4.0vw, 3.25rem);
  --text-h3:   clamp(1.35rem, 2.2vw, 1.9rem);

  --leading-none:1; --leading-tight:1.12; --leading-snug:1.25;
  --leading-normal:1.5; --leading-relaxed:1.7;

  --tracking-tighter:-0.03em; --tracking-tight:-0.015em;
  --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.14em;

  /* Spacing (4px base) */
  --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;
  --space-32:128px; --space-40:160px;

  /* Radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;

  /* Layout */
  --container:1240px;
  --container-narrow:920px;

  /* Motion (restrained, no bounce) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:120ms; --dur-normal:220ms; --dur-slow:360ms;

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(52,99,241,0.55);
}