/* ============================================================================
   KUAILE — Design System foundations
   Colors + Type tokens for "Group Orders for WooCommerce" and Kuaile surfaces.

   The product is a WordPress-admin plugin, so the system is built to sit
   calmly *inside* wp-admin chrome: white cards, hairline borders, a soft
   page canvas — but with a distinctive pine-teal brand replacing stock
   WP blue, a warm ochre accent for the "Similar / batch" semantics, and a
   warm-neutral gray scale that reads friendlier than WP's cool grays.

   Usage: include this file, then use the semantic vars (--fg, --h1, --btn-*)
   in components. Raw scale vars exist for one-off tuning.
   ============================================================================ */

/* ---- Fonts (Google Fonts; see README "Visual Foundations / Type") --------- */
/* Fonts self-hosted via fonts.css */

:root {
  /* ======================================================================
     COLOR — raw scales
     ====================================================================== */

  /* Brand: pine-teal. The "Identical groups" / primary-action color.
     Calm, organized, fresh — distinct from stock WP-admin blue (#2271b1). */
  --teal-900: #073d37;
  --teal-800: #0a4e46;
  --teal-700: #0b5d54;
  --teal-600: #0d7468;   /* PRIMARY */
  --teal-500: #11907f;
  --teal-400: #3aa897;
  --teal-200: #a9d9d0;
  --teal-100: #d8eeea;
  --teal-050: #eef7f5;

  /* Accent: warm ochre. The "Similar orders" + "Lot n/m" batch semantics.
     Replaces WP's #b26a00 / #dba617 amber with a warmer, calmer ochre. */
  --ochre-700: #9a560a;
  --ochre-600: #b56a0c;   /* ACCENT */
  --ochre-500: #d2870f;
  --ochre-300: #ecc483;
  --ochre-100: #f7e7c8;
  --ochre-050: #fcf5e8;

  /* Success: grass green. The "Done / prepared" state. Kept clearly
     distinct from the teal brand (yellower, lighter hue). */
  --green-700: #237a40;
  --green-600: #2e9b57;
  --green-100: #d6efde;
  --green-050: #eef9f1;

  /* Danger: muted brick red (destructive / errors). */
  --red-700: #a32a25;
  --red-600: #c33b34;
  --red-100: #f7dcd9;

  /* Warm-neutral grays (a hair warmer / greener than WP's #1d2327 family). */
  --ink-900: #16201e;   /* primary text */
  --ink-800: #25302e;
  --ink-700: #38433f;   /* strong body text */
  --ink-600: #4b5854;   /* secondary text */
  --ink-500: #647069;   /* muted / meta text */
  --ink-400: #8b958f;   /* placeholder, disabled */
  --ink-300: #b3bbb6;
  --ink-200: #d3dad6;   /* strong hairline */
  --ink-150: #e1e6e2;   /* default border */
  --ink-100: #eef1ef;   /* subtle border / divider */
  --ink-050: #f5f7f6;   /* subtle fill */

  --white: #ffffff;
  --canvas: #eef1ef;    /* page background (wp-admin content area) */

  /* ======================================================================
     COLOR — semantic tokens
     ====================================================================== */
  --fg:            var(--ink-900);   /* default text */
  --fg-strong:     var(--ink-900);
  --fg-muted:      var(--ink-600);   /* secondary text */
  --fg-subtle:     var(--ink-500);   /* meta, captions, descriptions */
  --fg-disabled:   var(--ink-400);
  --fg-on-brand:   var(--white);     /* text on teal/green/ochre fills */

  --bg:            var(--white);     /* card / surface */
  --bg-canvas:     var(--canvas);    /* page */
  --bg-subtle:     var(--ink-050);   /* zebra rows, inset fills */
  --bg-brand-soft: var(--teal-050);  /* tinted brand panel */

  --border:        var(--ink-150);   /* default hairline */
  --border-strong: var(--ink-200);
  --border-subtle: var(--ink-100);

  --primary:       var(--teal-600);
  --primary-hover: var(--teal-700);  /* hover = darker */
  --primary-active:var(--teal-800);  /* press  = darker still */
  --primary-soft:  var(--teal-100);
  --on-primary:    var(--white);
  --ring:          var(--teal-500);  /* focus ring */

  --accent:        var(--ochre-600); /* "Similar" tier + batch chips */
  --accent-soft:   var(--ochre-100);
  --success:       var(--green-600); /* "Done" */
  --success-soft:  var(--green-100);
  --neutral-tier:  var(--ink-500);   /* "Single / Nothing to pick" tier */
  --danger:        var(--red-600);
  --danger-soft:   var(--red-100);

  /* Tier accent (drives the underline under each section heading) */
  --tier-identical: var(--teal-600);
  --tier-similar:   var(--ochre-600);
  --tier-single:    var(--ink-400);

  /* ======================================================================
     TYPE — families
     ====================================================================== */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* The live plugin UI matches wp-admin and uses the system stack instead: */
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  /* TYPE — scale (1.20 minor-third-ish, tuned) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;   /* wp-admin body baseline */
  --text-md:   16px;
  --text-lg:   19px;
  --text-xl:   23px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  58px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

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

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal:0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ======================================================================
     SHAPE / ELEVATION / SPACING (mirrors VISUAL FOUNDATIONS in README)
     ====================================================================== */
  --radius-xs: 3px;
  --radius-sm: 5px;    /* buttons, inputs */
  --radius-md: 8px;    /* cards */
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 0 rgba(22,32,30,0.04);
  --shadow-sm: 0 1px 2px rgba(22,32,30,0.06), 0 1px 1px rgba(22,32,30,0.04);
  --shadow-md: 0 2px 6px rgba(22,32,30,0.07), 0 4px 16px rgba(22,32,30,0.05);
  --shadow-lg: 0 8px 30px rgba(22,32,30,0.10);
  --shadow-focus: 0 0 0 1px var(--white), 0 0 0 3px color-mix(in srgb, var(--ring) 55%, transparent);

  /* 4px base spacing scale */
  --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;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt-in helpers (.kl-*) for docs/marketing/decks.
   The live plugin UI deliberately inherits wp-admin typography; use these on
   Kuaile-branded surfaces (landing pages, decks, this design system).
   ============================================================================ */
.kl-display,
.kl-h1, .kl-h2, .kl-h3 { font-family: var(--font-display); color: var(--fg); text-wrap: balance; }

.kl-display { font-size: var(--text-5xl); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.kl-h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.kl-h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.kl-h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold);
  line-height: var(--leading-snug); }

.kl-body { font-family: var(--font-sans); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--ink-700); }
.kl-p { font-family: var(--font-sans); font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--ink-700); }
.kl-lead { font-family: var(--font-sans); font-size: var(--text-lg);
  line-height: var(--leading-relaxed); color: var(--ink-600); font-weight: var(--weight-regular); }
.kl-small { font-size: var(--text-sm); color: var(--fg-subtle); line-height: var(--leading-normal); }

.kl-eyebrow { font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--primary); }

.kl-mono, .kl-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1; }

.kl-link { color: var(--primary); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  transition: border-color .15s ease, color .15s ease; }
.kl-link:hover { color: var(--primary-hover); border-bottom-color: var(--primary-hover); }