/* ============================================================
   Soukara — Design Tokens (consolidated)
   Ported from the Soukara design-system token files (_ds tokens).
   Task 1.2 — do not edit manually; update source files instead.
   ============================================================ */

:root {

  /* ==========================================================
     COLORS — Palette primitives
     ========================================================== */

  /* ---- Slate navy (primary / ink) — anchored on logo ink #373D5A ---- */
  --slate-950: #1B1F30;
  --slate-900: #272C42;
  --slate-800: #373D5A; /* logo ink */
  --slate-700: #474E70;
  --slate-600: #5C6488;
  --slate-500: #767E9F;
  --slate-400: #969DB8;
  --slate-300: #B8BDD0;
  --slate-200: #D7DAE5;
  --slate-100: #E9EBF1;
  --slate-50:  #F4F5F8;

  /* ---- Clay / terracotta (accent, sale, highlight) ---- */
  --clay-900: #5E2C1B;
  --clay-800: #7C3A25;
  --clay-700: #9C4A30;
  --clay-600: #B85838;
  --clay-500: #CF6A48; /* primary accent */
  --clay-400: #DC8767;
  --clay-300: #E9AB91;
  --clay-200: #F3CDBC;
  --clay-100: #FAE6DC;
  --clay-50:  #FDF2EC;

  /* ---- Warm sand / cream (surfaces & backgrounds) ---- */
  --cream:      #FBF8F3;
  --sand-50:    #F7F1E8;
  --sand-100:   #F1E9DB;
  --sand-200:   #E7DBC8;
  --sand-300:   #D8C7AC;

  /* ---- Warm neutral gray (text, lines, muted) ---- */
  --warm-950: #211F1A;
  --warm-800: #423E36;
  --warm-700: #5C564B;
  --warm-600: #756E60;
  --warm-500: #938B7B;
  --warm-400: #B0A795;
  --warm-300: #CFC6B3;
  --warm-200: #E4DCCB;
  --warm-100: #EFE9DC;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #14130F;

  /* ---- Semantic accents (warm-leaning) ---- */
  --sage-600:  #4F6B45; /* success / in-stock */
  --sage-500:  #5E7A52;
  --sage-100:  #E8EEE0;
  --amber-600: #B5821F; /* warning / low-stock */
  --amber-500: #C9922B;
  --amber-100: #FAEFD6;
  --brick-600: #A93A2D; /* error / sold-out */
  --brick-500: #BE4537;
  --brick-100: #F8E0DB;

  /* ==========================================================
     COLORS — Semantic aliases (reference these in components)
     ========================================================== */

  /* Surfaces & background */
  --color-bg:             var(--cream);
  --color-surface:        var(--white);
  --color-surface-sunken: var(--sand-50);
  --color-surface-inset:  var(--sand-100);
  --color-surface-dark:   var(--slate-900);

  /* Text */
  --text-strong:    var(--slate-900);
  --text-body:      var(--warm-800);
  --text-muted:     var(--warm-600);
  --text-subtle:    var(--warm-500);
  --text-on-dark:   var(--cream);
  --text-on-accent: var(--white);

  /* Lines & borders */
  --color-border:        var(--warm-200);
  --color-border-strong: var(--warm-300);
  --color-border-dark:   var(--slate-700);

  /* Brand / interactive */
  --color-primary:       var(--slate-800);
  --color-primary-hover: var(--slate-900);
  --color-primary-press: var(--slate-950);
  --color-accent:        var(--clay-500);
  --color-accent-hover:  var(--clay-600);
  --color-accent-press:  var(--clay-700);
  --color-accent-soft:   var(--clay-50);

  /* Commerce */
  --color-price: var(--slate-900);
  --color-sale:  var(--clay-600);
  --color-link:  var(--clay-700);

  /* Status */
  --color-success:    var(--sage-600);
  --color-success-bg: var(--sage-100);
  --color-warning:    var(--amber-600);
  --color-warning-bg: var(--amber-100);
  --color-danger:     var(--brick-600);
  --color-danger-bg:  var(--brick-100);

  /* Focus ring */
  --color-focus: var(--clay-500);

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */

  /* Families */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (16px base) */
  --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.5rem;    /* 88 */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  600; /* default Cormorant display weight */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em; /* uppercase labels / eyebrows */

  /* ==========================================================
     SPACING & LAYOUT (4px base grid)
     ========================================================== */

  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Layout */
  --container-max:   1280px;
  --container-wide:  1480px;
  --container-prose: 680px;
  --gutter:          var(--space-6);
  --section-y:       var(--space-24);

  /* ==========================================================
     EFFECTS — Radii, borders, shadows, motion
     ========================================================== */

  /* Corner radii — soft but architectural, never pill-everything */
  --radius-xs:     3px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* Borders */
  --border-thin:   1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-accent: 1.5px solid var(--color-accent);

  /* Elevation — soft slate-tinted shadows */
  --shadow-xs: 0 1px 2px rgba(39, 44, 66, 0.05);
  --shadow-sm: 0 2px 8px rgba(39, 44, 66, 0.06);
  --shadow-md: 0 8px 24px rgba(39, 44, 66, 0.08);
  --shadow-lg: 0 18px 44px rgba(39, 44, 66, 0.12);
  --shadow-xl: 0 32px 70px rgba(27, 31, 48, 0.18);
  /* Inset hairline for cards on cream */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 10px rgba(39, 44, 66, 0.06);

  /* Focus rings */
  --ring-focus:       0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  --ring-focus-tight: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
  --ring-input:       0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:     cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 120ms;
  --duration:      200ms;
  --duration-slow: 360ms;

}