/* ============================================================
   ERAN'S KITCHEN — Design Tokens
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: "Arkaim";
  src: url("fonts/Arkaim.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

:root {

  /* ── Brand Colors ─────────────────────────────────────────── */

  /* Core three */
  --color-espresso:    #28180F;   /* Darkest — bg, text on light */
  --color-terracotta:  #AF562A;   /* Primary brand orange-brown */
  --color-cream:       #FBF4E9;   /* Lightest — page bg, reversed text */

  /* Terracotta scale (warm gradient between espresso → cream) */
  --color-terra-900:   #28180F;
  --color-terra-800:   #B25C32;   /* rgb(178,92,50) */
  --color-terra-700:   #AF562A;   /* brand terracotta */
  --color-terra-600:   #BA6538;   /* rgb(186,101,56) */
  --color-terra-500:   #BE744A;   /* rgb(190,116,74) */
  --color-terra-400:   #C2815B;   /* rgb(194,129,91) */
  --color-terra-350:   #C9906A;   /* rgb(201,144,106) */
  --color-terra-300:   #D0A684;   /* rgb(208,166,132) */
  --color-terra-250:   #DEA88A;   /* rgb(222,168,138) */
  --color-terra-200:   #DDC0A4;   /* rgb(221,192,164) */
  --color-terra-150:   #E6D4BC;   /* rgb(230,214,188) */
  --color-terra-100:   #E9DDCC;   /* rgb(233,221,204) */
  --color-terra-75:    #E6E0CA;   /* rgb(230,224,202) */
  --color-terra-50:    #EFE9DB;   /* rgb(239,234,219) */
  --color-terra-25:    #FBF4E9;   /* cream */

  /* Semantic colors */
  --color-bg-page:         var(--color-cream);
  --color-bg-dark:         var(--color-espresso);
  --color-bg-brand:        var(--color-terracotta);
  --color-text-primary:    var(--color-espresso);
  --color-text-on-dark:    var(--color-cream);
  --color-text-on-brand:   var(--color-cream);
  --color-text-accent:     var(--color-terracotta);
  --color-divider:         var(--color-terra-600);   /* brush underline strokes */
  --color-surface-warm:    var(--color-terra-75);    /* light warm card surface */

  /* ── Typography ───────────────────────────────────────────── */

  --font-display:     "Arkaim", serif;
  --font-serif:       "Playfair Display", Georgia, serif;
  --font-ui:          "Roboto", "Helvetica Neue", sans-serif;

  /* Font sizes */
  --text-xs:    14px;
  --text-sm:    16px;
  --text-base:  20px;
  --text-md:    28px;
  --text-lg:    32px;
  --text-xl:    36px;
  --text-2xl:   48px;
  --text-3xl:   56px;
  --text-4xl:   72px;
  --text-5xl:   96px;
  --text-6xl:  168px;

  /* Line heights */
  --leading-tight:  100%;
  --leading-normal: 107%;
  --leading-relaxed: 120%;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;

  /* ── Spacing ──────────────────────────────────────────────── */

  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  56px;
  --space-7:  64px;
  --space-8:  96px;
  --space-9: 128px;

  /* Layout padding (large social/print formats) */
  --padding-canvas-v:  96px;
  --padding-canvas-h: 128px;

  /* ── Border Radius ────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     4px;
  --radius-bubble: 10px;   /* chat/message bubbles only */
  --radius-pill:   9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  /* Brand is flat — no shadow system */

}

/* ── Semantic type styles ─────────────────────────────────── */

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.display-section {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.display-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

p, .body {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.body-lg {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.italic-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-cream);
}

.ui-label {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* ── Utility classes ─────────────────────────────────────── */

.bg-dark    { background-color: var(--color-bg-dark); color: var(--color-text-on-dark); }
.bg-brand   { background-color: var(--color-bg-brand); color: var(--color-text-on-brand); }
.bg-cream   { background-color: var(--color-bg-page); color: var(--color-text-primary); }
.bg-warm    { background-color: var(--color-surface-warm); color: var(--color-text-primary); }

.text-accent  { color: var(--color-text-accent); }
.text-cream   { color: var(--color-cream); }
.text-dark    { color: var(--color-espresso); }

/* Knife-pattern background utility */
.knife-pattern {
  background-image: url("./assets/bg-knife-pattern.png");
  background-size: cover;
  background-position: center;
}