/* Supercompute Design System — colors_and_type.css
 * Token layer extracted from public/sc.css.
 * Two layers: raw palette/type tokens, then semantic aliases.
 */

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

@font-face {
    font-family: 'Phosphate';
    /* Real Phosphate Solid (Apple/International TypeFounders cut, extracted from
       the macOS system Phosphate.ttc) — woff2/woff for the web, ttf fallback,
       and the legacy Red Rooster cut as a last resort. */
    src: url('fonts/Phosphate-Solid.woff2') format('woff2'),
         url('fonts/Phosphate-Solid.woff')  format('woff'),
         url('fonts/Phosphate-Solid.ttf')   format('truetype'),
         url('fonts/PhosphateSolid.ttf')     format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ─── RAW PALETTE ─────────────────────────────────────── */
    --navy:       #0A0E1A;   /* primary dark — sidebar, hero, footer  */
    --navy-2:     #111827;   /* navy elevated                         */
    --navy-3:     #1a2235;   /* navy 3 (cards on dark)                */
    --pink:       #E91E8C;   /* primary brand accent                  */
    --pink-2:     #c4197a;   /* pink hover/press                      */
    --gold:       #FFB800;   /* secondary accent                      */
    --gold-2:     #e6a500;   /* gold pressed                          */
    --cyan:       #00D4FF;   /* data / system signal                  */
    --cyan-2:     #00b8db;   /* cyan pressed                          */
    --violet:     #7c3aed;   /* logo ring + agent gradient stop       */
    --indigo:     #6366f1;   /* category: signal                      */

    --bg:         #F8F4F0;   /* warm cream app surface                */
    --card:       #ffffff;   /* card surface                          */
    --text:       #1a1a2e;   /* primary text                          */
    --muted:      #6b7280;   /* secondary text                        */
    --border:     #e5e7eb;   /* hairline border                       */

    --success:    #16a34a;
    --warning:    #b45309;
    --danger:     #dc2626;
    --green:      #4ade80;   /* on-dark green (status dot)            */

    /* On-dark alphas — sidebar text, glass overlays */
    --white-90:   rgba(255,255,255,.90);
    --white-70:   rgba(255,255,255,.70);
    --white-55:   rgba(255,255,255,.55);
    --white-35:   rgba(255,255,255,.35);
    --white-12:   rgba(255,255,255,.12);
    --white-08:   rgba(255,255,255,.08);
    --white-04:   rgba(255,255,255,.04);

    /* Tinted accent fills (for badge backgrounds) */
    --pink-08:    rgba(233,30,140,.08);
    --pink-12:    rgba(233,30,140,.12);
    --gold-10:    rgba(255,184,0,.10);
    --gold-12:    rgba(255,184,0,.12);
    --cyan-10:    rgba(0,212,255,.10);
    --cyan-12:    rgba(0,212,255,.12);

    /* ─── TYPE ───────────────────────────────────────────── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-display: 'Phosphate', Impact, sans-serif;                  /* brand display face — Phosphate Solid */
    --font-script:  'Caveat', 'Playfair Display', Georgia, serif;     /* italic CTA accent */

    /* Marketing-site palette (real supercompute.io)
     * The site uses a warmer brass-gold, deep navy, and mono-blue body. */
    --site-bg:      #0a1330;          /* deep navy, slight blue cast */
    --site-grid:    rgba(255,255,255,.035);
    --gold-warm:    #C9A33A;          /* brass — heading accent + primary CTA */
    --gold-warm-2: #b8902c;
    --cream:        #F4ECD8;          /* off-white display text */
    --mono-blue:    #6FA3E5;          /* body monospace */
    --hud-yellow:   #E0BE3F;          /* HUD corner brackets */

    --fs-9:   9px;     --fs-10: 10px;   --fs-11: 11px;
    --fs-12:  12px;    --fs-13: 13px;   --fs-14: 14px;   /* body default */
    --fs-base: 14px;
    --fs-h3:  1.1rem;  /* 17.6 */
    --fs-h2:  1.35rem; /* 21.6 — page header */
    --fs-h1:  1.6rem;  /* 25.6 — section hero  */
    --fs-display: clamp(1.9rem, 4.5vw, 3.4rem);

    --fw-400: 400; --fw-500: 500; --fw-600: 600;
    --fw-700: 700; --fw-800: 800; --fw-900: 900;

    --lh-tight: 1.08;
    --lh-snug:  1.4;
    --lh-body:  1.6;
    --lh-prose: 1.8;

    --tr-eyebrow: 1.5px;   /* tracked uppercase eyebrows */
    --tr-display: -.5px;

    /* ─── SPACING ────────────────────────────────────────── */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;
    --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
    --s-8: 32px;  --s-10: 40px; --s-12: 48px;
    --nav-w: 220px;
    --topbar-h: 52px;

    /* ─── RADII ──────────────────────────────────────────── */
    --r-xs: 6px;       /* chips, category tags          */
    --r-sm: 8px;       /* inputs, small buttons         */
    --r-md: 10px;      /* small cards, alerts           */
    --r-lg: 12px;      /* default card                  */
    --r-xl: 14px;      /* service cards                 */
    --r-2xl: 16px;     /* token hero                    */
    --r-3xl: 20px;     /* modal, auth                   */
    --r-pill: 999px;

    /* ─── SHADOWS ────────────────────────────────────────── */
    --sh-card-hover:    0 4px 16px rgba(233,30,140,.08);
    --sh-stat-hover:    0 2px 8px rgba(0,0,0,.06);
    --sh-blog-hover:    0 8px 24px rgba(233,30,140,.08);
    --sh-service-hover: 0 12px 32px rgba(233,30,140,.10);
    --sh-modal:         0 24px 80px rgba(0,0,0,.30);
    --sh-glow-green:    0 0 6px rgba(74,222,128,.50);
    --sh-glow-gold:     0 0 6px rgba(255,184,0,.40);

    /* ─── MOTION ─────────────────────────────────────────── */
    --t-fast:   .15s ease;
    --t-base:   .20s ease;
    --t-slow:   .60s ease;
    --t-spring: 1.2s cubic-bezier(.34, 1.56, .64, 1);

    /* ─── SIGNATURE GRADIENTS ───────────────────────────── */
    --grad-brand:   linear-gradient(135deg, var(--pink), var(--gold));
    --grad-agent:   linear-gradient(135deg, var(--violet), var(--cyan));
    --grad-trade:   linear-gradient(135deg, var(--cyan), var(--pink));
    --grad-pink:    linear-gradient(135deg, var(--pink), var(--pink-2));
    --grad-progress: linear-gradient(90deg, var(--pink), var(--gold));
    --grad-hero-quanta: linear-gradient(135deg, var(--navy) 0%, #14042e 100%);
    --grad-blob-pink: radial-gradient(circle, rgba(233,30,140,.18) 0%, transparent 70%);
    --grad-blob-cyan: radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%);
}

