/* ==========================================================================
   Tesseract Technologies — Design Tokens
   Colors, Typography, Spacing, Radius, Shadow, Motion
   ========================================================================== */

/* ---- Webfonts (Google Fonts) -------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Alternates available: Exo 2 (legacy body), Montserrat (legacy display) */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* ========================================================================
     COLOR — Brand
     Sampled directly from the Tesseract logo. The palette is built around
     a cyan that runs from ice to deep teal, grounded by an industrial navy.
     ======================================================================== */

  /* Primary — Cyan scale (from logo gradient) */
  --tess-cyan-50:  #E6F9FD;
  --tess-cyan-100: #C1F0FA;
  --tess-cyan-200: #8FE4F4;
  --tess-cyan-300: #68D8EC;   /* logo top-cube highlight */
  --tess-cyan-400: #2FC4E2;
  --tess-cyan-500: #01B5D8;   /* PRIMARY — logo right-face */
  --tess-cyan-600: #0A99C1;   /* logo left-face (deeper) */
  --tess-cyan-700: #0B7C9E;
  --tess-cyan-800: #0C607A;
  --tess-cyan-900: #0A4657;

  /* Neutral — Industrial Navy / Slate
     Cool-tinted to pair with cyan; avoids pure black for a technical feel. */
  --tess-ink-50:  #F5F7FA;
  --tess-ink-100: #E8ECF2;
  --tess-ink-200: #CED5DF;
  --tess-ink-300: #A7B1BF;
  --tess-ink-400: #6E7787;
  --tess-ink-500: #495162;
  --tess-ink-600: #2E3A4A;   /* logo wordmark */
  --tess-ink-700: #1F2937;
  --tess-ink-800: #141C28;
  --tess-ink-900: #0A1018;   /* near-black, cool */

  /* Semantic (tuned to the cool palette) */
  --tess-success: #14B88A;
  --tess-warning: #F5A623;
  --tess-danger:  #E5484D;
  --tess-info:    var(--tess-cyan-500);

  /* Accent — reserved, used sparingly for highlights / motion trails */
  --tess-accent-glow: #7CF0FF;    /* phosphor cyan — glow/hover halo */

  /* ========================================================================
     SEMANTIC TOKENS — use these in components, not the raw scale above.
     ======================================================================== */

  /* Surfaces (light theme default) */
  --bg:            #FFFFFF;
  --bg-muted:      var(--tess-ink-50);
  --bg-subtle:     #FAFBFD;
  --bg-inverse:    var(--tess-ink-900);

  /* Foreground */
  --fg:            var(--tess-ink-900);
  --fg-1:          var(--tess-ink-700);
  --fg-2:          var(--tess-ink-500);
  --fg-3:          var(--tess-ink-400);
  --fg-inverse:    #FFFFFF;
  --fg-on-primary: #FFFFFF;

  /* Brand accents */
  --primary:       var(--tess-cyan-500);
  --primary-hover: var(--tess-cyan-600);
  --primary-press: var(--tess-cyan-700);
  --primary-soft:  var(--tess-cyan-50);
  --accent:        var(--tess-cyan-300);

  /* Borders / dividers */
  --border:        var(--tess-ink-100);
  --border-strong: var(--tess-ink-200);
  --border-focus:  var(--tess-cyan-500);

  /* Focus ring */
  --ring: 0 0 0 3px rgb(1 181 216 / 0.35);

  /* ========================================================================
     TYPOGRAPHY
     Display: Space Grotesk — modern geometric, technical, precise.
     Body:    Inter — neutral, readable at all sizes.
     Mono:    JetBrains Mono — for specs, numbers, code.
     Legacy:  Exo 2 / Montserrat available as fallbacks per existing brand.
     ======================================================================== */

  --font-display: 'Space Grotesk', 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Exo 2', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — 1.25 ratio, tuned for technical reading */
  --fs-12: 0.75rem;    /* 12 — caption / micro */
  --fs-14: 0.875rem;   /* 14 — small */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — body large / lede */
  --fs-20: 1.25rem;    /* 20 — h6 */
  --fs-24: 1.5rem;     /* 24 — h5 */
  --fs-30: 1.875rem;   /* 30 — h4 */
  --fs-36: 2.25rem;    /* 36 — h3 */
  --fs-48: 3rem;       /* 48 — h2 */
  --fs-64: 4rem;       /* 64 — h1 */
  --fs-80: 5rem;       /* 80 — display */

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relax:  1.7;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking (letter-spacing) — a hair of negative on display, open on caps */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.08em;      /* for uppercase tags / eyebrows */
  --tr-wider:  0.16em;      /* logo-style wordmark treatment */

  /* ========================================================================
     SPACING — 4px base grid
     ======================================================================== */
  --space-0:  0;
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ========================================================================
     RADIUS — mostly sharp. Cards get small rounding; pills where needed.
     ======================================================================== */
  --radius-0:    0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ========================================================================
     BORDERS
     ======================================================================== */
  --border-1: 1px solid var(--border);
  --border-2: 1px solid var(--border-strong);
  --border-hairline: 1px solid rgb(46 58 74 / 0.08);

  /* ========================================================================
     SHADOW — soft, cool-tinted. Avoid warm drop shadows.
     ======================================================================== */
  --shadow-xs:   0 1px 2px rgb(20 28 40 / 0.05);
  --shadow-sm:   0 2px 4px rgb(20 28 40 / 0.06), 0 1px 2px rgb(20 28 40 / 0.04);
  --shadow-md:   0 8px 20px rgb(20 28 40 / 0.08), 0 2px 4px rgb(20 28 40 / 0.04);
  --shadow-lg:   0 20px 40px rgb(20 28 40 / 0.10), 0 4px 8px rgb(20 28 40 / 0.05);
  --shadow-xl:   0 32px 64px rgb(20 28 40 / 0.14), 0 8px 16px rgb(20 28 40 / 0.06);
  --shadow-glow: 0 0 0 1px rgb(1 181 216 / 0.30), 0 8px 24px rgb(1 181 216 / 0.25);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06);

  /* ========================================================================
     MOTION — fast, precise, no bounce. Industrial easing curves.
     ======================================================================== */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  220ms;
  --dur-slow:    360ms;

  /* Custom eases — "precision": sharp accel, controlled decel */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-precision: cubic-bezier(0.3, 0, 0, 1);

  /* ========================================================================
     LAYOUT
     ======================================================================== */
  --container-max: 1280px;
  --container-pad: 24px;
  --grid-gutter:   24px;
  --section-y:     96px;
}

