/* ===================================================================
   The Hungry Inc. — Design Tokens
   Import this in any artifact:
     <link rel="stylesheet" href="../colors_and_type.css">
   =================================================================== */


/* ── Tiempos Headline (licensed, supplied by client) ── */
@font-face { font-family: "Tiempos Headline"; font-weight: 300; font-style: normal;  src: url("fonts/TiemposHeadline-Light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 300; font-style: italic;  src: url("fonts/TiemposHeadline-LightItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 400; font-style: normal;  src: url("fonts/TiemposHeadline-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 400; font-style: italic;  src: url("fonts/TiemposHeadline-RegularItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 500; font-style: normal;  src: url("fonts/TiemposHeadline-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 500; font-style: italic;  src: url("fonts/TiemposHeadline-MediumItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 600; font-style: normal;  src: url("fonts/TiemposHeadline-Semibold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 600; font-style: italic;  src: url("fonts/TiemposHeadline-SemiboldItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 700; font-style: normal;  src: url("fonts/TiemposHeadline-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 700; font-style: italic;  src: url("fonts/TiemposHeadline-BoldItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 900; font-style: normal;  src: url("fonts/TiemposHeadline-Black.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tiempos Headline"; font-weight: 900; font-style: italic;  src: url("fonts/TiemposHeadline-BlackItalic.woff2") format("woff2"); font-display: swap; }

:root {
  /* ── COLOR ── corporate parent palette ───────────────────────── */
  --thi-ink:         #1A1714;   /* primary text / dominant dark */
  --thi-ink-90:      #2A2622;
  --thi-ink-70:      #4D4842;
  --thi-ink-50:      #837D74;

  --thi-bone:        #F4EFE6;   /* primary surface / paper */
  --thi-bone-light:  #FBF8F1;
  --thi-bone-dark:   #E8E0D2;

  --thi-saffron:     #E8732C;   /* accent — CTA, highlight */
  --thi-saffron-d:   #C25719;
  --thi-curry-leaf:  #0F6B5C;   /* accent — craft mode */
  --thi-curry-d:     #08493E;
  --thi-marigold:    #FCD10F;   /* accent — joy, the bhukkad family */
  --thi-stone:       #8BA2C4;   /* neutral muted (most-used Figma color) */

  /* ── Semantic ── */
  --thi-fg-1:        var(--thi-ink);
  --thi-fg-2:        var(--thi-ink-70);
  --thi-fg-3:        var(--thi-ink-50);
  --thi-fg-on-dark:  var(--thi-bone);

  --thi-bg-1:        var(--thi-bone);
  --thi-bg-2:        var(--thi-bone-light);
  --thi-bg-3:        var(--thi-bone-dark);
  --thi-bg-dark:     var(--thi-ink);

  --thi-border:      var(--thi-ink);
  --thi-border-soft: rgba(26,23,20,0.14);
  --thi-divider:     rgba(26,23,20,0.12);

  --thi-success:     #2E7D5B;
  --thi-warning:     var(--thi-saffron);
  --thi-danger:      #C24129;
  --thi-info:        var(--thi-stone);

  /* Child-brand spotlight palette (for chips, the brands directory) */
  --bhukkad-yellow:  #FCD10F;
  --bhukkad-ink:     #433D55;
  --cuppa-teal:      #036469;
  --naanza-ink:      #000000;
  --chai-ink:        #1E1E1E;
  --ghee-ink:        #1E1E1E;
  --nacl-copper:     #7B4229;
  --11t2-ink:        #000000;
  --ronnies-red:     #EB2424;
  --copy-green:      #0F6B5C;
  --grind-ink:       #000000;
  --rmn-ink:         #303030;

  /* ── Type ── */
  --thi-font-display: 'Tiempos Headline', 'Fraunces', Georgia, serif;
  --thi-font-display-alt: 'Playfair Display', Georgia, serif;
  --thi-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --thi-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --thi-font-deva:    'Tiro Devanagari Hindi', 'Noto Sans Devanagari', serif;
  --thi-font-arabic:  'Noto Naskh Arabic', serif;
  --thi-font-urdu:    'Noto Nastaliq Urdu', serif;

  /* Display flexes (per child brand — DO NOT use in parent corporate contexts) */
  --thi-font-caprasimo: 'Caprasimo', serif;
  --thi-font-barriecito: 'Barriecito', cursive;
  --thi-font-bebas:     'Bebas Neue', sans-serif;

  /* Type scale — major-third 1.250 */
  --thi-fs-xs:   12px;
  --thi-fs-sm:   14px;
  --thi-fs-base: 16px;
  --thi-fs-md:   18px;
  --thi-fs-lg:   22px;
  --thi-fs-xl:   28px;
  --thi-fs-2xl:  36px;
  --thi-fs-3xl:  48px;
  --thi-fs-4xl:  64px;
  --thi-fs-5xl:  88px;
  --thi-fs-6xl:  120px;
  --thi-fs-7xl:  168px;

  /* Line heights */
  --thi-lh-tight: 0.92;
  --thi-lh-snug:  1.08;
  --thi-lh-body:  1.55;
  --thi-lh-loose: 1.75;

  /* Tracking */
  --thi-tr-display: -0.02em;
  --thi-tr-body:    0;
  --thi-tr-eyebrow: 0.18em;
  --thi-tr-caps:    0.06em;

  /* ── Spacing — 8pt grid ── */
  --thi-s-1: 4px;
  --thi-s-2: 8px;
  --thi-s-3: 12px;
  --thi-s-4: 16px;
  --thi-s-5: 24px;
  --thi-s-6: 32px;
  --thi-s-7: 48px;
  --thi-s-8: 64px;
  --thi-s-9: 96px;
  --thi-s-10: 120px;
  --thi-s-11: 160px;

  /* ── Radii ── */
  --thi-radius-0:   0;        /* default — editorial */
  --thi-radius-sm:  4px;      /* form inputs */
  --thi-radius-pill: 999px;   /* chips, marquee tags, monogram */

  /* ── Borders ── */
  --thi-bw-thin:   1px;
  --thi-bw-rule:   2px;
  --thi-bw-heavy:  4px;

  /* ── Shadow ── */
  --thi-shadow-lift: 0 24px 60px -20px rgba(26,23,20,0.25);
  --thi-shadow-sticky: 0 8px 24px -10px rgba(26,23,20,0.18);

  /* ── Motion ── */
  --thi-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --thi-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --thi-dur-micro: 200ms;
  --thi-dur-base:  400ms;
  --thi-dur-entrance: 700ms;
  --thi-dur-kinetic: 1200ms;

  /* ── Layout ── */
  --thi-content: 1320px;
  --thi-content-narrow: 880px;
  --thi-gutter: 24px;
}

/* ── Semantic element styles ─────────────────────────────────── */
.thi-h1 {
  font-family: var(--thi-font-display);
  font-weight: 600;
  font-size: clamp(48px, 9vw, 168px);
  line-height: var(--thi-lh-tight);
  letter-spacing: var(--thi-tr-display);
  color: var(--thi-fg-1);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.thi-h2 {
  font-family: var(--thi-font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 88px);
  line-height: var(--thi-lh-snug);
  letter-spacing: var(--thi-tr-display);
  color: var(--thi-fg-1);
}
.thi-h3 {
  font-family: var(--thi-font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 48px);
  line-height: var(--thi-lh-snug);
  color: var(--thi-fg-1);
}
.thi-h4 {
  font-family: var(--thi-font-body);
  font-weight: 600;
  font-size: var(--thi-fs-xl);
  line-height: 1.2;
  color: var(--thi-fg-1);
}
.thi-eyebrow {
  font-family: var(--thi-font-body);
  font-weight: 500;
  font-size: var(--thi-fs-sm);
  letter-spacing: var(--thi-tr-eyebrow);
  text-transform: uppercase;
  color: var(--thi-fg-2);
}
.thi-body {
  font-family: var(--thi-font-body);
  font-weight: 400;
  font-size: var(--thi-fs-md);
  line-height: var(--thi-lh-body);
  color: var(--thi-fg-1);
}
.thi-small {
  font-family: var(--thi-font-body);
  font-weight: 400;
  font-size: var(--thi-fs-sm);
  line-height: 1.5;
  color: var(--thi-fg-2);
}
.thi-mono {
  font-family: var(--thi-font-mono);
  font-feature-settings: "tnum" 1;
}
.thi-deva { font-family: var(--thi-font-deva); }
.thi-arabic { font-family: var(--thi-font-arabic); direction: rtl; }
.thi-urdu { font-family: var(--thi-font-urdu); direction: rtl; }

/* ── Buttons ──────────────────────────────────────────────────── */
.thi-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--thi-s-3);
  padding: 14px 22px;
  font-family: var(--thi-font-body);
  font-weight: 500;
  font-size: var(--thi-fs-base);
  letter-spacing: 0.01em;
  background: var(--thi-ink);
  color: var(--thi-bone);
  border: 1px solid var(--thi-ink);
  border-radius: var(--thi-radius-0);
  cursor: pointer;
  transition: transform var(--thi-dur-micro) var(--thi-ease-out),
              background var(--thi-dur-micro) var(--thi-ease-out);
}
.thi-btn:hover { background: var(--thi-saffron); border-color: var(--thi-saffron); transform: translateY(-4px); }
.thi-btn:active { transform: translateY(0); }
.thi-btn--secondary {
  background: transparent;
  color: var(--thi-ink);
  border: 1px solid var(--thi-ink);
}
.thi-btn--secondary:hover { background: rgba(26,23,20,0.08); border-color: var(--thi-ink); transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}