/* ============================================================================
   ATOMADIC — Design System Foundations
   colors_and_type.css
   Verified trust and determinism for the agent economy. Welcome to the Lattice.
   ----------------------------------------------------------------------------
   Dark-first dev-infra / security aesthetic. Signature lattice constellation,
   teal→violet brand gradient, gold "Fuse spark" for energy & CTAs, mono-first
   numbers. Load this file, then use the semantic vars below.
   ============================================================================ */

/* Fonts — Inter (brand wordmark face) + JetBrains Mono (code/numbers/labels).
   Inter is the exact brand face used in the logo lockup. JetBrains Mono is our
   chosen technical mono (substitution flagged in README). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Laraz — brand DISPLAY face (uploaded). Geometric, wide, futuristic.
   Used for hero/display + section headings. Two weights supplied. */
@font-face {
  font-family: 'Laraz';
  src: url('fonts/laraz.light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Laraz';
  src: url('fonts/laraz.regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------- */
  /* CORE PALETTE — raw brand values (pulled from logo assets)              */
  /* ---------------------------------------------------------------------- */

  /* Surfaces — the "void" the lattice floats in (deep → raised) */
  --void:        #07090F;   /* deepest, page backdrop behind everything */
  --bg:          #0A0E17;   /* primary app/page background              */
  --surface-1:   #0D1320;   /* raised panel / section band              */
  --surface-2:   #10172A;   /* card surface (matches logo tile)         */
  --surface-3:   #161E33;   /* hover / elevated card                    */
  --hairline:    #1E2840;   /* default border / divider                 */
  --hairline-2:  #2A3A5C;   /* stronger border, input focus ring base   */

  /* Brand accents */
  --teal:        #16E0C4;   /* primary — "verified / trust / live"      */
  --teal-bright: #4DF0DA;   /* hover / glow peak                        */
  --teal-deep:   #0E9C8A;   /* pressed / dim                            */
  --violet:      #6E5CF6;   /* secondary — "determinism / compute"      */
  --violet-bright:#9485FF;  /* hover                                    */
  --violet-deep: #4A39C2;   /* pressed / dim                            */

  /* Spark — the Fuse. Energy, ignition, primary CTA. Use SPARINGLY. */
  --spark:       #FFC24B;   /* gold core                                */
  --spark-hi:    #FFE9B0;   /* spark highlight / inner glow             */
  --spark-deep:  #E89A1C;   /* pressed                                  */

  /* Text */
  --fg-1:        #E8EEF5;   /* primary text / headings                  */
  --fg-2:        #8FA0B5;   /* secondary / body-muted (logo subtitle)   */
  --fg-3:        #5A6B83;   /* tertiary / captions, placeholders        */
  --fg-on-accent:#07090F;   /* text on teal/violet/spark fills          */

  /* Semantic — derived to live in the same cool family */
  --ok:          #16E0C4;   /* success = teal (verified)                */
  --ok-soft:     rgba(22,224,196,0.12);
  --warn:        #FFC24B;   /* warning = spark gold                     */
  --warn-soft:   rgba(255,194,75,0.12);
  --danger:      #E8835C;   /* alert / threat / CVE — soft warm coral    */
  --danger-soft: rgba(232,131,92,0.13);
  --info:        #6E5CF6;   /* info = violet                            */
  --info-soft:   rgba(110,92,246,0.12);

  /* ---------------------------------------------------------------------- */
  /* SIGNATURE GRADIENTS                                                    */
  /* ---------------------------------------------------------------------- */
  --grad-brand:   linear-gradient(135deg, #16E0C4 0%, #6E5CF6 100%); /* the lattice gradient */
  --grad-brand-tri: linear-gradient(120deg, #16E0C4 0%, #6E5CF6 60%, #9485FF 100%);
  --grad-spark:   radial-gradient(circle, #FFE9B0 0%, #FFC24B 45%, rgba(255,194,75,0) 100%);
  --grad-tile:    linear-gradient(160deg, #10172A 0%, #0A0E17 100%);
  --grad-text:    linear-gradient(100deg, #4DF0DA 0%, #9485FF 100%); /* for gradient headings */

  /* ---------------------------------------------------------------------- */
  /* TYPE                                                                   */
  /* ---------------------------------------------------------------------- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, monospace;
  --font-display: 'Laraz', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (1.25 major-third-ish, tuned). Sizes are rem. */
  --t-display: 4.5rem;   /* 72px — hero                       */
  --t-h1:      3rem;     /* 48px                              */
  --t-h2:      2.25rem;  /* 36px                              */
  --t-h3:      1.5rem;   /* 24px                              */
  --t-h4:      1.25rem;  /* 20px                              */
  --t-body-lg: 1.125rem; /* 18px                              */
  --t-body:    1rem;     /* 16px                              */
  --t-sm:      0.875rem; /* 14px                              */
  --t-xs:      0.75rem;  /* 12px — mono labels / eyebrows     */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* Mono eyebrow tracking — the technical-label signature */
  --track-eyebrow: 0.18em;
  --track-tight:   -0.02em;
  --track-display: -0.03em;

  /* ---------------------------------------------------------------------- */
  /* SPACING — 4px base                                                     */
  /* ---------------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---------------------------------------------------------------------- */
  /* RADII                                                                  */
  /* ---------------------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;   /* default card/input                       */
  --r-lg:  16px;   /* large card / section panel               */
  --r-xl:  24px;   /* hero / feature tile                      */
  --r-pill:999px;  /* badges, pills, icon buttons              */

  /* ---------------------------------------------------------------------- */
  /* ELEVATION & GLOW — shadows live in the cool/teal-violet family         */
  /* ---------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.55);
  --glow-teal:   0 0 0 1px rgba(22,224,196,0.35), 0 0 24px rgba(22,224,196,0.25);
  --glow-violet: 0 0 0 1px rgba(110,92,246,0.35), 0 0 24px rgba(110,92,246,0.25);
  --glow-spark:  0 0 24px rgba(255,194,75,0.45), 0 0 60px rgba(255,194,75,0.2);
  --ring-focus:  0 0 0 3px rgba(22,224,196,0.35);

  /* ---------------------------------------------------------------------- */
  /* MOTION                                                                 */
  /* ---------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* default — confident settle */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — apply to a scoped wrapper (e.g. .ato) or globally
   ============================================================================ */
.ato, body.ato {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Eyebrow / kicker — the mono technical label above headings */
.ato-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}

.ato h1, .ato-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: 400;
  letter-spacing: var(--track-tight); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0;
}
.ato-display {
  font-family: var(--font-display);
  font-size: var(--t-display); font-weight: 300;
  letter-spacing: var(--track-display); line-height: var(--lh-tight);
  color: var(--fg-1); margin: 0; text-wrap: balance;
}
.ato h2, .ato-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2); font-weight: 400;
  letter-spacing: var(--track-tight); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0;
}
.ato h3, .ato-h3 {
  font-size: var(--t-h3); font-weight: 600;
  letter-spacing: var(--track-tight); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0;
}
.ato h4, .ato-h4 {
  font-size: var(--t-h4); font-weight: 600; color: var(--fg-1); margin: 0;
}
.ato p, .ato-body {
  font-size: var(--t-body); line-height: var(--lh-relaxed);
  color: var(--fg-2); margin: 0; text-wrap: pretty;
}
.ato-lead {
  font-size: var(--t-body-lg); line-height: var(--lh-relaxed);
  color: var(--fg-2); text-wrap: pretty;
}
.ato-small { font-size: var(--t-sm); color: var(--fg-2); }
.ato-caption { font-size: var(--t-xs); color: var(--fg-3); }

/* Gradient heading text */
.ato-grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Code / numbers — first-class technical type */
.ato-mono, .ato code, .ato kbd {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
.ato-num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.ato code {
  font-size: 0.9em; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-xs);
  padding: 0.1em 0.4em; color: var(--teal-bright);
}