/* --------------------------------------------------------------------------
   Dark surface variant — flip semantic surfaces for dark sections.
   Apply with  <div class="dark-surface"> … </div>  or data-theme="dark".
   -------------------------------------------------------------------------- */
.dark-surface,
[data-theme="dark"] {
  --bg:            var(--tess-ink-900);
  --bg-muted:      var(--tess-ink-800);
  --bg-subtle:     var(--tess-ink-800);
  --fg:            #FFFFFF;
  --fg-1:          var(--tess-ink-100);
  --fg-2:          var(--tess-ink-300);
  --fg-3:          var(--tess-ink-400);
  --border:        rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
}

/* ==========================================================================
   SEMANTIC ELEMENTS — drop-in base styles for text hierarchy.
   ========================================================================== */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h6, .h6, .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relax);
  color: var(--fg-1);
  margin: 0;
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  font-weight: var(--fw-regular);
}

small, .small {
  font-size: var(--fs-14);
  color: var(--fg-2);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-1);
}

/* Display / hero treatment — reserved for landing heroes, big stats */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-80);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: var(--fw-semibold);
}

/* Wordmark treatment — mirrors the logo's caps-with-wide-tracking feel */
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   BRAND GRID — the signature ambient texture.
   24 px cells, 1 px hairline at 6% opacity. Apply to any surface that needs
   "technical context": heroes, cards, feature blocks, section backgrounds.
   On dark surfaces it auto-switches to a white hairline via currentColor-ish
   logic using CSS variables.
   ========================================================================== */
.brand-grid {
  background-image:
    linear-gradient(var(--brand-grid-color, rgba(46,58,74,.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-grid-color, rgba(46,58,74,.06)) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dark-surface .brand-grid,
[data-theme="dark"] .brand-grid,
.brand-grid.on-dark {
  --brand-grid-color: rgba(255,255,255,.05);
}
/* Overlay usage: apply on a ::before/absolute layer to stack on colored BGs */
.brand-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--brand-grid-color, rgba(46,58,74,.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-grid-color, rgba(46,58,74,.06)) 1px, transparent 1px);
  background-size: 24px 24px;
}