/* ============================================================
   CYBER PROFOUND — DESIGN TOKENS
   Brand: #0065fc (blue accent) · #0A1B2E (navy) · #ffffff (white)
   Reference: Cyera density + spacing · Blackstone/McKinsey tone
   ============================================================ */

:root,
[data-theme='light'] {
  /* ── Surfaces ── */
  --color-bg:              #ffffff;
  --color-surface:         #f7f9fc;
  --color-surface-2:       #eef1f7;
  --color-surface-offset:  #e6eaf3;
  --color-divider:         #dde1ee;
  --color-border:          #c8cedf;

  /* ── Navy dark surfaces (used in dark sections inline) ── */
  --color-navy:            #0A1B2E;
  --color-navy-mid:        #0d2038;
  --color-navy-deep:       #071523;
  --color-navy-border:     rgba(255,255,255,0.07);
  --color-navy-divider:    rgba(255,255,255,0.04);
  --color-navy-glow:       rgba(0,101,252,0.12);

  /* ── Text ── */
  --color-text:            #0A1B2E;
  --color-text-secondary:  #2d3f53;
  --color-text-muted:      #5b6e82;
  --color-text-faint:      #8fa0b0;
  --color-text-inv:        #ffffff;
  --color-text-inv-muted:  rgba(255,255,255,0.58);
  --color-text-inv-faint:  rgba(255,255,255,0.28);

  /* ── Primary — Electric Blue #0065fc ── */
  --color-accent:          #0065fc;
  --color-accent-hover:    #0050d8;
  --color-accent-active:   #003eb5;
  --color-accent-muted:    rgba(0,101,252,0.07);
  --color-accent-border:   rgba(0,101,252,0.18);
  --color-accent-glow:     rgba(0,101,252,0.22);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Switzer', 'Inter', 'Helvetica Neue', sans-serif;

  /* ── Type scale — fluid clamp() ── */
  --text-2xs:  clamp(0.625rem,  0.6rem  + 0.15vw, 0.75rem);
  --text-xs:   clamp(0.75rem,   0.72rem + 0.18vw, 0.875rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw,  0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem  + 0.2vw,  1.0625rem);
  --text-md:   clamp(1.0625rem, 1rem    + 0.35vw, 1.3125rem);
  --text-lg:   clamp(1.25rem,   1.1rem  + 0.8vw,  1.875rem);
  --text-xl:   clamp(1.75rem,   1.25rem + 1.6vw,  2.875rem);
  --text-2xl:  clamp(2.25rem,   1.5rem  + 2.5vw,  4.25rem);
  --text-3xl:  clamp(3rem,      1.8rem  + 4vw,    6.5rem);
  --text-hero: clamp(3.5rem,    2rem    + 5.5vw,  8rem);

  /* ── Spacing (4px grid) ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-28: 7rem;
  --sp-32: 8rem;

  /* ── Section rhythm ── */
  --section-py:    clamp(5rem, 9vw, 9rem);
  --section-py-sm: clamp(3.5rem, 6vw, 6rem);

  /* ── Layout ── */
  --content-narrow:  680px;
  --content-default: 1040px;
  --content-wide:    1300px;
  --gutter:          clamp(1.5rem, 5vw, 4rem);
  --nav-h:           72px;

  /* ── Border radius — institutional restraint ── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 12px;

  /* ── Easing ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    130ms var(--ease-out);
  --t-base:    220ms var(--ease-out);
  --t-slow:    380ms var(--ease-out);
  --t-reveal:  640ms var(--ease-out);

  /* ── Shadows ── */
  --sh-xs:   0 1px 2px rgba(10,27,46,0.04);
  --sh-sm:   0 2px 8px rgba(10,27,46,0.06), 0 1px 2px rgba(10,27,46,0.04);
  --sh-md:   0 6px 20px rgba(10,27,46,0.08), 0 2px 6px rgba(10,27,46,0.04);
  --sh-lg:   0 16px 44px rgba(10,27,46,0.10), 0 4px 12px rgba(10,27,46,0.05);
  --sh-xl:   0 28px 72px rgba(10,27,46,0.13), 0 8px 20px rgba(10,27,46,0.07);
  --sh-blue: 0 8px 28px rgba(0,101,252,0.18), 0 2px 8px rgba(0,101,252,0.10);
}

/* Global dark mode via toggle */
[data-theme='dark'] {
  --color-bg:             #05101e;
  --color-surface:        #0A1B2E;
  --color-surface-2:      #0e2038;
  --color-surface-offset: #132540;
  --color-divider:        #1b3050;
  --color-border:         #203a5a;
  --color-text:           #e2eaf4;
  --color-text-secondary: #a4b8cc;
  --color-text-muted:     #5e7488;
  --color-text-faint:     #2f4560;
  --color-accent:         #4090ff;
  --color-accent-hover:   #5ea0ff;
  --color-accent-muted:   rgba(64,144,255,0.10);
  --color-accent-border:  rgba(64,144,255,0.22);
  --sh-sm:  0 2px 8px rgba(0,0,0,0.35);
  --sh-md:  0 6px 20px rgba(0,0,0,0.45);
  --sh-lg:  0 16px 44px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #05101e;
    --color-surface:        #0A1B2E;
    --color-surface-2:      #0e2038;
    --color-surface-offset: #132540;
    --color-divider:        #1b3050;
    --color-border:         #203a5a;
    --color-text:           #e2eaf4;
    --color-text-secondary: #a4b8cc;
    --color-text-muted:     #5e7488;
    --color-accent:         #4090ff;
    --color-accent-hover:   #5ea0ff;
    --color-accent-muted:   rgba(64,144,255,0.10);
    --color-accent-border:  rgba(64,144,255,0.22);
  }
}