/* ==========================================================================
   Vidda Design System — Colors & Type
   --------------------------------------------------------------------------
   Brand: Vidda Solutions — "a fixed point for the modern warehouse."
   Cool Harbor (teal-blue) + Pine (green) grounded by warm sand neutrals and a
   Beacon (amber) accent. Industrial precision, human warmth.

   Fonts are loaded from Google Fonts (see fonts.css). Import fonts.css first.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR PRIMITIVES — raw scales. Don't reference these directly in UI;
     use the SEMANTIC tokens below so theming stays consistent.
     --------------------------------------------------------------------- */

  /* Harbor — primary teal-blue (trust, navigation, logistics) */
  --harbor-50:  #ECF6F8;
  --harbor-100: #D2EAEE;
  --harbor-200: #A6D6DD;
  --harbor-300: #6FBCC8;
  --harbor-400: #3D9DAD;
  --harbor-500: #1B8094;  /* bright / interactive */
  --harbor-600: #0E6376;  /* hover */
  --harbor-700: #0C4A5A;  /* ★ primary brand */
  --harbor-800: #0A3A47;
  --harbor-900: #07303B;  /* deep ground */

  /* Pine — secondary green (go, in-motion, on-track, success) */
  --pine-50:  #EBF7F0;
  --pine-100: #CFECDC;
  --pine-200: #A1D9BC;
  --pine-300: #6BC097;
  --pine-400: #3CA374;
  --pine-500: #2A8C60;  /* ★ brand green */
  --pine-600: #1F7350;
  --pine-700: #195C41;
  --pine-800: #154A36;
  --pine-900: #0F3527;

  /* Beacon — warm amber/gold accent (the north star, attention, energy) */
  --beacon-50:  #FDF4E7;
  --beacon-100: #FAE6C7;
  --beacon-200: #F4CD8E;
  --beacon-300: #EDB259;
  --beacon-400: #E89B43;  /* ★ accent */
  --beacon-500: #D4842E;
  --beacon-600: #B66A22;
  --beacon-700: #91521E;
  --beacon-800: #6E3F1C;
  --beacon-900: #4F2E18;

  /* Clay — warm terracotta (rare third accent, alerts of the warm kind) */
  --clay-300: #E0A98E;
  --clay-400: #C7613D;
  --clay-500: #B14E2E;
  --clay-600: #933D24;

  /* Neutrals — warm sand-tinted gray (paper, ink, lines) */
  --warm-0:   #FFFFFF;
  --warm-50:  #F8F6F3;
  --warm-100: #EFEBE5;
  --warm-200: #E2DCD3;
  --warm-300: #CBC3B7;
  --warm-400: #A89F90;
  --warm-500: #847C6E;
  --warm-600: #635C50;
  --warm-700: #46413A;
  --warm-800: #2E2A25;
  --warm-900: #1C1815;  /* warm near-black ink */

  /* ---------------------------------------------------------------------
     SEMANTIC COLOR TOKENS — reference THESE in product UI.
     --------------------------------------------------------------------- */
  --bg:            var(--warm-50);   /* app/page background (warm paper) */
  --surface:       var(--warm-0);    /* cards, panels */
  --surface-2:     var(--warm-100);  /* sunken / striped rows / wells */
  --surface-3:     var(--warm-200);
  --overlay-scrim: color-mix(in srgb, var(--harbor-900) 55%, transparent);

  --fg1: var(--warm-900);            /* primary text */
  --fg2: #5A5248;                    /* secondary text */
  --fg3: #6B6459;                    /* muted / captions / placeholders — AA-safe at small sizes */
  --fg-on-brand: #F4FBFC;            /* text on Harbor/Pine fills */
  --fg-on-accent: var(--warm-900);   /* text on Beacon amber fills */

  --border:        var(--warm-200);  /* default hairline */
  --border-strong: var(--warm-300);  /* emphasized dividers, inputs */
  --border-brand:  var(--harbor-700);

  --brand:         var(--harbor-700);
  --brand-hover:   var(--harbor-800);
  --brand-bright:  var(--harbor-500);
  --brand-soft:    var(--harbor-50);
  --accent:        var(--beacon-400);
  --accent-hover:  var(--beacon-500);
  --accent-soft:   var(--beacon-50);
  --secondary:     var(--pine-500);
  --secondary-soft:var(--pine-50);

  /* Status */
  --success:      var(--pine-500);
  --success-soft: var(--pine-50);
  --warning:      var(--beacon-500);
  --warning-soft: var(--beacon-50);
  --danger:       #C0432F;
  --danger-soft:  #FBEDE9;
  --info:         var(--harbor-500);
  --info-soft:    var(--harbor-50);

  --focus-ring: color-mix(in srgb, var(--harbor-500) 45%, transparent);

  /* ---------------------------------------------------------------------
     TYPE — families, weights, scale
     --------------------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* Modular type scale (1.25 major-third-ish, tuned) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  66px;
  --text-6xl:  84px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrows / overlines */

  /* ---------------------------------------------------------------------
     SPACING — 4px base grid
     --------------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------------
     RADII — crisp & industrial (modest rounding)
     --------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — soft, warm/teal-tinted, low-spread (refined, not floaty)
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(12, 74, 90, 0.07);
  --shadow-sm: 0 1px 2px rgba(12, 74, 90, 0.06), 0 2px 6px rgba(12, 74, 90, 0.06);
  --shadow-md: 0 2px 4px rgba(12, 74, 90, 0.06), 0 6px 16px rgba(12, 74, 90, 0.09);
  --shadow-lg: 0 8px 24px rgba(12, 74, 90, 0.12), 0 2px 6px rgba(12, 74, 90, 0.07);
  --shadow-xl: 0 20px 48px rgba(7, 48, 59, 0.18), 0 4px 12px rgba(7, 48, 59, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(12, 74, 90, 0.08);

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

/* ==========================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the rules.
   ========================================================================== */
.ns-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ns-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.ns-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.ns-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.ns-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.ns-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-bright);
}
.ns-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.ns-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.ns-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.ns-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}
.ns-mono,
.ns-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.ns-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--harbor-700);
}