/**
 * ShipSort Design System — v2 Brand Tokens (Forest + Saffron + Cream)
 * Source of truth: shipsort-marketing/src/theme.css + BRAND_GUIDE.md
 *
 * Naming convention (to support BOTH direct use and alpha math):
 *   --c-primary   → space-separated RGB triplet,   e.g. "14 59 46"
 *                   use with  rgb(var(--c-primary) / 0.5)   for alpha
 *   --color-primary → composed color (rgb() or hex)          e.g. rgb(14 59 46)
 *                   use directly: background: var(--color-primary)
 *
 * Load order: brand.css -> components.css -> utilities.css -> template overrides (if any).
 *
 * Sections:
 *   1. RGB triplets (for alpha math)
 *   2. Composed color tokens
 *   3. Typography / spacing / radii / shadows / motion
 *   4. Keyframes + animation utility classes
 *   5. Reduced-motion guard
 *   6. Base styles
 *   7. Legacy compatibility aliases (v1 names used by existing templates)
 */

:root {

  /* ── 1. RGB triplets ─────────────────────────────────────────────────────── */
  /* Space-separated so rgb(var(--c-x) / <alpha>) works. */

  --c-primary:        14 59 46;      /* #0E3B2E Deep Forest */
  --c-primary-light:  25 84 66;      /* #195442 Canopy */
  --c-primary-dark:   8 36 28;
  --c-accent:         232 119 34;    /* #E87722 Saffron */
  --c-accent-hover:   208 104 25;    /* #D06819 Sunset */
  --c-accent-soft:    251 232 215;   /* #FBE8D7 Apricot */

  --c-bg:             244 239 230;   /* #F4EFE6 Cream */
  --c-surface:        255 255 255;
  --c-surface-2:      237 231 218;   /* #EDE7DA Whisper Cream */
  --c-border:         229 223 211;   /* #E5DFD3 Parchment */
  --c-border-strong:  209 201 184;

  --c-ink:            10 15 13;      /* #0A0F0D Near-black */
  --c-slate:          92 102 96;     /* #5C6660 Cool Slate */
  --c-stone:          160 174 192;   /* #A0AEC0 */

  --c-success:        22 163 74;     /* #16A34A Emerald */
  --c-success-soft:   220 241 225;   /* #DCF1E1 */
  --c-success-ink:    22 101 52;     /* #166534 */
  --c-warning:        245 158 11;    /* #F59E0B Amber */
  --c-warning-soft:   254 243 199;   /* #FEF3C7 */
  --c-warning-ink:    146 64 14;     /* #92400E */
  --c-danger:         239 68 68;     /* #EF4444 Coral Red */
  --c-danger-soft:    254 226 226;   /* #FEE2E2 */
  --c-danger-ink:     153 27 27;     /* #991B1B */
  --c-info:           59 130 246;    /* #3B82F6 Sky Blue */
  --c-info-soft:      219 234 254;   /* #DBEAFE */
  --c-info-ink:       30 64 175;     /* #1E40AF */

  /* ── 2. Composed color tokens (direct use in background / color / border) ── */

  --color-primary:        rgb(var(--c-primary));
  --color-primary-light:  rgb(var(--c-primary-light));
  --color-primary-dark:   rgb(var(--c-primary-dark));
  --color-accent:         rgb(var(--c-accent));
  --color-accent-hover:   rgb(var(--c-accent-hover));
  --color-accent-soft:    rgb(var(--c-accent-soft));
  --color-accent-light:   rgb(var(--c-accent-soft));  /* v1 name */

  --color-bg:             rgb(var(--c-bg));
  --color-surface:        rgb(var(--c-surface));
  --color-surface-2:      rgb(var(--c-surface-2));
  --color-hover:          rgb(var(--c-surface-2));     /* v1 name */
  --color-border:         rgb(var(--c-border));
  --color-border-strong:  rgb(var(--c-border-strong));

  --color-ink:            rgb(var(--c-ink));
  --color-slate:          rgb(var(--c-slate));
  --color-stone:          rgb(var(--c-stone));
  --color-text-primary:   rgb(var(--c-ink));
  --color-text-secondary: rgb(var(--c-slate));
  --color-text-muted:     rgb(var(--c-stone));
  --color-secondary:      rgb(var(--c-slate));         /* v1 name */
  --color-warm-gray:      rgb(var(--c-stone));         /* v1 name */

  --color-success:        rgb(var(--c-success));
  --color-success-soft:   rgb(var(--c-success-soft));
  --color-success-ink:    rgb(var(--c-success-ink));
  --color-success-bg:     rgb(var(--c-success-soft));  /* v1 name */
  --color-success-text:   rgb(var(--c-success-ink));   /* v1 name */
  --color-warning:        rgb(var(--c-warning));
  --color-warning-soft:   rgb(var(--c-warning-soft));
  --color-warning-ink:    rgb(var(--c-warning-ink));
  --color-warning-bg:     rgb(var(--c-warning-soft));  /* v1 name */
  --color-warning-text:   rgb(var(--c-warning-ink));   /* v1 name */
  --color-danger:         rgb(var(--c-danger));
  --color-danger-soft:    rgb(var(--c-danger-soft));
  --color-danger-ink:     rgb(var(--c-danger-ink));
  --color-danger-bg:      rgb(var(--c-danger-soft));   /* v1 name */
  --color-danger-text:    rgb(var(--c-danger-ink));    /* v1 name */
  --color-info:           rgb(var(--c-info));
  --color-info-soft:      rgb(var(--c-info-soft));
  --color-info-ink:       rgb(var(--c-info-ink));
  --color-info-bg:        rgb(var(--c-info-soft));     /* v1 name */
  --color-info-text:      rgb(var(--c-info-ink));      /* v1 name */

  /* ── 3. Typography / spacing / radii / shadows / motion ──────────────────── */

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --fs-display:  clamp(40px, 5.5vw, 72px);
  --fs-h1:       clamp(30px, 3.5vw, 44px);
  --fs-h2:       28px;
  --fs-h3:       20px;
  --fs-h4:       17px;
  --fs-body:     15px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-mono:     13px;

  --lh-display: 1.05;  --lh-h1: 1.1;  --lh-h2: 1.2;  --lh-h3: 1.3;  --lh-h4: 1.4;
  --lh-body: 1.6;      --lh-caption: 1.4;

  --tracking-display: -0.035em; --tracking-h1: -0.025em; --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;       --tracking-h4: -0.005em; --tracking-caption: 0.05em;

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

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  --radius-sm: 8px;  --radius-md: 12px;  --radius-lg: 16px;  --radius-xl: 20px;
  --radius-pill: 100px; --radius-full: 9999px;

  --shadow-xs:         0 1px 2px rgba(14, 59, 46, 0.04);
  --shadow-card:       0 1px 0 rgba(14, 59, 46, 0.04), 0 12px 32px rgba(14, 59, 46, 0.06);
  --shadow-card-hover: 0 1px 0 rgba(14, 59, 46, 0.04), 0 16px 36px rgba(14, 59, 46, 0.08);
  --shadow-modal:      0 24px 64px rgba(14, 59, 46, 0.14);
  --shadow-cta:        0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 18px rgba(232, 119, 34, 0.25);

  --easing: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms; --duration-base: 200ms;
  --duration-slow: 300ms; --duration-enter: 600ms;

}

