/* ==========================================================================
   AMERICAN STITCH LAB — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, motion.
   Change values here; everything else inherits.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --color-primary:      #336699;
  --color-accent:       #CC6666;
  --color-highlight:    #FFFFCC;

  /* Tonal variations (hover, borders, tints, accessible text) */
  --primary-900: #14283d;
  --primary-800: #1c3855;
  --primary-700: #24466a;
  --primary-600: #2b5680;
  --primary-500: #336699;  /* = --color-primary */
  --primary-400: #5686b5;
  --primary-300: #7fa6cb;
  --primary-200: #b3cbe1;
  --primary-100: #d9e5f0;
  --primary-050: #eef4f9;

  --accent-800: #8a3d3d;
  --accent-700: #a54e4e;
  --accent-600: #b85757;
  --accent-500: #CC6666;  /* = --color-accent */
  --accent-300: #e0a0a0;
  --accent-100: #f7e6e6;

  --highlight-500: #FFFFCC;
  --highlight-600: #f2eda6;   /* border / edge for highlight chips */
  --highlight-ink: #4a4520;   /* readable text on --color-highlight */

  /* ---- Neutrals ------------------------------------------------------- */
  --ink:        #0f1a26;  /* dark navy / blue-black */
  --ink-2:      #1a2937;
  --charcoal:   #2c3742;
  --slate:      #4d5c6b;  /* body copy */
  --muted:      #64717f;  /* meta copy — 4.98:1 on white */
  --line:       #e3e8ed;
  --line-strong:#cdd6de;
  --warm-gray:  #f5f4f1;
  --near-white: #f7f9fb;
  --paper:      #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --bg:              var(--paper);
  --bg-alt:          var(--near-white);
  --bg-dark:         var(--ink);
  --text:            var(--ink-2);
  --text-soft:       var(--slate);
  --text-muted:      var(--muted);
  --text-on-dark:    #eef3f8;
  --text-on-dark-soft: #a9bccd;
  --border:          var(--line);
  --focus-ring:      #ffb547;

  /* ---- Typography ----------------------------------------------------- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;

  --fs-micro: 0.6875rem;                            /* 11px lab labels */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --fs-lg:    clamp(1.1875rem, 0.7vw + 1.05rem, 1.4375rem);
  --fs-h4:    clamp(1.0625rem, 0.5vw + 0.96rem, 1.25rem);
  --fs-h3:    clamp(1.375rem, 1.1vw + 1.1rem, 1.875rem);
  --fs-h2:    clamp(1.875rem, 2.6vw + 1.15rem, 3.125rem);
  --fs-h1:    clamp(2.625rem, 6.4vw + 0.9rem, 5.75rem);

  --lh-tight: 1.03;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  --track-display: -0.035em;
  --track-label:   0.16em;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(3.5rem, 7vw, 7rem);
  --container:  1240px;
  --container-narrow: 860px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* ---- Radius / elevation / motion ------------------------------------ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 26, 38, .06), 0 2px 6px rgba(15, 26, 38, .05);
  --shadow-md: 0 4px 10px rgba(15, 26, 38, .07), 0 12px 28px rgba(15, 26, 38, .08);
  --shadow-lg: 0 10px 24px rgba(15, 26, 38, .10), 0 28px 60px rgba(15, 26, 38, .13);
  --shadow-accent: 0 8px 20px rgba(204, 102, 102, .32);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;

  --header-h: 68px;
  --z-header: 100;
  --z-drawer: 200;
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}