/* =========================
   NGLA DESIGN SYSTEM TOKENS
   Complete design system variables
   ========================= */

:root {
  /* =========================
     FONT FAMILIES (Stacks)
     ========================= */
  --ngla-font-serif: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --ngla-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  --ngla-font-mono: "Inter Tight", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* =========================
     FONT WEIGHTS (Approved)
     ========================= */
  /* Playfair Display */
  --ngla-serif-regular: 400;
  --ngla-serif-medium: 500;   /* PRIMARY BRAND DEFAULT */
  --ngla-serif-semibold: 600; /* LIMITED */
  --ngla-serif-bold: 700;     /* EXCEPTIONAL ONLY */

  /* Inter */
  --ngla-sans-regular: 400;
  --ngla-sans-medium: 500;
  --ngla-sans-semibold: 600;

  /* Inter Tight */
  --ngla-mono-regular: 400;
  --ngla-mono-medium: 500;
  --ngla-mono-semibold: 600;

  /* =========================
     LETTER SPACING (Tracking)
     ========================= */
  --ngla-track-serif-uppercase: -0.01em;
  --ngla-track-serif-default: 0em;
  --ngla-track-sans-default: -0.01em;
  --ngla-track-mono-default: -0.02em;

  /* =========================
     LINE HEIGHTS
     ========================= */
  --ngla-lh-tight: 1.05;
  --ngla-lh-title: 1.10;
  --ngla-lh-body: 1.70;
  --ngla-lh-editorial: 1.85;

  /* =========================
     TYPE SCALE (px)
     ========================= */
  --ngla-size-wordmark: 84px;
  --ngla-size-hero: 52px;
  --ngla-size-h2: 34px;
  --ngla-size-h3: 26px;
  --ngla-size-body: 17px;
  --ngla-size-small: 15px;
  --ngla-size-micro: 13px;

  /* =========================
     SPACING SCALE
     ========================= */
  --ngla-space-xs: 4px;
  --ngla-space-sm: 8px;
  --ngla-space-md: 16px;
  --ngla-space-lg: 32px;
  --ngla-space-xl: 64px;
  --ngla-space-2xl: 128px;

  /* =========================
     GRID
     ========================= */
  --ngla-container-max: 1200px;
  --ngla-container-padding: 20px;

  /* =========================
     BREAKPOINTS
     ========================= */
  --ngla-bp-sm: 640px;
  --ngla-bp-md: 768px;
  --ngla-bp-lg: 1024px;
  --ngla-bp-xl: 1280px;

  /* =========================
     COLORS - Primary
     ========================= */
  --ngla-black: #000000;
  --ngla-white: #FFFFFF;
  --ngla-gray: #808080;

  /* =========================
     COLORS - Functional
     ========================= */
  --ngla-green: #00FF00;
  --ngla-red: #FF0000;
}

/* =========================
   THEME VARIABLES
   Dark mode (default)
   ========================= */
:root[data-theme="dark"] {
  --bg: var(--ngla-black);
  --text: var(--ngla-white);
  --text-secondary: var(--ngla-gray);
  --border: #333333;
}

/* Light mode */
:root[data-theme="light"] {
  --bg: var(--ngla-white);
  --text: var(--ngla-black);
  --text-secondary: var(--ngla-gray);
  --border: #E0E0E0;
}

/* =========================
   TRANSITIONS (Minimal)
   ========================= */
:root {
  --transition-fast: 50ms ease;
  --transition-base: 100ms ease;
}