/* ============================================================
   Block Gemini — Colors & Type Foundation
   Source of truth: blockgemini-website (src/app/globals.css) + Figma
   ============================================================ */

/* ---- Fonts ----------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/InstrumentSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
}

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */

  /* Primary — Block Gemini electric blue */
  --bg-primary:        #0055FF;   /* CTAs, links, brand accent */
  --bg-primary-hover:  #0044CC;   /* hover/press */
  --bg-primary-bright: #0169F8;   /* alt highlight (figma) */
  --bg-primary-deep:   #0033CC;   /* deep brand */
  --bg-primary-violet: #1900FF;   /* gradient endpoint */

  /* Dark — navy ink */
  --bg-dark:           #001233;   /* primary surface dark, headings on light */
  --bg-dark-hover:     #0A1D4A;
  --bg-dark-elevated:  #101C3D;
  --bg-ink:            #0B0A10;   /* near-black panels */
  --bg-ink-2:          #0A0A0A;

  /* Neutrals — light side */
  --bg-white:          #FFFFFF;
  --bg-paper:          #F7F7F7;   /* hover bg, surfaces */
  --bg-mist:           #EEEEEF;
  --bg-fog:            #E2EBF7;
  --bg-border:         #E2E8F0;
  --bg-border-strong:  #CBD5E1;

  /* Neutrals — dark mode */
  --bg-surface-1:      #0E1830;   /* panel */
  --bg-surface-2:      #142442;
  --bg-surface-3:      #1B2D52;
  --bg-line-dark:      rgba(255,255,255,0.10);
  --bg-line-dark-2:    rgba(255,255,255,0.20);

  /* Text */
  --bg-heading:        #001233;   /* on light */
  --bg-body:           #5A6B8A;   /* on light, muted */
  --bg-muted:          #6B7280;
  --bg-text-soft:      #5C616A;
  --bg-on-dark:        #FFFFFF;
  --bg-on-dark-muted:  #B8C2D9;
  --bg-on-dark-faint:  rgba(255,255,255,0.60);

  /* Status — operational accents (mission-control palette) */
  --bg-success:        #5EFFA4;   /* live / active — figma minty-green */
  --bg-success-deep:   #1FCB7A;
  --bg-success-faint:  rgba(94,255,164,0.16);
  --bg-warning:        #FFB020;
  --bg-warning-deep:   #D98A00;
  --bg-warning-faint:  rgba(255,176,32,0.16);
  --bg-danger:         #FF4D4F;
  --bg-danger-deep:    #C8242B;
  --bg-danger-faint:   rgba(255,77,79,0.16);
  --bg-info:           #0099FF;   /* system / action */
  --bg-info-faint:     rgba(0,153,255,0.20);

  /* Accent (figma orange callout — used sparingly) */
  --bg-orange:         #F15A24;
  --bg-orange-soft:    #FF8F4A;

  /* ============================================================
     SEMANTIC TOKENS — light surface (default)
     ============================================================ */
  --fg-1:              var(--bg-heading);    /* primary text */
  --fg-2:              var(--bg-body);       /* secondary */
  --fg-3:              var(--bg-muted);      /* tertiary / labels */
  --fg-link:           var(--bg-primary);
  --fg-on-accent:      #FFFFFF;

  --bg-1:              var(--bg-white);      /* primary surface */
  --bg-2:              var(--bg-paper);      /* alt surface */
  --bg-3:              var(--bg-fog);        /* tinted info surface */
  --bg-accent:         var(--bg-primary);
  --bg-accent-hover:   var(--bg-primary-hover);

  --border-1:          var(--bg-border);
  --border-2:          var(--bg-border-strong);
  --divider:           var(--bg-border);

  /* ============================================================
     GRADIENTS — Brand "Hollywood AI"
     ============================================================ */
  --grad-brand:        linear-gradient(13.52deg, #FFFFFF 3.22%, #006AFF 50.22%, #1900FF 103.66%);
  --grad-brand-soft:   linear-gradient(135deg, #0055FF 0%, #1900FF 100%);
  --grad-brand-radial: radial-gradient(60% 100% at 50% 0%, rgba(0,153,255,0.45) 0%, rgba(0,18,51,0) 70%);
  --grad-night:        linear-gradient(180deg, #001233 0%, #0B0A10 100%);
  --grad-aurora:       linear-gradient(120deg, rgba(94,255,164,0.20) 0%, rgba(0,153,255,0.20) 50%, rgba(25,0,255,0.20) 100%);
  --grad-mesh:         radial-gradient(50% 50% at 20% 30%, rgba(0,85,255,0.35) 0%, transparent 60%),
                       radial-gradient(40% 40% at 80% 20%, rgba(94,255,164,0.18) 0%, transparent 60%),
                       radial-gradient(60% 60% at 60% 90%, rgba(25,0,255,0.30) 0%, transparent 60%);

  /* ============================================================
     RADII — subtle, technical (NOT playful)
     ============================================================ */
  --radius-0:          0px;          /* default — Block Gemini buttons are square */
  --radius-1:          2px;
  --radius-2:          4px;
  --radius-3:          6px;
  --radius-4:          8px;          /* small cards, chips */
  --radius-5:          12px;         /* cards */
  --radius-6:          16px;         /* media cards */
  --radius-7:          24px;         /* feature cards */
  --radius-pill:       9999px;

  /* ============================================================
     SHADOWS — minimal, blue-tinted
     ============================================================ */
  --shadow-xs:         0 1px 2px rgba(0,18,51,0.04);
  --shadow-sm:         0 2px 6px rgba(0,18,51,0.06);
  --shadow-md:         0 4px 14px rgba(0,18,51,0.08);
  --shadow-lg:         0 12px 32px rgba(0,18,51,0.10);
  --shadow-blue:       0 4px 20px -2px rgba(0,70,230,0.08), 0 8px 32px -4px rgba(0,70,230,0.06);
  --shadow-glow:       0 0 0 1px rgba(0,85,255,0.30), 0 0 30px rgba(0,85,255,0.30);
  --shadow-glow-cyan:  0 0 30px rgba(0,153,255,0.45);
  --shadow-glow-mint:  0 0 30px rgba(94,255,164,0.45);
  --shadow-inner-line: inset 0 0 0 1px rgba(255,255,255,0.10);

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 100px;
  --space-13: 140px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --layout-max-width:   1520px;
  --layout-max-wide:    1600px;
  --layout-padding-x:   24px;
  --layout-grid-gap:    24px;
  --layout-prose-min:   37.5rem;
  --layout-prose-max:   50rem;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard:     cubic-bezier(.2, .8, .2, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant:       80ms;
  --dur-fast:          160ms;
  --dur-base:          240ms;
  --dur-slow:          400ms;
  --dur-cinematic:     800ms;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:  "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* Type scale (base 16px) — keeps Figma sizes */
  --fs-display-1: 64px;
  --fs-display-2: 48px;
  --fs-display-3: 44px;
  --fs-h1:        36px;
  --fs-h2:        28px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-lead:      18px;
  --fs-body:      14px;
  --fs-body-lg:   15px;
  --fs-body-md:   16px;
  --fs-label:     12px;
  --fs-micro:     11px;

  --lh-display:   1.05;
  --lh-tight:     1.15;
  --lh-body:      1.45;
  --lh-relaxed:   1.6;

  --ls-tight:     -0.025em;
  --ls-normal:    0em;
  --ls-wide:      0.04em;
  --ls-eyebrow:   0.08em;
}

/* ============================================================
   Base + semantic typography rules
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display, h1.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-2);
  line-height: 1.15;
  letter-spacing: -1.2px;
  color: var(--fg-1);
}
h2, .h2 {
  font-weight: 400;
  font-size: var(--fs-display-3);
  line-height: 50.6px;
  letter-spacing: -1.1px;
  color: var(--fg-1);
}
h3, .h3 {
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--fg-1);
}
h4, .h4 {
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.55;
  color: var(--fg-1);
}

p, .body {
  font-size: var(--fs-body);
  line-height: 22.75px;
  color: var(--fg-2);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 28px;
  font-weight: 500;
  color: var(--fg-1);
}

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bg-primary);
  text-transform: none; /* BG keeps eyebrows sentence-case */
}

.label {
  font-size: var(--fs-label);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* utility: status pill colors */
.status-active   { color: var(--bg-success-deep); background: var(--bg-success-faint); }
.status-warning  { color: var(--bg-warning-deep); background: var(--bg-warning-faint); }
.status-error    { color: var(--bg-danger-deep);  background: var(--bg-danger-faint); }
.status-info     { color: var(--bg-info);         background: var(--bg-info-faint); }
.status-idle     { color: var(--bg-text-soft);    background: var(--bg-paper); }