/* ============================================================
   Veridium Design System — brand tokens (vendored)
   Source: claude.ai/design "Veridium Design System" (owner: Alex)
     tokens/colors.css · typography.css · spacing.css · effects.css
   Brand: deep navy ground + single teal primary + amber accent,
   cool-slate neutrals, tracked-mono labels, small confident corners.

   This file is the source of truth for the raw + semantic BRAND ramps.
   The app's own theme variables (--bg, --text, --neon-*, …) are defined
   in style.css IN TERMS OF these tokens, per theme.
   ============================================================ */

/* ---- Webfonts: Space Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono (labels) ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Brand: Navy (primary ground / ink) ----- */
  --navy-900: #0E1B2C;   /* deepest surface, primary ink */
  --navy-800: #14233A;
  --navy-700: #1F2A3D;
  --navy-600: #2A3A52;

  /* ----- Brand: Teal (primary) ----- */
  --teal-700: #167878;
  --teal-600: #1F8E8E;   /* primary brand teal */
  --teal-500: #2EA3A3;
  --teal-400: #38C1CC;   /* bright / highlight */
  --teal-200: #9ECBCB;
  --teal-100: #C5E0E0;   /* tint / wash */
  --teal-50:  #EAF4F4;

  /* ----- Brand: Blue (mark gradient, 4F-ID, links) ----- */
  --blue-700: #0F7F9E;
  --blue-600: #0F90BE;
  --blue-500: #0099B9;
  --blue-400: #38B5D6;
  --blue-100: #D6EEF5;

  /* ----- Brand: Amber (accent / emphasis) ----- */
  --amber-700: #C97A0F;
  --amber-600: #E8821A;
  --amber-500: #F78D22;
  --amber-200: #F8CE9B;
  --amber-100: #FCEBD6;

  /* ----- Neutrals: cool slate ----- */
  --slate-900: #1F2A3D;
  --slate-700: #3A4658;
  --slate-600: #4A5A6F;
  --slate-500: #7A8696;
  --slate-400: #A6B0BE;
  --slate-300: #C8D1DD;
  --slate-200: #DCE3EB;
  --slate-100: #EDF1F5;
  --slate-50:  #F7F9FA;
  --white:     #FFFFFF;

  /* ----- Status ----- */
  --success-600: #1B9E78;
  --success-100: #DCF1EA;
  --warning-600: #E8821A;
  --warning-100: #FCEBD6;
  --danger-600:  #D24B40;
  --danger-100:  #F8DEDB;
  --info-600:    #0099B9;
  --info-100:    #D6EEF5;

  /* ----- Semantic brand roles (theme-agnostic) ----- */
  --brand-primary:        var(--teal-600);
  --brand-primary-hover:  var(--teal-700);
  --brand-primary-active: #115E5E;
  --brand-bright:         var(--teal-400);
  --brand-accent:         var(--amber-500);
  --brand-accent-hover:   var(--amber-700);
  --brand-ink:            var(--navy-900);
  --text-link:            var(--blue-500);
  --focus-ring:           var(--teal-400);

  /* =========================================================
     Typography
     ========================================================= */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.18em;

  /* =========================================================
     Spacing, radii, borders
     ========================================================= */
  --radius-xs:   3px;
  --radius-sm-ds:6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --radius-card: 12px;
  --border-width: 1px;
  --border-width-strong: 2px;

  /* =========================================================
     Effects — shadows (cool navy-tinted), motion, gradients
     ========================================================= */
  --shadow-xs:  0 1px 2px rgba(14,27,44,0.06);
  --shadow-sm:  0 1px 3px rgba(14,27,44,0.08), 0 1px 2px rgba(14,27,44,0.04);
  --shadow-md:  0 4px 12px rgba(14,27,44,0.08), 0 2px 4px rgba(14,27,44,0.04);
  --shadow-ds-lg:  0 12px 28px rgba(14,27,44,0.12), 0 4px 8px rgba(14,27,44,0.05);
  --shadow-xl:  0 24px 56px rgba(14,27,44,0.16);

  --glow-teal: 0 0 0 1px rgba(56,193,204,0.4), 0 8px 24px rgba(31,142,142,0.35);
  --focus-shadow: 0 0 0 3px rgba(56,193,204,0.45);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;

  --gradient-mark:   linear-gradient(135deg, var(--teal-400) 0%, var(--blue-500) 100%);
  --gradient-ground: linear-gradient(160deg, #14233A 0%, #0E1B2C 100%);
  --gradient-teal:   linear-gradient(135deg, var(--teal-600) 0%, var(--teal-400) 100%);
}