/* ==========================================================================
   LAHIZA — BENTO DESIGN SYSTEM · 01. TOKENS
   The only file allowed to hold raw colours and scale values.
   Brand palette (identity guide V1.1):
     forest #234238 · cream #f1ebdd · clay #a96f55 · sage #b9bdb6 · ink #403a32
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- ramps */
  --forest-50:  #eef3f0;
  --forest-100: #dbe6e0;
  --forest-300: #6e9385;
  --forest-500: #2d5345;
  --forest-600: #234238;   /* brand */
  --forest-700: #1b352c;
  --forest-800: #162c24;
  --forest-900: #10201a;

  --clay-50:  #f8efe9;
  --clay-100: #f1e1d7;
  --clay-300: #d2a995;
  --clay-500: #a96f55;     /* brand */
  --clay-600: #8e5a43;
  --clay-700: #7a4a35;

  --cream-0:   #fffdf8;
  --cream-50:  #fbf8f1;
  --cream-100: #f6f1e6;
  --cream-200: #f1ebdd;    /* brand */
  --cream-300: #ebe4d6;
  --cream-400: #ddd4c2;

  --ink-400: #8c8576;
  --ink-500: #5d655b;
  --ink-600: #403a32;      /* brand */
  --ink-800: #2a312c;
  --ink-900: #1b2a24;

  --sage-200: #dfe1dc;
  --sage-500: #b9bdb6;     /* brand */
  --sage-700: #8a9088;

  --red-100: #f6e0d9;
  --red-600: #a8402a;
  --green-100: #dcebe1;
  --green-600: #2f6b45;

  /* ---------------------------------------------------------------- semantic */
  --canvas:        var(--cream-200);   /* page background — the brand cream */
  --surface:       var(--cream-50);    /* tiles */
  --surface-2:     var(--cream-100);   /* nested surfaces inside tiles */
  --surface-img:   var(--cream-300);   /* product image wells */
  --surface-hover: var(--cream-0);

  --text:          var(--ink-800);     /* 11.2:1 on canvas */
  --text-strong:   var(--ink-900);
  --text-muted:    var(--ink-500);     /* 5.1:1 on canvas, 5.7:1 on surface */
  --text-faint:    var(--ink-400);     /* placeholders only */
  --text-inverse:  var(--cream-200);
  --text-inverse-2: rgba(241, 235, 221, .78);   /* ≥7:1 on forest and ink tiles */

  --line:          rgba(27, 42, 36, .09);
  --line-strong:   rgba(27, 42, 36, .18);
  --line-inverse:  rgba(241, 235, 221, .2);

  --primary:        var(--forest-600);
  --primary-hover:  var(--forest-700);
  --primary-active: var(--forest-800);
  --primary-soft:   var(--forest-50);
  --on-primary:     var(--cream-200);

  --accent:         var(--clay-500);   /* fills, dots, large shapes */
  --accent-strong:  var(--clay-600);   /* accent tiles + small accent text (4.8:1) */
  --accent-soft:    var(--clay-50);
  --accent-on-dark: var(--clay-300);   /* accent text on forest/ink (5.2:1) */
  --on-accent:      var(--cream-0);

  --danger:  var(--red-600);
  --danger-soft: var(--red-100);
  --success: var(--green-600);
  --success-soft: var(--green-100);

  --focus-ring: 2px solid var(--clay-600);
  --focus-offset: 3px;

  /* ---------------------------------------------------------------- bento geometry */
  --gap:        .75rem;                         /* 12px — the gutter between every tile */
  --tile-pad:   clamp(1.25rem, 3.2vw, 3rem);    /* 20 → 48px */
  --tile-pad-sm: clamp(1rem, 2vw, 1.5rem);
  --shell:      90rem;                          /* 1440px content max */
  --edge:       clamp(.75rem, 1.2vw, 1rem);     /* outer page margin */

  --r-tile:  1.5rem;     /* 24px */
  --r-inner: 1rem;       /* 16px — images and panels inside tiles */
  --r-sm:    .75rem;     /* 12px — inputs, small cards */
  --r-xs:    .5rem;
  --r-pill:  999px;

  /* ---------------------------------------------------------------- space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3rem; --s-10: 4rem; --s-11: 5rem; --s-12: 6rem;

  /* ---------------------------------------------------------------- type */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-latin: "DM Sans", "Vazirmatn", system-ui, sans-serif;

  --fs-2xs: .75rem;
  --fs-xs:  .8125rem;
  --fs-sm:  .875rem;
  --fs-md:  .9375rem;
  --fs-base: 1rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --fs-2xl: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --fs-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-4xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-display: clamp(2.625rem, 1.6rem + 4.2vw, 5.25rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-normal: 1.7;
  --lh-relaxed: 1.9;
  --lh-loose: 2.1;

  /* ---------------------------------------------------------------- controls */
  --ctl-sm: 2.5rem;    /* 40 */
  --ctl:    3rem;      /* 48 */
  --ctl-lg: 3.5rem;    /* 56 */
  --tap:    2.75rem;   /* 44 — minimum touch target */

  /* ---------------------------------------------------------------- elevation */
  --shadow-xs: 0 1px 2px rgba(27, 42, 36, .05);
  --shadow-sm: 0 2px 6px -2px rgba(27, 42, 36, .08), 0 1px 2px rgba(27, 42, 36, .04);
  --shadow-md: 0 12px 28px -14px rgba(27, 42, 36, .28);
  --shadow-lg: 0 24px 56px -24px rgba(27, 42, 36, .4);
  --shadow-xl: 0 40px 90px -40px rgba(16, 32, 26, .55);

  /* ---------------------------------------------------------------- motion */
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 460ms;
  --t-slower: 760ms;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);

  /* ---------------------------------------------------------------- layout */
  --header-h: 4.5rem;
  --tabbar-h: 4rem;

  --z-raised: 10;
  --z-sticky: 40;
  --z-tabbar: 46;
  --z-header: 50;
  --z-overlay: 100;
  --z-toast: 120;
}

/* Tone tiles — each defines its own foreground so nested text stays legible. */
.lz-tone-forest { --tone-bg: var(--forest-600); --tone-fg: var(--cream-200); --tone-fg-2: var(--text-inverse-2); --tone-accent: var(--clay-300); --tone-line: var(--line-inverse); --tone-chip: rgba(241, 235, 221, .12); }
.lz-tone-clay   { --tone-bg: var(--clay-600);   --tone-fg: var(--cream-200); --tone-fg-2: var(--cream-200);      --tone-accent: var(--cream-0);  --tone-line: rgba(255, 253, 248, .26); --tone-chip: rgba(255, 253, 248, .14); }
.lz-tone-ink    { --tone-bg: var(--ink-600);    --tone-fg: var(--cream-200); --tone-fg-2: var(--text-inverse-2); --tone-accent: var(--clay-300); --tone-line: var(--line-inverse); --tone-chip: rgba(241, 235, 221, .12); }
.lz-tone-sage   { --tone-bg: var(--sage-500);   --tone-fg: var(--forest-800); --tone-fg-2: var(--forest-800);    --tone-accent: var(--clay-700); --tone-line: rgba(22, 44, 36, .18); --tone-chip: rgba(22, 44, 36, .08); }
.lz-tone-cream  { --tone-bg: var(--surface);    --tone-fg: var(--text-strong); --tone-fg-2: var(--text-muted);   --tone-accent: var(--accent-strong); --tone-line: var(--line); --tone-chip: var(--canvas); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-slower: 1ms; }
}