/* ═══════════════════════════════════════════════════════════════════
   FCI Design Tokens — base.css
   Every color, font size, spacing, border radius, shadow, transition,
   and breakpoint declared once. Components reference via var(--token).
   No component ever owns a color or spacing value directly.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── RESETS ───────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--color-bg);
  overflow-x: hidden;
}

/* Mobile: no scrollbar gutter (overlay scrollbars, no reserved space) */
@media (max-width: 768px) {
  html {
    scrollbar-gutter: auto;
  }
}


/* ─── DESIGN TOKENS (DARK MODE DEFAULT) ────────────────────────── */

:root {
  /* ── Brand Colors ──────────────────────────────────────────── */
  --color-blue:           #2563EB;
  --color-blue-dark:      #1D4ED8;
  --color-blue-mid:       #3B82F6;
  --color-blue-light:     #60A5FA;
  --color-sky:            #0EA5E9;
  --color-sky-light:      #BAE6FD;
  --color-deep-navy:      #1E3A6E;

  /* ── Semantic Surface Colors (Dark) ────────────────────────── */
  --color-bg:             #060B14;
  --color-surface:        #0D1626;
  --color-surface-2:      #111F33;
  --color-surface-hover:  #162240;

  /* ── Text Colors (Dark) ────────────────────────────────────── */
  --color-text-1:         #F1F5F9;
  --color-text-2:         #94A3B8;
  --color-text-3:         #475569;

  /* ── Border / Rule ─────────────────────────────────────────── */
  --color-rule:           #1A2B40;

  /* ── Accent Colors ─────────────────────────────────────────── */
  --color-emerald:        #10B981;
  --color-emerald-bg:     rgba(16, 185, 129, 0.10);
  --color-amber:          #F59E0B;
  --color-amber-bg:       rgba(245, 158, 11, 0.10);
  --color-red:            #EF4444;
  --color-red-bg:         rgba(239, 68, 68, 0.10);
  --color-violet:         #A855F7;
  --color-violet-bg:      rgba(168, 85, 247, 0.10);

  /* ── Blue Tints (for badges, backgrounds) ──────────────────── */
  --color-blue-tint:      #DBEAFE;
  --color-blue-faint:     #EFF6FF;
  --color-blue-bg:        rgba(37, 99, 235, 0.12);
  --color-blue-bg-subtle: rgba(37, 99, 235, 0.06);

  /* ── White / Off-white ─────────────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-offwhite:       #F8FAFC;


  /* ── Typography — Font Families ────────────────────────────── */
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:         'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:            'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* ── Typography — Font Sizes ───────────────────────────────── */
  --text-xs:              0.75rem;     /* 12px */
  --text-sm:              0.8125rem;   /* 13px */
  --text-base:            0.875rem;    /* 14px */
  --text-md:              0.9375rem;   /* 15px */
  --text-lg:              1rem;        /* 16px */
  --text-xl:              1.125rem;    /* 18px */
  --text-2xl:             1.25rem;     /* 20px */
  --text-3xl:             1.5rem;      /* 24px */
  --text-4xl:             2rem;        /* 32px */
  --text-5xl:             2.5rem;      /* 40px */
  --text-6xl:             3rem;        /* 48px */

  /* ── Typography — Font Weights ─────────────────────────────── */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-extrabold:     800;
  --weight-black:         900;

  /* ── Typography — Line Heights ─────────────────────────────── */
  --leading-none:         1;
  --leading-tight:        1.1;
  --leading-snug:         1.3;
  --leading-normal:       1.5;
  --leading-relaxed:      1.7;
  --leading-loose:        1.85;

  /* ── Typography — Letter Spacing ───────────────────────────── */
  --tracking-tight:       -0.03em;
  --tracking-snug:        -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.04em;
  --tracking-wider:       0.08em;
  --tracking-widest:      0.2em;


  /* ── Spacing Scale ─────────────────────────────────────────── */
  --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-section:        80px;
  --space-page-x:         32px;
  --space-page-y:         100px;

  /* ── Layout ────────────────────────────────────────────────── */
  --max-width-content:    900px;
  --max-width-page:       1200px;
  --max-width-text:       660px;
  --nav-height:           64px;


  /* ── Border Radius ─────────────────────────────────────────── */
  /* sm = nav buttons, pills, small UI  |  md = default btns  |  lg = large btns, cards  |  full = badges */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            14px;
  --radius-full:          100px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-glow-blue:     0 0 20px rgba(37, 99, 235, 0.15);
  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:      0.1s ease;
  --transition-base:      0.15s ease;
  --transition-slow:      0.25s ease;
  --transition-color:     color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

  /* ── Z-Index Scale ─────────────────────────────────────────── */
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;

  /* ── Breakpoints (for reference — used in @media) ──────────── */
  /* --bp-mobile:   375px   (design target)                       */
  /* --bp-tablet:   768px                                         */
  /* --bp-desktop:  1024px                                        */
  /* --bp-wide:     1280px                                        */
}


/* ─── LIGHT MODE OVERRIDES ─────────────────────────────────────── */

[data-theme="light"] {
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F1F5F9;
  --color-surface-hover:  #E2E8F0;
  --color-text-1:         #0F172A;
  --color-text-2:         #475569;
  --color-text-3:         #94A3B8;
  --color-rule:           #E2E8F0;
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:             #F8FAFC;
    --color-surface:        #FFFFFF;
    --color-surface-2:      #F1F5F9;
    --color-surface-hover:  #E2E8F0;
    --color-text-1:         #0F172A;
    --color-text-2:         #475569;
    --color-text-3:         #94A3B8;
    --color-rule:           #E2E8F0;
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.08);
  }
}


/* ─── BASE STYLES ──────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--color-blue);
  color: var(--color-white);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-blue-light);
}

/* ─── FOCUS VISIBLE (accessibility) ────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}


/* ─── SKIP TO CONTENT (accessibility) ─────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-6);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}


/* ─── RESPONSIVE PAGE PADDING ──────────────────────────────────── */

@media (max-width: 640px) {
  :root {
    --space-page-x:     16px;
    --space-section:    56px;
    --nav-height:       56px;
  }
}