/* ─────────────────────────────────────────────────────────────
   UPPIPE DESIGN SYSTEM · v1.0 · 2026
   Tokens for colors, type, spacing, radii, shadows, gradients.
   ─────────────────────────────────────────────────────────────
   IMPORT THIS FIRST, then your component CSS.
   All brand fonts (Syne, Montserrat, JetBrains Mono) are wired
   from local files in /fonts. No Google Fonts dependency.
   ───────────────────────────────────────────────────────────── */

/* ═══ SYNE — variable axis 400–800 + static fallbacks ═══ */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Syne-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Syne-VariableFont_wght.ttf') format('truetype');
}
@font-face { font-family:'Syne'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Syne-Regular.ttf') format('truetype'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Syne-Medium.ttf') format('truetype'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Syne-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Syne-Bold.ttf') format('truetype'); }
@font-face { font-family:'Syne'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Syne-ExtraBold.ttf') format('truetype'); }

/* ═══ MONTSERRAT — variable axis 100–900 (both upright + italic) ═══ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}
/* Static upright fallbacks */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:100; font-display:swap; src:url('fonts/Montserrat-Thin.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Montserrat-Medium.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Montserrat-Bold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Montserrat-Black.ttf') format('truetype'); }
/* Static italic fallbacks */
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:100; font-display:swap; src:url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:200; font-display:swap; src:url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/Montserrat-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Montserrat-Italic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); }

/* ═══ JETBRAINS MONO — variable axis 100–800 (both upright + italic) ═══ */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
}
/* Static upright fallbacks */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100; font-display:swap; src:url('fonts/JetBrainsMono-Thin.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:200; font-display:swap; src:url('fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/JetBrainsMono-Light.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/JetBrainsMono-Medium.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/JetBrainsMono-Bold.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); }
/* Static italic fallbacks */
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:100; font-display:swap; src:url('fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:200; font-display:swap; src:url('fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/JetBrainsMono-Italic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); }