/* ── 4. Keyframes ─────────────────────────────────────────────────────────── */

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(232, 119, 34, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(232, 119, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 119, 34, 0); }
}
@keyframes edge-trace { to { stroke-dashoffset: -180; } }
@keyframes bar-grow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bar-rise   { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.7); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin       { to { transform: rotate(360deg); } }

.pulse-dot  { animation: pulse-ring 2s ease-out infinite; }
.logo-trace { stroke-dasharray: 32 148; animation: edge-trace 2.4s linear infinite; }
.bar-fill   { transform-origin: left center;  animation: bar-grow 1.4s var(--easing) both; }
.speed-bar  { transform-origin: bottom center; animation: bar-rise 1.6s var(--easing) infinite; }
.fade-in    { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-enter) var(--easing), transform var(--duration-enter) var(--easing); will-change: opacity, transform; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
.spin       { animation: spin 1s linear infinite; }

/* ── 5. Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
}

/* ── 6. Base styles ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* HTML `hidden` attribute must beat component display rules (flex/grid). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--color-ink); }
p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--easing); }
a:hover { color: var(--color-accent); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--fs-mono); }
img, svg, video, canvas { display: block; max-width: 100%; }
::selection { background: rgb(var(--c-accent) / 0.25); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; top: -40px; left: 8px;
  padding: 8px 12px;
  background: var(--color-primary); color: var(--color-bg);
  border-radius: var(--radius-sm); font-weight: var(--fw-semibold);
  z-index: 1000; transition: top var(--duration-base) var(--easing);
}
.skip-link:focus { top: 8px; color: var(--color-bg); }

/* ── 7. Legacy compatibility aliases (v1 names) ───────────────────────────── */

