/* =====================================================================
   TAZEYO! — Core design tokens: color + type
   Brand: fresh-produce / grocery delivery. Warm, energetic, natural.
   Authoritative brand colors (Kurumsal Kimlik Rehberi v1.0, no73.studio):
     Warm Black #063639 · Kiwi Green #A2E96C · Alabaster #F7F4E9 · White
   Typeface: Manrope (single brand font, Light→ExtraBold).
   Scales & semantic UI colors beyond the four core swatches are DERIVED
   in oklch to stay harmonious — flagged "derived" and not from the guide.
   ===================================================================== */

@import url('fonts/manrope.css');

:root {
  /* ---------- BRAND CORE (from guide — do not alter) ---------- */
  --tz-kiwi:        #A2E96C;   /* Kiwi Green  rgb(162,233,108) */
  --tz-warm-black:  #063639;   /* Warm Black  rgb(6,54,57)     */
  --tz-alabaster:   #F7F4E9;   /* Alabaster   rgb(247,244,233) */
  --tz-white:       #FFFFFF;

  /* ---------- KIWI scale (derived) ---------- */
  --kiwi-50:  #F2FBE7;
  --kiwi-100: #E2F6CC;
  --kiwi-200: #CBF0A4;
  --kiwi-300: #A2E96C;   /* = brand Kiwi Green */
  --kiwi-400: #8BD94F;
  --kiwi-500: #6FBE33;   /* deeper leaf — for icons/text on light, hover */
  --kiwi-600: #569A26;
  --kiwi-700: #437821;
  --kiwi-800: #375F20;
  --kiwi-900: #2E4D1F;

  /* ---------- INK scale (warm-black teal, derived) ---------- */
  --ink-900: #063639;   /* = brand Warm Black — primary text & dark UI */
  --ink-800: #0B484B;
  --ink-700: #155C5F;
  --ink-600: #2C7376;
  --ink-500: #4E8F91;
  --ink-400: #7BABAC;
  --ink-300: #AAC8C8;
  --ink-200: #D4E2E1;
  --ink-100: #E9F1F0;
  --ink-50:  #F3F8F7;

  /* ---------- CREAM / alabaster scale (derived) ---------- */
  --cream-50:  #FFFEFB;
  --cream-100: #F7F4E9;  /* = brand Alabaster */
  --cream-200: #EFEAD7;
  --cream-300: #E4DCC4;
  --cream-400: #D2C7A8;

  /* ---------- EXTENDED produce accents (DERIVED — not in guide) ----------
     Optional category / illustration accents tuned to sit beside Kiwi. */
  --accent-tomato: #E5533C;
  --accent-carrot: #EE8230;
  --accent-citrus: #F2B441;
  --accent-berry:  #8C5AA6;
  --accent-sky:    #3FA7C4;

  /* ---------- SEMANTIC STATE (derived) ---------- */
  --success:    #569A26;  --success-bg: #E2F6CC;
  --warning:    #E0921A;  --warning-bg: #FCEFD2;
  --danger:     #D8412A;  --danger-bg:  #FBE3DE;
  --info:       #2C7376;  --info-bg:    #E1EFEF;

  /* ---------- SEMANTIC SURFACES / TEXT ---------- */
  --bg:            var(--tz-alabaster);   /* app canvas — warm, not stark white */
  --bg-deep:       var(--ink-900);        /* dark sections / footer */
  --surface:       var(--tz-white);       /* cards, sheets */
  --surface-2:     var(--cream-50);       /* subtle raised */
  --surface-sunken:var(--ink-50);         /* wells, inputs idle */

  --fg:            var(--ink-900);        /* primary text */
  --fg-muted:      var(--ink-600);        /* secondary text */
  --fg-subtle:     var(--ink-500);        /* captions, placeholder */
  --fg-on-dark:    var(--tz-alabaster);   /* text on warm-black */
  --fg-on-dark-muted: var(--ink-300);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-dark:   rgba(255,255,255,.14);

  /* Primary action = brand kiwi, dark ink text sits on it */
  --primary:        var(--tz-kiwi);
  --primary-hover:  var(--kiwi-400);
  --primary-press:  var(--kiwi-500);
  --on-primary:     var(--ink-900);
  /* Dark action = warm black, kiwi or cream text */
  --accent-dark:        var(--ink-900);
  --accent-dark-hover:  var(--ink-800);
  --on-accent-dark:     var(--tz-white);

  --focus-ring: color-mix(in oklch, var(--kiwi-500) 60%, transparent);

  /* ===================== TYPOGRAPHY ===================== */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* type scale (px) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-display: 80px;

  /* tracking — guide calls for tight headline spacing */
  --tracking-tight: -0.035em;
  --tracking-snug:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;   /* eyebrows / labels (uppercase) */

  /* leading */
  --leading-none:  1;
  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* ===================== SPACING (4px base) ===================== */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  /* ===================== RADII ===================== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ===================== ELEVATION (soft, warm-tinted) ===================== */
  --shadow-xs: 0 1px 2px rgba(6,54,57,.06);
  --shadow-sm: 0 1px 3px rgba(6,54,57,.08), 0 1px 2px rgba(6,54,57,.05);
  --shadow-md: 0 4px 14px rgba(6,54,57,.09), 0 2px 5px rgba(6,54,57,.05);
  --shadow-lg: 0 14px 34px rgba(6,54,57,.12), 0 5px 12px rgba(6,54,57,.07);
  --shadow-xl: 0 28px 60px rgba(6,54,57,.16);
  --shadow-kiwi: 0 10px 26px rgba(111,190,51,.32);   /* glow under green CTAs */
}

/* ===================== SEMANTIC TYPE CLASSES =====================
   Use .tz-display / .tz-h1 … or the element resets below. */
.tz-eyebrow{
  font: var(--fw-bold) var(--text-sm)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--kiwi-600);
}
.tz-display{ font: var(--fw-extra) var(--text-display)/var(--leading-none) var(--font-sans); letter-spacing: var(--tracking-tight); }
.tz-h1{ font: var(--fw-extra) var(--text-5xl)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.tz-h2{ font: var(--fw-bold) var(--text-4xl)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.tz-h3{ font: var(--fw-bold) var(--text-2xl)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-snug); }
.tz-h4{ font: var(--fw-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans); letter-spacing: var(--tracking-snug); }
.tz-lead{ font: var(--fw-medium) var(--text-xl)/var(--leading-normal) var(--font-sans); color: var(--fg-muted); }
.tz-body{ font: var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-sans); }
.tz-body-strong{ font: var(--fw-semibold) var(--text-base)/var(--leading-normal) var(--font-sans); }
.tz-small{ font: var(--fw-medium) var(--text-sm)/var(--leading-normal) var(--font-sans); color: var(--fg-muted); }
.tz-caption{ font: var(--fw-medium) var(--text-xs)/1.4 var(--font-sans); color: var(--fg-subtle); }
.tz-price{ font: var(--fw-extra) var(--text-xl)/1 var(--font-sans); letter-spacing: var(--tracking-snug); font-feature-settings: "tnum" 1; }