/* ==========================================================================
   TRIPLEMETER DESIGN TOKENS
   Single source of truth for all brand colors, typography, and spacing.
   Import this file first in every document.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------
     BRAND COLORS
  ------------------------- */
  --color-orange:          #E8531D;
  --color-teal:            #1A7E6E;
  --color-teal-dark:       #0F5C50;

  /* -------------------------
     UI COLORS
  ------------------------- */
  --color-body:            #374151;
  --color-muted:           #6B7280;
  --color-bg:              #FFFFFF;
  --color-surface:         #F8F9FA;
  --color-border:          #E5E7EB;

  /* -------------------------
     STATUS COLORS
  ------------------------- */
  --color-pending:         #F59E0B;
  --color-progress:        #3B82F6;
  --color-error:           #EF4444;
  --color-success:         #1A7E6E;

  /* -------------------------
     TYPOGRAPHY
  ------------------------- */
  --font-display:          'Barlow Condensed', sans-serif;
  --font-body:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:               11px;
  --text-sm:               13px;
  --text-base:             15px;
  --text-lg:               18px;
  --text-xl:               22px;
  --text-2xl:              28px;
  --text-3xl:              36px;
  --text-4xl:              48px;
  --text-5xl:              64px;
  --text-hero:             80px;

  --leading-tight:         1.15;
  --leading-snug:          1.3;
  --leading-normal:        1.5;
  --leading-relaxed:       1.65;

  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.05em;
  --tracking-wider:        0.1em;

  /* -------------------------
     SPACING (8px base unit)
  ------------------------- */
  --space-1:               8px;
  --space-2:               16px;
  --space-3:               24px;
  --space-4:               32px;
  --space-5:               40px;
  --space-6:               48px;
  --space-8:               64px;
  --space-10:              80px;
  --space-12:              96px;
  --space-16:              128px;

  /* -------------------------
     BORDER RADIUS
  ------------------------- */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-pill:           24px;
  --radius-full:           9999px;

  /* -------------------------
     SHADOWS
  ------------------------- */
  --shadow-sm:             0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:             0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:             0 10px 30px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-card:           0 2px 8px rgba(26, 126, 110, 0.08);

  /* -------------------------
     LAYOUT
  ------------------------- */
  --page-width:            1200px;
  --slide-width:           1280px;
  --slide-height:          720px;
  --onepager-width:        816px;   /* US Letter at 96dpi */
  --doc-width:             760px;
  --gutter:                24px;
  --margin-page:           48px;

  /* -------------------------
     TRANSITIONS
  ------------------------- */
  --ease-out:              cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:           cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast:         150ms;
  --duration-normal:       250ms;
}