/* ─── SEMANTIC ELEMENT DEFAULTS ──────────────────────────── */
html { font-family: var(--font-sans); }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1 { font-size: var(--fs-h1);    font-weight: var(--fw-800); line-height: var(--lh-snug); color: var(--text); }
h2 { font-size: var(--fs-h2);    font-weight: var(--fw-800); line-height: var(--lh-snug); color: var(--text); }
h3 { font-size: var(--fs-h3);    font-weight: var(--fw-800); line-height: var(--lh-snug); color: var(--text); }
.display { font-size: var(--fs-display); font-weight: var(--fw-900); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.eyebrow {
    font-size: var(--fs-10); font-weight: var(--fw-700);
    letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
    color: var(--muted);
}
.eyebrow.pink { color: var(--pink); }
.eyebrow.cyan { color: var(--cyan); }
p     { font-size: var(--fs-13); line-height: var(--lh-prose); color: var(--text); text-wrap: pretty; }
small { font-size: var(--fs-11); color: var(--muted); }
code  { font-family: var(--font-mono); font-size: .92em; background: var(--white-08); padding: .1em .4em; border-radius: var(--r-xs); }

/* Brand wordmark */
.brand-wordmark {
    font-weight: var(--fw-900); letter-spacing: 1.2px;
    text-transform: uppercase;
}