/* ============================================
   JUMPER FLOW — Colors & Type
   Source: thebrunomaya/jumperflow (tailwind.config.ts + src/index.css)
   Plus: public/decks/identities/jumper/design-system.md
   ============================================ */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: 'Haffer';
  src: url('./fonts/HafferVF.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Haffer';
  src: url('./fonts/HafferItalicVF.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Color tokens ---------- */
:root {
  /* Brand (used sparingly — rule: "Small = solid, Large = gradient") */
  --jumper-orange: #FA4721;        /* Critical actions, key highlights */
  --jumper-purple: #8143A7;        /* Gradient companion */
  --jumper-black:  #000000;
  --jumper-white:  #FFFFFF;

  /* Grays — 90% of interface */
  --jumper-gray-dark:   #181818;
  --jumper-gray-medium: #3E3D40;
  --jumper-gray-light:  #CFCBC8;
  --jumper-subtle:      #6E6B6B;
  --jumper-muted:       #A09D9D;

  /* Semantic — data, alerts */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* Performance (dashboards, decks) */
  --metric-excellent: #2AA876;
  --metric-good:      #3B82F6;
  --metric-warning:   #F59E0B;
  --metric-critical:  #EF4444;

  /* Surfaces — LIGHT */
  --bg:            #FFFFFF;
  --fg:            #21272F;            /* hsl(210 11% 15%) */
  --card-bg:       #F7F7F7;            /* hsl(0 0% 97%) */
  --muted-bg:      #E2E4E9;
  --muted-fg:      #585E6B;
  --border:        #CCD0D7;
  --input-border:  #CCD0D7;
  --ring:          #6B727F;

  /* Status (shadcn HSL) */
  --fg-on-primary: #FFFFFF;

  /* Radius */
  --radius: 0.5rem;                    /* 8px */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-pill: 9999px;

  /* Spacing (deck scale) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 2px rgba(250,71,33,0.35);

  /* Type */
  --font-sans: 'Haffer', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Fluid type (deck scale) */
  --type-body:     clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14–16 */
  --type-detail:   clamp(13px, 1.5vw, 18px);
  --type-h4:       clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --type-h3:       clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --type-h2:       clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);
  --type-h1:       clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --type-subtitle: clamp(18px, 2.5vw, 32px);
  --type-section:  clamp(36px, 5vw, 72px);
  --type-hero:     clamp(48px, 8vw, 120px);
  --type-metric:   clamp(72px, 12vw, 180px);

  /* Motion */
  --ease-jumper: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s ease;
  --t-normal: 0.2s ease;
  --t-slow: 0.3s ease;
}

/* ---------- 3. Dark mode ---------- */
[data-theme="dark"], .dark {
  --bg:            #000000;
  --fg:            #FFFFFF;
  --card-bg:       #171718;            /* hsl(240 3% 9%) */
  --muted-bg:      #171718;
  --muted-fg:      #9BA3B0;
  --border:        #3F3F41;            /* hsl(240 3% 25%) */
  --input-border:  #3F3F41;
  --ring:          #6B727F;
}

/* ---------- 4. Semantic elements ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--weight-semibold) var(--type-h1)/1.2 var(--font-sans); letter-spacing: -0.01em; }
h2 { font: var(--weight-semibold) var(--type-h2)/1.3 var(--font-sans); letter-spacing: -0.005em; }
h3 { font: var(--weight-semibold) var(--type-h3)/1.3 var(--font-sans); }
h4, h5, h6 { font: var(--weight-semibold) var(--type-h4)/1.4 var(--font-sans); }

p    { font-size: var(--type-body); line-height: 1.6; color: var(--fg); }
small,
.caption { font-size: var(--type-detail); color: var(--muted-fg); }

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

/* Deck-scale presets */
.type-hero     { font: var(--weight-black) var(--type-hero)/1.05 var(--font-sans); letter-spacing: -0.02em; }
.type-section  { font: var(--weight-black) var(--type-section)/1.1 var(--font-sans); letter-spacing: -0.02em; }
.type-subtitle { font: var(--weight-regular) var(--type-subtitle)/1.35 var(--font-sans); }
.type-metric   { font: var(--weight-black) var(--type-metric)/1 var(--font-sans); letter-spacing: -0.03em; }

/* Weight utilities (match codebase .font-haffer-*) */
.font-haffer-light    { font-variation-settings: 'wght' 300; }
.font-haffer-medium   { font-variation-settings: 'wght' 500; }
.font-haffer-semibold { font-variation-settings: 'wght' 600; }
.font-haffer-bold     { font-variation-settings: 'wght' 700; }
.font-haffer-black    { font-variation-settings: 'wght' 900; }