/* ==========================================================================
   Kaluchie — design tokens
   Lifted from the Industry design system stylesheet shipped with the design
   handoff (_ds/industry-a99ec5e0.../styles.css), which is what the v2
   prototype actually renders against.

   NOTE ON THE RAMP: README.md in the handoff prints a slightly different set
   of hexes for accent-300..700 (#a8c4dd / #7fa3c4 / #5980a6 / #41617f /
   #33495d). Those came from an earlier generation of the ramp — the
   prototype does not use them. The values below are what the design looks
   like on screen. To switch, replace the six lines marked RAMP below; every
   other rule in the theme is written against the token, never a hex.
   ========================================================================== */

:root {
  /* --- Ground and type ------------------------------------------------- */
  --color-bg: #f2f2f3;            /* Paper. All reversed type; primary button fill */
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* --- Accent ramp — RAMP ---------------------------------------------- */
  --color-accent: #5980a6;        /* Base accent: focus ring, ticker, section rules */
  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;    /* Body copy on the dark ground */
  --color-accent-300: #b5d9fd;    /* Kickers, small labels, secondary text */
  --color-accent-400: #94bce3;    /* Registration marks, selected chips, outline stroke */
  --color-accent-500: #749dc4;    /* 2px section rules, ticker fill, spec numerals */
  --color-accent-600: #597ea3;    /* Card frames on the dark ground, input borders */
  --color-accent-700: #416180;    /* Every hairline: card frames, cell rules, dividers */
  --color-accent-800: #2c455d;    /* Hover tints, image placeholders, active shipping row */
  --color-accent-900: #1d2d3d;    /* Page ground, all surfaces */

  /* --- Chrome ----------------------------------------------------------- */
  --color-header: rgba(18, 28, 38, 0.92);
  --scrim-welcome: rgba(9, 14, 20, 0.72);
  --scrim-drawer: rgba(29, 45, 61, 0.42);

  /* --- Type ------------------------------------------------------------- */
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-heading-weight: 600;

  /* Display scale — see README "Typography" */
  --type-hero: 112px;
  --type-page-title: 76px;
  --type-section: 52px;
  --type-subsection: 44px;
  --type-pdp-title: 60px;
  --type-card-title: 25px;

  /* --- Radius ----------------------------------------------------------- */
  /* Buttons and inputs only. Cards stay square — this is not negotiable,
     the blueprint frame is the whole visual identity. */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1360px;
  --wrap-checkout: 1280px;
  --wrap-account: 1240px;
  --gutter: 40px;
  --header-h: 64px;
  --rail-w: 212px;
  --rail-top: 88px;         /* header 64 + 24 */
  --grid-gap: 16px;
  --section-rhythm: 72px;

  /* --- The damask plate -------------------------------------------------- */
  --plate-tile: 68px;
  --plate-inset-tile: 12px;
  --plate-inset-pdp: 20px;
  --plate-inset-thumb: 4px;
  --plate-inset-swatch: 3px;
  --plate-inset-line: 6px;

  /* --- Motion ------------------------------------------------------------ */
  --ticker-duration: 28s;
  --drawer-duration: 260ms;
  --zoom-duration: 400ms;
  --accordion-duration: 300ms;
  --toast-duration: 2200ms;
}

/* The damask plate image path is injected by PHP (inc/enqueue.php) as an
   inline custom property so the theme directory can move without breaking it:
   --plate-img: url(.../baroque-white-royal.jpg) */