/* ============================================================
   Deventral — Colors & Type Tokens
   ============================================================
   Source of truth for color, typography, spacing, radius, shadow.
   Import once at the root of any HTML/JSX surface:

     <link rel="stylesheet" href="colors_and_type.css" />

   The brand is built on a small, confident palette: indigo,
   black, white. Layered translucency is a core motif (see logo).
   ============================================================ */

/* --- Webfonts -------------------------------------------------
   Brand-specified families (Google Fonts):
     • Outfit    — used in the wordmark / logo lockups
     • Poppins   — display + headlines
     • Open Sans — body copy
     • Geist Mono — code, IDs, regions, eyebrow micro-labels

   Loaded via a <link> in index.html (with preconnect) so the
   stylesheet does not block on @import resolution.
   */

:root {
  /* ------------------------------------------------------------
     COLOR — Brand
     ------------------------------------------------------------ */
  /* Indigo ramp anchored on Material Indigo A700 (#304FFE) at step 500 */
  --indigo-50:  #ECEEFF;
  --indigo-100: #D6DBFF;
  --indigo-200: #ADB6FF;
  --indigo-300: #828FFF;
  --indigo-400: #5A6BFF;
  --indigo-500: #304FFE;   /* PRIMARY — Material Indigo A700 */
  --indigo-600: #2640D9;
  --indigo-700: #1B30AE;
  --indigo-800: #142385;
  --indigo-900: #0C155C;

  /* The translucent "halo" circle from the mark */
  --indigo-halo: rgba(48, 79, 254, 0.45);

  /* ------------------------------------------------------------
     COLOR — Neutrals (true black + warm-cool greys)
     ------------------------------------------------------------ */
  --black:      #0A0A0B;   /* Slightly off pure black; richer on screen */
  --ink-900:    #131316;
  --ink-800:    #1F1F23;
  --ink-700:    #2E2E34;
  --ink-600:    #4A4A52;
  --ink-500:    #6B6B75;
  --ink-400:    #93939D;
  --ink-300:    #BEBEC6;
  --ink-200:    #DEDEE3;
  --ink-100:    #EFEFF2;
  --ink-50:     #F7F7F9;
  --white:      #FFFFFF;

  /* ------------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------------ */
  --success:    #138A5C;
  --success-bg: #E4F6EE;
  --warning:    #B97A0A;
  --warning-bg: #FCEFD3;
  --danger:     #C8312B;
  --danger-bg:  #FBE4E2;
  --info:       var(--indigo-500);
  --info-bg:    var(--indigo-50);

  /* ------------------------------------------------------------
     COLOR — Semantic surface roles (light theme default)
     ------------------------------------------------------------ */
  --bg:           var(--white);
  --bg-elevated:  var(--white);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--black);

  --fg:           var(--ink-900);  /* primary text */
  --fg-1:         var(--ink-900);
  --fg-2:         var(--ink-600);  /* secondary text */
  --fg-3:         var(--ink-500);  /* tertiary / hints */
  --fg-disabled:  var(--ink-400);
  --fg-inverse:   var(--white);
  --fg-brand:     var(--indigo-500);
  --fg-on-brand:  var(--white);

  --border:        var(--ink-200);
  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-300);
  --border-brand:  var(--indigo-500);

  --focus-ring:   rgba(48, 79, 254, 0.35);

  /* ------------------------------------------------------------
     TYPOGRAPHY — Families
     ------------------------------------------------------------ */
  --font-sans:    'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-logo:    'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* TYPE — Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* TYPE — Scale (modular, ~1.2 ratio at the body, then larger steps for display) */
  --text-xs:   12px;   --lh-xs:   16px;
  --text-sm:   14px;   --lh-sm:   20px;
  --text-md:   16px;   --lh-md:   24px;   /* body default */
  --text-lg:   18px;   --lh-lg:   28px;
  --text-xl:   22px;   --lh-xl:   30px;
  --text-2xl:  28px;   --lh-2xl:  36px;
  --text-3xl:  36px;   --lh-3xl:  44px;
  --text-4xl:  48px;   --lh-4xl:  56px;
  --text-5xl:  64px;   --lh-5xl:  72px;
  --text-6xl:  88px;   --lh-6xl:  96px;

  /* TYPE — Tracking */
  --track-tightest: -0.04em;
  --track-tight:    -0.02em;
  --track-normal:   -0.005em;
  --track-loose:     0.04em;
  --track-caps:      0.12em;

  /* ------------------------------------------------------------
     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-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS — soft, low spread, cool indigo-tinted at deep levels
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-sm: 0 2px 4px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(10, 10, 11, 0.10), 0 2px 4px rgba(10, 10, 11, 0.04);
  --shadow-lg: 0 16px 32px -8px rgba(10, 10, 11, 0.14), 0 4px 8px rgba(10, 10, 11, 0.04);
  --shadow-xl: 0 28px 56px -12px rgba(10, 10, 11, 0.20), 0 8px 16px rgba(10, 10, 11, 0.06);
  --shadow-brand: 0 14px 32px -10px rgba(48, 79, 254, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ============================================================
   DARK MODE — invert the surface roles, keep brand intact.
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg:           var(--black);
  --bg-elevated:  var(--ink-900);
  --bg-subtle:    var(--ink-800);
  --bg-muted:     var(--ink-700);
  --bg-inverse:   var(--white);

  --fg:           var(--white);
  --fg-1:         var(--white);
  --fg-2:         var(--ink-300);
  --fg-3:         var(--ink-400);
  --fg-disabled:  var(--ink-600);
  --fg-inverse:   var(--ink-900);

  --border:        var(--ink-700);
  --border-subtle: var(--ink-800);
  --border-strong: var(--ink-600);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 28px 56px -12px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply via class or element
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display / hero — use sparingly, marketing surfaces */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-6xl);
  line-height: var(--lh-6xl);
  letter-spacing: var(--track-tightest);
  color: var(--fg-1);
}

/* Headings — product UI */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--track-normal);
  color: var(--fg-1);
}
h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--fg-1);
}

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg-1);
}
.t-body-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
}
.t-body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-2);
}

/* Labels & meta */
.t-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-1);
}
.t-meta {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Code & mono */
code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--fg-1);
}
pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: auto;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Links */
a {
  color: var(--fg-brand);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }

/* Selection */
::selection {
  background: var(--indigo-200);
  color: var(--ink-900);
}