/* ============================================================================
   GEЯE SOLUTIONS — Design Foundations
   Colors, typography, spacing, radii, shadows.
   "No hype. Just building."
   ----------------------------------------------------------------------------
   Fonts are loaded from Google Fonts (see @import below). These are NEAREST-
   MATCH substitutes chosen for the brand — no proprietary font files were
   supplied. Swap the families here if brand fonts arrive.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- TYPE FAMILIES ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;   /* headings, hero */
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;   /* paragraphs, UI */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace; /* labels, code, data */

  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Deep space backgrounds (cool near-black navy) */
  --bg-0: #05070E;   /* deepest — page base, behind everything */
  --bg-1: #0A0F1C;   /* primary surface */
  --bg-2: #111829;   /* raised surface / cards */
  --bg-3: #182030;   /* hover / overlay surface */
  --bg-inset: #04060B;/* recessed wells, code blocks */

  /* Foreground (cool whites & grays) */
  --fg-1: #EDF1F8;   /* primary text */
  --fg-2: #A6B2C7;   /* secondary text */
  --fg-3: #6B788F;   /* muted / captions */
  --fg-4: #3E4759;   /* disabled / faint */

  /* Brand accents — cyan / blue / purple */
  --cyan:        #2BD4ED;  /* PRIMARY accent — "Just building." */
  --cyan-bright: #5FE7FB;  /* highlights, glow cores */
  --cyan-deep:   #0E97AE;  /* pressed / shadowed cyan */
  --blue:        #2F6BFF;  /* electric blue — links, secondary accent */
  --blue-deep:   #1B47C2;
  --purple:      #8B6CF6;  /* subtle purple — lightning energy */
  --purple-deep: #5E40C9;

  /* Metallic steel (the coin ring) */
  --steel-1: #CDD6E4;  /* bright edge highlight */
  --steel-2: #8A94A8;  /* mid steel */
  --steel-3: #515B6E;  /* shadowed steel */

  /* Semantic status */
  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #F8718A;

  /* ============================================================
     COLOR — SEMANTIC ROLES
     ============================================================ */
  --color-bg:            var(--bg-0);
  --color-surface:       var(--bg-1);
  --color-surface-raised:var(--bg-2);
  --color-surface-hover: var(--bg-3);

  --color-text:          var(--fg-1);
  --color-text-muted:    var(--fg-2);
  --color-text-subtle:   var(--fg-3);

  --color-accent:        var(--cyan);
  --color-accent-hover:  var(--cyan-bright);
  --color-link:          var(--cyan);

  /* Borders & dividers */
  --border-1: rgba(173, 196, 230, 0.10);  /* hairline */
  --border-2: rgba(173, 196, 230, 0.18);  /* standard */
  --border-3: rgba(173, 196, 230, 0.28);  /* prominent */
  --border-accent: rgba(43, 212, 237, 0.45);

  /* Gradients */
  --grad-accent: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 60%, var(--purple) 120%);
  --grad-accent-soft: linear-gradient(100deg, rgba(43,212,237,0.16), rgba(139,108,246,0.14));
  --grad-text: linear-gradient(92deg, var(--cyan-bright) 0%, var(--blue) 70%);
  --grad-steel: linear-gradient(160deg, var(--steel-1) 0%, var(--steel-2) 45%, var(--steel-3) 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
  /* Radial glow used behind hero/coin */
  --glow-cyan: radial-gradient(circle, rgba(43,212,237,0.30) 0%, rgba(43,212,237,0) 70%);
  --glow-purple: radial-gradient(circle, rgba(139,108,246,0.26) 0%, rgba(139,108,246,0) 70%);

  /* ============================================================
     SPACING SCALE (4px base)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS & GLOWS (dark-UI: elevation reads as glow + depth)
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05);
  --glow-accent: 0 0 0 1px rgba(43,212,237,0.30), 0 0 28px rgba(43,212,237,0.30);
  --glow-accent-strong: 0 0 0 1px rgba(43,212,237,0.5), 0 0 44px rgba(43,212,237,0.45);
  --glow-purple-sh: 0 0 32px rgba(139,108,246,0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 480ms;

  /* ============================================================
     TYPE SCALE — semantic
     Display uses Space Grotesk; body IBM Plex Sans; labels mono.
     ============================================================ */
  --text-hero: 700 clamp(48px, 7vw, 92px)/1.02 var(--font-display);
  --text-h1:   700 clamp(38px, 4.6vw, 60px)/1.06 var(--font-display);
  --text-h2:   600 clamp(28px, 3vw, 40px)/1.12 var(--font-display);
  --text-h3:   600 clamp(21px, 1.8vw, 26px)/1.2 var(--font-display);
  --text-h4:   600 18px/1.3 var(--font-display);
  --text-body-lg: 400 19px/1.6 var(--font-body);
  --text-body:    400 16px/1.65 var(--font-body);
  --text-body-sm: 400 14px/1.6 var(--font-body);
  --text-label:   500 12px/1 var(--font-mono);   /* uppercase + tracking */
  --text-mono:    400 14px/1.55 var(--font-mono);

  --tracking-label: 0.18em;
  --tracking-tight: -0.02em;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt-in via the .gere-scope class so the system
   never leaks onto host UI it's dropped into.
   ========================================================================== */
.gere-scope {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gere-scope h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); margin: 0; color: var(--fg-1); }
.gere-scope h2 { font: var(--text-h2); letter-spacing: var(--tracking-tight); margin: 0; color: var(--fg-1); }
.gere-scope h3 { font: var(--text-h3); margin: 0; color: var(--fg-1); }
.gere-scope h4 { font: var(--text-h4); margin: 0; color: var(--fg-1); }
.gere-scope p  { font: var(--text-body); margin: 0; color: var(--fg-2); }
.gere-scope a  { color: var(--color-link); text-decoration: none; }
.gere-scope code, .gere-scope .mono { font: var(--text-mono); color: var(--cyan-bright); }

/* Eyebrow / kicker label — the recurring builder-mono device */
.gere-label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cyan);
}

/* Gradient text utility */
.gere-grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}