:root {
  /* v1 short names */
  --primary:        var(--color-primary);
  --primary-light:  var(--color-primary-light);
  --primary-dark:   var(--color-primary-dark);
  --primary-dim:    rgb(var(--c-primary) / 0.12);
  --primary-glow:   rgb(var(--c-primary) / 0.35);

  --accent:         var(--color-accent);
  --accent-hover:   var(--color-accent-hover);
  --accent-soft:    var(--color-accent-soft);

  --bg:             var(--color-bg);
  --surface:        var(--color-surface);
  --surface-2:      var(--color-surface-2);
  --border:         var(--color-border);
  --border-2:       var(--color-border-strong);
  --border-hover:   var(--color-border-strong);

  --text:           var(--color-ink);
  --text-muted:     var(--color-slate);
  --text-subtle:    var(--color-stone);

  --success:        var(--color-success);
  --success-dim:    var(--color-success-soft);
  --success-border: rgb(var(--c-success) / 0.25);
  --success-text:   var(--color-success-ink);

  --danger:         var(--color-danger);
  --danger-dim:     var(--color-danger-soft);
  --danger-border:  rgb(var(--c-danger) / 0.25);
  --danger-text:    var(--color-danger-ink);

  --warning:        var(--color-warning);
  --warning-dim:    var(--color-warning-soft);
  --warning-border: rgb(var(--c-warning) / 0.25);
  --warning-text:   var(--color-warning-ink);

  --info:           var(--color-info);
  --info-dim:       var(--color-info-soft);
  --info-border:    rgb(var(--c-info) / 0.25);
  --info-text:      var(--color-info-ink);

  /* Purple (v1 accent, kept for any lingering uses) */
  --purple:         #7C3AED;
  --purple-dim:     rgba(124, 58, 237, 0.12);
  --purple-border:  rgba(124, 58, 237, 0.25);

  --transition-fast: var(--duration-fast) var(--easing);
  --transition-base: var(--duration-base) var(--easing);
  --transition-slow: var(--duration-slow) var(--easing);

  --shadow-sm: 0 1px 3px rgba(14, 59, 46, 0.06), 0 1px 2px rgba(14, 59, 46, 0.04);
  --shadow-md: 0 4px 6px rgba(14, 59, 46, 0.07), 0 2px 4px rgba(14, 59, 46, 0.04);
  --shadow-lg: 0 10px 15px rgba(14, 59, 46, 0.10), 0 4px 6px rgba(14, 59, 46, 0.05);
  --shadow-xl: 0 20px 25px rgba(14, 59, 46, 0.12), 0 8px 10px rgba(14, 59, 46, 0.06);
}