/* ============================================================
   STINT · DESIGN TOKENS  (by Amplab)
   Drop-in CSS custom properties for the Stint UI.
   Stack-agnostic: usable in plain CSS, SCSS, or mapped into a
   Tailwind theme (see tailwind snippet in the style guide).
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --stint-ink:            #0E2A3B;  /* primary dark · app chrome · text */
  --stint-coral:          #FF6B5B;  /* brand accent · primary CTA · locator */
  --stint-teal:           #1C7293;  /* secondary accent · links · info */
  --amplab-teal-electric: #15B3C7;  /* Amplab house accent (use sparingly in Stint) */

  /* ---- Neutrals (cool ramp) ---- */
  --stint-white:   #FFFFFF;  /* cards / elevated surfaces */
  --stint-base:    #F4F6F7;  /* page background / app canvas */
  --stint-border:  #D9DEE2;  /* hairlines · dividers · input borders */
  --stint-cloud:   #C3CCD2;  /* subtle fills · disabled borders */
  --stint-mist:    #9FB4BD;  /* tertiary text · on-dark muted · icons */
  --stint-muted:   #5B6B73;  /* secondary text on light */
  --stint-slate:   #33505E;  /* dividers / layering on dark */

  /* ---- Text ---- */
  --stint-text:            var(--stint-ink);
  --stint-text-muted:      var(--stint-muted);
  --stint-text-on-dark:    #FFFFFF;
  --stint-text-on-dark-mut:#9FB4BD;
  --stint-link:            var(--stint-teal);

  /* ---- Semantic / status (TMS) ----
     Coral is reserved for brand + primary actions, NOT for danger,
     so alerts use a distinct red. */
  --stint-success: #1E9E6A;  /* a tiempo · entregado */
  --stint-info:    #1C7293;  /* en tránsito · informativo (= teal) */
  --stint-warning: #E0A030;  /* retraso · atención */
  --stint-danger:  #E5484D;  /* alerta · quiebre de frío · crítico */
  --stint-neutral: #9FB4BD;  /* pendiente · sin estado */

  /* tints for status backgrounds (pills/banners) */
  --stint-success-bg: #E4F4ED;
  --stint-info-bg:    #E3EEF3;
  --stint-warning-bg: #FBF0DD;
  --stint-danger-bg:  #FBE4E5;
  --stint-coral-bg:   #FFECE9;

  /* ---- Typography ---- */
  --stint-font-display: "Archivo", "Archivo Black", system-ui, sans-serif;  /* headlines */
  --stint-font-text:    "Hanken Grotesk", system-ui, sans-serif;            /* body / UI */
  --stint-font-mono:    "JetBrains Mono", ui-monospace, monospace;          /* labels · data · IDs */

  --stint-text-xs:   12px;
  --stint-text-sm:   13px;
  --stint-text-base: 15px;
  --stint-text-lg:   18px;
  --stint-text-xl:   24px;
  --stint-text-2xl:  32px;
  --stint-text-3xl:  44px;

  --stint-weight-regular:  400;
  --stint-weight-medium:   500;
  --stint-weight-semibold: 600;
  --stint-weight-bold:     700;

  --stint-leading-tight: 1.1;
  --stint-leading-snug:  1.3;
  --stint-leading-normal:1.55;

  /* label / kicker (mono, uppercase, tracked) */
  --stint-label-size:    11px;
  --stint-label-spacing: 0.14em;

  /* ---- Spacing scale (4pt) ---- */
  --stint-space-1: 4px;
  --stint-space-2: 8px;
  --stint-space-3: 12px;
  --stint-space-4: 16px;
  --stint-space-5: 24px;
  --stint-space-6: 32px;
  --stint-space-7: 48px;
  --stint-space-8: 64px;

  /* ---- Radius ---- */
  --stint-radius-sm:   6px;
  --stint-radius-md:   10px;
  --stint-radius-lg:   16px;
  --stint-radius-pill: 999px;

  /* ---- Elevation ---- */
  --stint-shadow-sm: 0 1px 2px rgba(14,42,59,.06), 0 1px 3px rgba(14,42,59,.05);
  --stint-shadow-md: 0 4px 12px rgba(14,42,59,.08), 0 2px 4px rgba(14,42,59,.05);
  --stint-shadow-lg: 0 12px 32px rgba(14,42,59,.12), 0 4px 8px rgba(14,42,59,.06);

  /* ---- Motion ---- */
  --stint-ease: cubic-bezier(.2,.7,.2,1);
  --stint-dur-fast: 120ms;
  --stint-dur-base: 200ms;
}