/* =====================================================================
   KeramikaOutlet Design System — TOKENS (ko-tokens.css)  [WORKING DRAFT]
   Global source of truth for color, type, space, radius, shadow, motion.

   STATUS: draft — NOT yet deployed/confirmed. Per owner rule (2026-07-22),
   this is copied to the mirror (spletnik-child/assets/css/ko-tokens.css)
   ONLY after it is deployed and confirmed working on the server.

   Enqueue FIRST, before any component/feature CSS, in editor + front-end.
   Scope: this GLOBAL layer lives on :root (sanctioned --ko- layer, AGENTS §5);
   feature CSS still scopes under body.ko-<feature> with local --ko-<feature>-*.
   Values are owner-locked brand + documented real values (css-conventions.md §2).
   ===================================================================== */

:root {
  /* ---- Brand identity red (bands, accents, links) ----------------- */
  --ko-color-brand-primary: var(--wp--preset--color--primary-color-2, #E04141); /* alias theme.json */
  --ko-color-brand-primary-hover: #C93434;      /* matches ko-about button hover in use */
  --ko-color-brand-primary-active: #B03332;
  --ko-color-brand-tint: rgba(224, 65, 65, .10);
  --ko-color-brand-secondary: #242424;

  /* ---- Action red: buttons + labels + discount -------------------
     Owner: "the red we use for buttons and labels" = #E92727. */
  --ko-color-action-primary: var(--wp--preset--color--primary-color-1, #E92727); /* alias theme.json */
  --ko-color-action-primary-hover: #CE2222;
  --ko-color-action-primary-active: #B81A1A;
  --ko-color-action-tint: #FDECEC;
  --ko-color-action-secondary: #242424;         /* ghost/outline button ink */
  --ko-color-action-secondary-hover: #000000;
  --ko-color-label: var(--ko-color-action-primary); /* discount/sale labels */

  /* ---- Text -------------------------------------------------------- */
  --ko-color-text-primary: var(--wp--preset--color--primary-text-color, #242424); /* ink, alias */
  --ko-color-text-secondary: #5B5B5B;           /* documented secondary ink */
  --ko-color-text-muted: #767676;
  --ko-color-text-inverse: #FFFFFF;

  /* ---- Surfaces ---------------------------------------------------- */
  --ko-color-surface-page: #FFFFFF;
  --ko-color-surface-raised: #FFFFFF;
  --ko-color-surface-subtle: #F7F4F4;           /* warm light (stock box, tabs, inputs) */
  --ko-color-surface-inverse: #242424;

  /* ---- Borders (documented lines) --------------------------------- */
  --ko-color-border-default: #EEEEEE;
  --ko-color-border-strong: #D9D9D9;

  /* ---- State (stock green + accessible danger, documented) -------- */
  --ko-color-success: #019758;  --ko-color-success-surface: #E9EEDD;  /* stock (real values) */
  --ko-color-warning: #B26A00;  --ko-color-warning-surface: #FBF1E1;
  --ko-color-danger:  #D32F2F;  --ko-color-danger-surface:  #FFF1F1;  /* deadline ~5:1; alert surf */
  --ko-color-info:    #144196;  --ko-color-info-surface:    #E9F0FB;
  --ko-color-link:    #144196;  /* stock/tier/inline links (real value) */

  /* Legacy commerce reds kept for reference (migrate onto tokens):
     out-of-stock #FF4141, alert text #EB4747, discount-scale in functions.php. */

  --ko-color-focus-ring: #242424;
  --ko-color-overlay: rgba(36, 36, 36, .55);

  /* ---- Typography -------------------------------------------------- */
  --ko-font-family-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ko-font-family-heading: var(--ko-font-family-body);
  --ko-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ko-font-size-xs: .75rem;    --ko-font-size-sm: .875rem;  --ko-font-size-md: 1rem;
  --ko-font-size-lg: 1.125rem;  --ko-font-size-xl: 1.375rem; --ko-font-size-2xl: 1.75rem;
  --ko-font-size-3xl: 2.25rem;  /* price now */
  --ko-font-size-4xl: clamp(1.875rem, 4.4vw, 2.875rem); /* display */

  --ko-line-height-tight: 1.1;  --ko-line-height-heading: 1.2;  --ko-line-height-body: 1.6;

  --ko-font-weight-light: 300;      /* price unit/suffix (css-conventions §2) */
  --ko-font-weight-regular: 400;    /* spec values */
  --ko-font-weight-medium: 500;
  --ko-font-weight-semibold: 600;
  --ko-font-weight-bold: 700;       /* spec labels */
  --ko-font-weight-display: 800;    /* hero/section display */

  --ko-letter-spacing-tight: -0.03em; --ko-letter-spacing-snug: -0.01em;
  --ko-letter-spacing-normal: 0;      --ko-letter-spacing-wide: 0.02em;

  /* ---- Spacing (4px base) ----------------------------------------- */
  --ko-space-0: 0;
  --ko-space-1: .25rem;  --ko-space-2: .5rem;   --ko-space-3: .75rem;
  --ko-space-4: 1rem;    --ko-space-5: 1.25rem; --ko-space-6: 1.5rem;
  --ko-space-8: 2rem;    --ko-space-10: 2.5rem; --ko-space-12: 3rem;
  --ko-space-16: 4rem;   --ko-space-20: 5rem;   --ko-space-24: 6rem;

  /* ---- Layout ------------------------------------------------------ */
  --ko-container-sm: 640px;  --ko-container-md: 768px;
  --ko-container-lg: 1024px; --ko-container-xl: 1160px;
  --ko-page-gutter: clamp(1.25rem, 5vw, 3rem);
  --ko-grid-gap: 1.5rem;
  --ko-content-measure: 65ch;

  /* ---- Border, radius, shadow (SHARP canonical — matches commerce) - */
  --ko-border-width: 1px;      --ko-border-width-strong: 2px;
  --ko-radius-sm: 3px;  --ko-radius-md: 4px;  --ko-radius-lg: 6px;  --ko-radius-pill: 999px;
  --ko-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --ko-shadow-md: 0 6px 18px rgba(0, 0, 0, .06);
  --ko-shadow-lg: 0 18px 46px rgba(0, 0, 0, .055);

  /* ---- Motion (documented ease) ----------------------------------- */
  --ko-duration-fast: 120ms;
  --ko-duration-normal: 220ms;
  --ko-easing-standard: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ko-duration-fast: 0ms; --ko-duration-normal: 0ms; }
}