/* ==========================================================================
   REC VHS Camera - Design System Tokens
   Ported from iOS DSColors, DSTypography, DSSpacing
   Extended with Micrographic Design Tokens
   ========================================================================== */

:root {
  /* ==========================================================================
     Colors
     ========================================================================== */

  /* Backgrounds */
  --color-background: #000000;
  --color-surface: rgba(255, 255, 255, 0.08);
  --color-surface-elevated: rgba(255, 255, 255, 0.12);
  --color-surface-highlight: rgba(255, 255, 255, 0.18);
  --color-surface-panel: rgba(0, 0, 0, 0.75);

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.5);
  --color-text-tertiary: rgba(255, 255, 255, 0.35);
  --color-text-disabled: rgba(255, 255, 255, 0.25);

  /* Borders */
  --color-border-default: rgba(255, 255, 255, 0.15);
  --color-border-active: rgba(255, 255, 255, 0.4);
  --color-border-selected: rgba(255, 255, 255, 0.8);
  --color-border-emphasized: #FFFFFF;

  /* Accent (Amber/Orange) */
  --color-accent: rgb(255, 140, 0);
  --color-accent-subtle: rgba(255, 140, 0, 0.2);
  --color-accent-muted: rgba(255, 140, 0, 0.5);

  /* Amber Opacity Scale */
  --amber-100: rgba(255, 140, 0, 1);
  --amber-80: rgba(255, 140, 0, 0.8);
  --amber-60: rgba(255, 140, 0, 0.6);
  --amber-40: rgba(255, 140, 0, 0.4);
  --amber-20: rgba(255, 140, 0, 0.2);
  --amber-10: rgba(255, 140, 0, 0.1);
  --amber-05: rgba(255, 140, 0, 0.05);

  /* White Opacity Scale */
  --white-100: rgba(255, 255, 255, 1);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-03: rgba(255, 255, 255, 0.03);

  /* Semantic */
  --color-recording: rgb(255, 140, 0);
  --color-success: rgb(77, 204, 77);

  /* Overlay */
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-scrim-light: rgba(0, 0, 0, 0.4);

  /* ==========================================================================
     Typography
     ========================================================================== */

  /* Font Families */
  --font-display: 'JetBrains Mono', 'Consolas', monospace;
  --font-body: 'JetBrains Mono', 'Consolas', monospace;
  --font-vcr: 'VCR OSD Mono', monospace;

  /* Font Sizes */
  --text-display-large: 3.5rem;    /* 56px - Hero title */
  --text-display-medium: 2rem;     /* 32px - Section headers */
  --text-display-small: 1.25rem;   /* 20px - Card titles */
  --text-display-tiny: 0.875rem;   /* 14px - Labels */
  --text-display-micro: 0.75rem;   /* 12px - Small labels */

  --text-body-large: 1.125rem;     /* 18px */
  --text-body-medium: 1rem;        /* 16px */
  --text-body-small: 0.875rem;     /* 14px */
  --text-caption: 0.75rem;         /* 12px */

  /* Micrographic Text Sizes */
  --text-micro: 0.625rem;          /* 10px - spec labels, cert marks */
  --text-nano: 0.5rem;             /* 8px - dense texture text */

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;
  --tracking-ultra: 0.3em;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ==========================================================================
     Spacing
     ========================================================================== */

  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-section: 80px;
  --space-hero: 120px;

  /* Micrographic spacing */
  --space-micro: 1px;
  --space-tick: 3px;
  --space-data-strip: 6px;

  /* Grid gutters */
  --gutter-dense: 1px;
  --gutter-spec: 8px;
  --gutter-panel: 16px;

  /* ==========================================================================
     Layout
     ========================================================================== */

  --max-width: 1200px;
  --max-width-content: 800px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* ==========================================================================
     Transitions
     ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */

  --z-base: 0;
  --z-above: 10;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* ==========================================================================
   Responsive Typography Scale
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --text-display-large: 2.5rem;   /* 40px */
    --text-display-medium: 1.5rem;  /* 24px */
    --text-display-small: 1.125rem; /* 18px */
    --text-micro: 0.5625rem;        /* 9px */
    --space-section: 60px;
    --space-hero: 80px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-display-large: 2rem;     /* 32px */
    --text-display-medium: 1.25rem; /* 20px */
    --space-section: 48px;
    --space-hero: 60px;
  }
}