/* The Slapidary — design tokens (from design/design_handoff_storefront/design-tokens).
   Fonts are enqueued separately in functions.php. */

/* ===================== COLORS ===================== */
:root {
  /* Obsidian (warm near-black) */
  --obsidian: #17150F;

  /* Stone (warm neutral ramp) */
  --stone-50:  #F7F3EA;
  --stone-100: #ECE6D8;
  --stone-200: #DBD3C1;
  --stone-300: #C3BAA4;
  --stone-400: #A39A83;
  --stone-500: #847B67;
  --stone-600: #665E4E;
  --stone-700: #4C463A;
  --stone-800: #33302A;
  --stone-900: #1F1D18;
  --stone-950: #14130F;

  /* Field Olive (primary / brand) */
  --olive-50:  #F0F1E6;
  --olive-100: #DFE1C9;
  --olive-200: #C3C79C;
  --olive-300: #A4A971;
  --olive-400: #868C50;
  --olive-500: #6B713C;
  --olive-600: #565C30;
  --olive-700: #444827;
  --olive-800: #353823;
  --olive-900: #2A2C1E;

  /* Turquoise (gemstone accent) */
  --turq-50:  #E3F2F0;
  --turq-100: #BFE3DF;
  --turq-200: #8ECDC7;
  --turq-300: #5BB3AC;
  --turq-400: #2F968E;
  --turq-500: #178C82;
  --turq-600: #137269;
  --turq-700: #135A54;

  /* Brass / Amber (secondary) */
  --brass-50:  #F8EFDD;
  --brass-100: #EFD9B4;
  --brass-200: #E0BA80;
  --brass-300: #CF9A4F;
  --brass-400: #BD7F2E;
  --brass-500: #A66E27;
  --brass-600: #875823;

  /* Garnet (alert red) */
  --garnet-400: #B8463A;
  --garnet-500: #9B362B;
  --garnet-600: #7E2B23;

  /* Sage (positive) */
  --sage-400: #6E9A53;
  --sage-500: #4E7A3E;
  --sage-600: #3D6231;

  /* ---- Semantic aliases ---- */
  --bg:            #F2EDE2;  /* sandstone page */
  --surface:       #FBF8F1;  /* raised card / panel */
  --surface-2:     #ECE6D8;  /* sunken / subtle fill */
  --surface-inverse: var(--obsidian);
  --overlay:       rgba(23, 21, 15, 0.55);

  --text:          var(--stone-900);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-inverse:  var(--stone-50);
  --text-on-primary: #F6F7EE;
  --text-on-accent:  #ECFAF8;

  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --border-bold:   var(--stone-700);
  --hairline:      rgba(23, 21, 15, 0.10);

  --primary:        var(--olive-600);
  --primary-hover:  var(--olive-700);
  --primary-press:  var(--olive-800);
  --primary-soft:   var(--olive-100);

  --accent:         var(--turq-500);
  --accent-hover:   var(--turq-600);
  --accent-soft:    var(--turq-100);

  --secondary:      var(--brass-500);
  --secondary-hover:var(--brass-600);
  --secondary-soft: var(--brass-100);

  --success:     var(--sage-500);
  --success-soft:#E4EFD9;
  --warning:     var(--brass-400);
  --warning-soft:var(--brass-100);
  --danger:      var(--garnet-500);
  --danger-soft: #F4DDD8;
  --info:        var(--turq-500);
  --info-soft:   var(--turq-100);

  --ring: rgba(23, 140, 130, 0.45);
}

/* ===================== TYPOGRAPHY ===================== */
:root {
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

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

  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.375rem;   /* 22 */
  --text-xl:  1.75rem;    /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 3rem;       /* 48 */
  --text-4xl: 4rem;       /* 64 */
  --text-5xl: 5.25rem;    /* 84 */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;

  --display-family: var(--font-display);
  --display-weight: 600;
  --display-transform: none;
  --display-tracking: var(--tracking-tight);

  --eyebrow-family: var(--font-mono);
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-widest);
  --eyebrow-transform: uppercase;
}

/* ===================== SPACING / LAYOUT (4px grid) ===================== */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  --container:    1200px;
  --container-narrow: 760px;
  --gutter:       var(--space-5);
  --section-y:    var(--space-9);
}

/* ===================== EFFECTS (radii / borders / shadows / motion) ===================== */
:root {
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  --bw-hair: 1px;
  --bw-bold: 2px;

  --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.08);
  --shadow-md: 0 2px 8px rgba(23, 21, 15, 0.10), 0 1px 2px rgba(23, 21, 15, 0.06);
  --shadow-lg: 0 14px 30px rgba(23, 21, 15, 0.16), 0 4px 8px rgba(23, 21, 15, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --shadow-engrave: inset 0 1px 2px rgba(23, 21, 15, 0.16);

  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 110ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
}