/* ============================================================
   Culinary — Design tokens (Saffron & Salt design system)
   ============================================================ */

/* Playfair Display — variable font, latin-ext subset */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display — variable font, latin subset */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display italic — variable font, latin-ext subset */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display italic — variable font, latin subset */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Mulish — variable font, latin-ext subset */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mulish — variable font, latin subset */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Mulish italic — variable font, latin-ext subset */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mulish italic — variable font, latin subset */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script:  var(--font-display);

  /* ---- Type scale (~1.28 modular) ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  clamp(2.5rem, 5vw, 4rem);

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-label:   0.14em;

  /* ---- Base palette: Cream ---- */
  --cream-50:  #FAF7F2;
  --cream-100: #F4EEE4;
  --cream-200: #ECE3D6;
  --cream-300: #E0D4C2;
  --cream-400: #D0C0A9;

  /* ---- Base palette: Ink ---- */
  --ink-900: #2B2622;
  --ink-700: #4A433C;
  --ink-500: #6E665C;
  --ink-400: #8B8175;
  --ink-300: #A89F92;

  --white: #FFFFFF;

  /* ---- Primary accent: Terracotta ---- */
  --terracotta-100: #F5E2D5;
  --terracotta-200: #EBC6AE;
  --terracotta-400: #D4733E;
  --terracotta-500: #C4622D;
  --terracotta-600: #AE5526;
  --terracotta-700: #8F441D;

  /* ---- Secondary accent: Sage ---- */
  --sage-100: #E6EADF;
  --sage-200: #CDD6C0;
  --sage-400: #93A285;
  --sage-500: #7A8B6F;
  --sage-600: #63755A;
  --sage-700: #4F5E48;

  /* ---- Utility ---- */
  --gold-400: #E8B45A;
  --gold-500: #E0A33E;
  --success:  #5E8C5A;
  --danger:   #B23A36;

  /* ---- Semantic aliases ---- */
  --bg:              var(--cream-50);
  --surface:         var(--white);
  --surface-sunken:  var(--cream-100);
  --surface-tint:    var(--terracotta-100);

  --border:          var(--cream-200);
  --border-strong:   var(--cream-300);

  --text-heading:    var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-400);
  --text-on-accent:  var(--white);

  --accent:          var(--terracotta-500);
  --accent-hover:    var(--terracotta-600);
  --accent-active:   var(--terracotta-700);
  --accent-tint:     var(--terracotta-100);

  --accent-2:        var(--sage-500);
  --accent-2-hover:  var(--sage-600);
  --accent-2-tint:   var(--sage-100);

  --rating:          var(--gold-500);

  --link:            var(--terracotta-600);
  --link-hover:      var(--terracotta-700);

  --focus-ring:      color-mix(in srgb, var(--terracotta-500) 45%, transparent);
  --overlay-scrim:   color-mix(in srgb, var(--ink-900) 55%, transparent);

  /* ---- Spacing (4px base grid) ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  --gutter:        var(--space-6);
  --section-pad-y: var(--space-24);
  --content-pad-x: var(--space-6);
  --container-max: 1200px;
  --container-narrow: 720px;

  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width:        1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (warm ink-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(43,38,34,0.05);
  --shadow-sm:  0 2px 6px rgba(43,38,34,0.06);
  --shadow-md:  0 6px 18px rgba(43,38,34,0.08);
  --shadow-lg:  0 14px 34px rgba(43,38,34,0.12);
  --shadow-xl:  0 24px 56px rgba(43,38,34,0.16);
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: 0 18px 42px rgba(43,38,34,0.15);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;

  /* ---- Z-index ---- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}