:root {

  /* ═══ COLOR — BRAND PRIMARIES ═══ */
  --uppipe-cobalt:        #1A56FF;   /* Primary. Logo, CTA, links, active nav. Most-used color. */
  --uppipe-cobalt-deep:   #0D3FBF;   /* Hover state for cobalt. Headlines on pastel/cream. */
  --uppipe-cobalt-navy:   #082BAA;   /* Pressed/active state. */
  --uppipe-cobalt-mid:    #C5D8FF;   /* Blue borders, dividers. */
  --uppipe-cobalt-tint:   #E8EFFE;   /* Info backgrounds, selected rows, tag bg. */

  /* ═══ COLOR — BRAND BACKGROUND CANVAS ═══ */
  --uppipe-cream:         #FDFBF7;   /* Default warm page background. First-class. */
  --uppipe-white:         #FFFFFF;   /* Card surfaces. */
  --uppipe-surface:       #F4F4F2;   /* Subtle hover / input bg. */

  /* ═══ COLOR — HIGH-ENERGY ACCENT ═══ */
  /* RULE: Lime appears ONCE per surface. Never twice. Never as text. */
  --uppipe-lime:          #C8FF00;   /* Neon Lime accent. Pill CTAs in marketing, lock-up on dark. */
  --uppipe-lime-mid:      #A8D900;   /* Decorative ribbons / chips. */
  --uppipe-lime-dark:     #8CB800;   /* Lime on light backgrounds (text-safe-ish, label use). */
  --uppipe-lime-tint:     #EFFFB0;   /* Lime tint background, soft highlights. */

  /* ═══ COLOR — AI / TECH DARK ═══ */
  /* RULE: Dark Cobalt only for AI feature surfaces, manifesto, OOH dark variant. */
  --uppipe-dark:          #0A0C1C;   /* The dark canvas. */
  --uppipe-dark-2:        #161A38;   /* Mid-tone for the dark gradient. */
  --uppipe-dark-text:     #1A1A2E;   /* Display text on lime / mesh / pastel. */

  /* ═══ COLOR — PASTEL (CAMPAIGN / ADS ONLY) ═══ */
  /* RULE: Never as a UI surface in the app. Live in ads, social, email headers. */
  --uppipe-pastel-pink:   #F5C6D8;
  --uppipe-pastel-blush:  #FDE8F1;
  --uppipe-pastel-sky:    #E8F0FF;
  --uppipe-pastel-violet: #B8AAFF;   /* Mesh gradient stop only — not a UI color. */
  --uppipe-mid-blue:      #5B8BFF;   /* Mesh gradient stop only — not a UI color. */

  /* ═══ COLOR — NEUTRAL TEXT ═══ */
  --uppipe-fg-1:          #2D2D2D;   /* Primary body / dark gray. */
  --uppipe-fg-2:          #6B6B6B;   /* Secondary text, captions. */
  --uppipe-fg-3:          #AFAFAF;   /* Tertiary, placeholder, muted labels. */
  --uppipe-border:        #E8E8E8;   /* Card borders, dividers. */
  --uppipe-border-soft:   #F0F0EC;   /* Internal table dividers. */

  /* ═══ COLOR — SEMANTIC (APP STATUS) ═══ */
  --uppipe-success:       #10B981;
  --uppipe-success-tint:  #D1FAE5;
  --uppipe-warning:       #FCD34D;
  --uppipe-warning-tint:  #FEF3C7;
  --uppipe-danger:        #E9756B;
  --uppipe-danger-tint:   #FEE2E2;

  /* ═══ COLOR — SEMANTIC TOKENS (use these, not raw color refs) ═══ */
  --fg-display:           var(--uppipe-cobalt-deep);    /* Big Syne headlines on light bg */
  --fg-default:           var(--uppipe-fg-1);
  --fg-muted:             var(--uppipe-fg-2);
  --fg-subtle:            var(--uppipe-fg-3);
  --fg-link:              var(--uppipe-cobalt);
  --fg-on-dark:           var(--uppipe-cream);
  --fg-on-lime:           var(--uppipe-dark-text);
  --bg-page:              var(--uppipe-cream);
  --bg-card:              var(--uppipe-white);


  /* ═══ TYPOGRAPHY — FONT FAMILIES ═══ */
  --font-display:  'Syne', 'Inter', system-ui, sans-serif;
  --font-body:     'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* RULE: Syne for ALL headlines & display. Montserrat for ALL body, labels, nav, buttons.
     JetBrains Mono for ALL numbers, metrics, timestamps, code tags.
     NEVER swap these roles. */


  /* ═══ TYPOGRAPHY — SIZE TOKENS ═══ */
  --fs-impact:     clamp(56px, 8vw, 120px);  /* @kind font */ /* Tier 0 — Syne 800 ALL CAPS billboard/hero */
  --fs-display:    clamp(40px, 5vw, 56px);   /* @kind font */ /* Tier 1 — Syne 800 mixed case, hero on web */
  --fs-h1:         28px;                      /* Tier 2 — Syne 800 page title */
  --fs-h2:         20px;                      /* Tier 3 — Syne 700 section head */
  --fs-h3:         15px;                      /* Tier 4 — Syne 700 card title */
  --fs-label:      9px;                       /* Tier 5 — Montserrat 700 caps label */
  --fs-body:       13px;                      /* Tier 6 — Montserrat 400 body */
  --fs-body-lg:    15px;                      /* Marketing body / lead paragraph */
  --fs-btn:        13px;                      /* Tier 7 — Montserrat 700–900 button */
  --fs-metric-lg:  42px;                      /* Tier 8 — JetBrains Mono 700, presentations */
  --fs-metric:     28px;                      /* Tier 8 — JetBrains Mono 700, app KPI cards */
  --fs-caption:    10px;                      /* Tier 9 — JetBrains Mono 400 captions */

  --lh-impact:     0.9;  /* @kind font */
  --lh-display:    1.05; /* @kind font */
  --lh-tight:      1.15; /* @kind font */
  --lh-snug:       1.3;  /* @kind font */
  --lh-normal:     1.6;  /* @kind font */
  --lh-relaxed:    1.7;  /* @kind font */

  --ls-impact:     -0.04em; /* @kind font */
  --ls-display:    -0.03em; /* @kind font */
  --ls-h1:         -0.02em; /* @kind font */
  --ls-h2:         -0.01em; /* @kind font */
  --ls-label:      0.14em;  /* @kind font */
  --ls-button-caps:0.04em;  /* @kind font */


  /* ═══ SPACING SCALE (4-pt grid) ═══ */
  --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-14:  56px;
  --space-16:  64px;
  --space-20:  80px;


  /* ═══ RADII ═══ */
  --radius-xs:    4px;    /* tag pills, code blocks */
  --radius-sm:    7px;    /* small icon container, 24px icons */
  --radius-md:    10px;   /* medium icon container, input fields */
  --radius-lg:    14px;   /* large icon, cards in app */
  --radius-xl:    16px;   /* feature cards, hero stat cards */
  --radius-2xl:   20px;   /* glass cards, big sections, marketing cards */
  --radius-3xl:   24px;   /* hero containers */
  --radius-pill:  100px;  /* ALL buttons, all chips, all badges */


  /* ═══ ELEVATION / SHADOWS ═══ */
  --shadow-xs:    0 1px 2px rgba(13, 63, 191, 0.04);
  --shadow-sm:    0 2px 8px rgba(13, 63, 191, 0.06);
  --shadow-md:    0 4px 20px rgba(26, 86, 255, 0.06);    /* nav glass */
  --shadow-lg:    0 8px 32px rgba(26, 86, 255, 0.08);    /* glass cards on gradient */
  --shadow-lime:  0 8px 32px rgba(140, 184, 0, 0.15);    /* cards on lime burst */
  --shadow-dark:  0 12px 40px rgba(10, 12, 28, 0.20);    /* cards on dark cobalt */

  /* Inset highlight applied on top of glass cards */
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.95);


  /* ═══ MOTION ═══ */
  /* Uppipe motion vocabulary: ease-out, short, no bounce. Never spring physics.
     Hover state changes color (cobalt → cobalt-deep) or opacity (0.85). */
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */


  /* ═══ GRADIENTS — 6 canonical modes ═══ */
  --bg-hero-mesh:
    radial-gradient(ellipse 72% 64% at 14% 88%, #F5C6D8 0%, transparent 62%),
    radial-gradient(ellipse 58% 52% at 86% 18%, #C8FF00 0%, transparent 58%),
    radial-gradient(ellipse 62% 56% at 52% 52%, #B8AAFF 0%, transparent 64%),
    radial-gradient(ellipse 52% 46% at 82% 78%, #5B8BFF 0%, transparent 58%),
    linear-gradient(138deg, #F5C6D8 0%, #C4AAFF 38%, #4870FF 70%, #C8FF00 100%);

  --bg-deck:
    radial-gradient(ellipse 64% 72% at 8% 18%, #F5C6D8 0%, transparent 54%),
    radial-gradient(ellipse 52% 62% at 92% 8%, #C8FF00 0%, transparent 50%),
    radial-gradient(ellipse 72% 52% at 52% 92%, #B8AAFF 0%, transparent 58%),
    radial-gradient(ellipse 46% 46% at 76% 58%, #5B8BFF 0%, transparent 52%),
    linear-gradient(162deg, #F8C8DC 0%, #C8AAFF 32%, #6B8CFF 64%, #C8FF00 100%);

  --bg-dark-cobalt:
    radial-gradient(ellipse 52% 62% at 92% 8%, rgba(26, 86, 255, 0.38) 0%, transparent 54%),
    radial-gradient(ellipse 42% 42% at 8% 92%, rgba(200, 255, 0, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse 62% 42% at 50% 52%, rgba(139, 92, 246, 0.14) 0%, transparent 58%),
    linear-gradient(138deg, #0A0C1C 0%, #161A38 52%, #0D3FBF 100%);

  --bg-lime-burst:
    radial-gradient(ellipse 68% 68% at 78% 18%, #C8FF00 0%, transparent 54%),
    radial-gradient(ellipse 52% 52% at 18% 82%, #E8EFFE 0%, transparent 54%),
    linear-gradient(148deg, #E8EFFE 0%, #EEFFC0 52%, #C8FF00 100%);

  --bg-pastel:
    radial-gradient(ellipse 72% 52% at 28% 72%, #F5C6D8 0%, transparent 58%),
    radial-gradient(ellipse 52% 62% at 82% 28%, #E0ECFF 0%, transparent 54%),
    radial-gradient(ellipse 48% 48% at 55% 45%, rgba(184, 170, 255, 0.35) 0%, transparent 55%),
    linear-gradient(128deg, #FDE8F1 0%, #F5C6D8 38%, #E8EFFE 100%);

  --bg-clean-data:
    linear-gradient(180deg, #FFFFFF 0%, #F6F6FB 100%);


  /* ═══ GLASS-CARD RECIPE ═══ */
  /* Apply on top of a gradient. Standard for marketing/web cards. */
  --glass-bg:           rgba(255, 255, 255, 0.55);
  --glass-bg-strong:    rgba(255, 255, 255, 0.70);
  --glass-bg-on-lime:   rgba(255, 255, 255, 0.60);
  --glass-border:       1px solid rgba(255, 255, 255, 0.80); /* @kind other */
  --glass-blur:         blur(20px); /* @kind other */
}


/* ═══ TYPOGRAPHY — SEMANTIC ELEMENT DEFAULTS ═══ */
/* Use these classes directly OR scope to your component. */

.u-impact,
h1.u-impact {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-impact);
  line-height: var(--lh-impact);
  letter-spacing: var(--ls-impact);
  text-transform: uppercase;
}

.u-display,
h1.u-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-display);
}

.u-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--fg-default);
}

.u-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h2);
  color: var(--fg-default);
}

.u-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--fg-default);
}

.u-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.u-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.u-body strong { font-weight: 700; color: var(--fg-default); }

.u-btn-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: 0.01em;
}

.u-btn-label-caps {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-button-caps);
  text-transform: uppercase;
}

.u-metric {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-metric);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--uppipe-cobalt);
}

.u-metric-lg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-metric-lg);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--uppipe-cobalt);
}

.u-caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}