/* ============================================================================
   NILSHOP — tokens (the design system, one file)
   = brand/tokens.css (canon, verbatim) + the 2026-09-15 redesign scale tokens.
   Scope: body.nilshop is the site wrapper in this build; #lp-nilshop is kept as
   an alias so page-level embeds scoped the studio way resolve the same tokens.
   Source of truth: design-studio-v2/nilshop/brand/tokens.css + spec/tokens-proposal.css.
   Loaded BEFORE nilshop.css. nilshop.css consumes these; it defines no colors of its own.
   ============================================================================ */

/* ============================================================================
   NIL — brand design tokens (the contract)
   Brand: NIL — "בשמים יוניסקס" (unisex handmade perfumes). Products: ME, TREE, NIGHT, BE.
   Tagline: "ניחוחות שנולדו מהלב". Hebrew RTL.

   Extracted verbatim from the Lovable source (LINEA jewelry template repurposed as NIL):
     - tailwind.config.ts        (colors map, fontFamily, borderRadius, letterSpacing, transitions)
     - src/index.css             (:root HSL design tokens + .dark overrides + transition vars)
     - src/App.css               (#root layout extras — page-local, NOT brand tokens)
     - index.html                (Google Fonts: Heebo + Assistant, with weights)
     - components.json           (shadcn cssVariables=true, prefix="")

   WORKSPACE LAW: all tokens are scoped under one wrapper id (#lp-nilshop).
   The shadcn HSL channel-triple tokens (e.g. `40 20% 98%`) are kept as the brand's
   exact values; each is also exposed as a ready-to-use hsl() color. Page-local
   extras (--maxw etc.) stay un-prefixed where they appear in a page.

   NOTE: the original index.css header self-describes as "Louis Vuitton Inspired"
   luxury — that is template framing, not a NIL brand claim. Values are real; keep them.
   ============================================================================ */

body.nilshop,
#lp-nilshop {
  /* ---- RAW HSL CHANNELS (shadcn design tokens — exact source values) ---- */
  /* Core palette */
  --background: 40 20% 98%;
  --foreground: 30 10% 12%;

  /* Gold accent family */
  --gold: 42 75% 55%;
  --gold-light: 42 60% 70%;
  --gold-dark: 42 80% 35%;

  /* Navigation */
  --nav-background: 40 20% 98%;
  --nav-foreground: 30 10% 20%;
  --nav-hover: 30 10% 5%;

  /* Primary (near-black ink) */
  --primary: 30 10% 12%;
  --primary-foreground: 40 20% 98%;
  --primary-hover: 30 10% 20%;

  /* Secondary */
  --secondary: 40 15% 95%;
  --secondary-foreground: 30 10% 20%;

  /* Muted */
  --muted: 40 10% 94%;
  --muted-foreground: 30 5% 45%;

  /* Accent (= gold) */
  --accent: 42 75% 55%;
  --accent-foreground: 30 10% 12%;

  /* Borders / inputs / focus ring */
  --border: 40 10% 88%;
  --input: 40 10% 88%;
  --ring: 42 75% 55%;

  /* Surfaces */
  --card: 40 20% 99%;
  --card-foreground: 30 10% 12%;
  --popover: 40 20% 99%;
  --popover-foreground: 30 10% 12%;

  /* States */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Status bar (dark utility surface) */
  --status-bar: 30 10% 5%;
  --status-bar-foreground: 40 20% 98%;

  /* Sidebar (admin/drawer surfaces) */
  --sidebar-background: 40 15% 96%;
  --sidebar-foreground: 30 10% 26%;
  --sidebar-primary: 30 10% 10%;
  --sidebar-primary-foreground: 40 20% 98%;
  --sidebar-accent: 40 10% 94%;
  --sidebar-accent-foreground: 30 10% 10%;
  --sidebar-border: 40 10% 88%;
  --sidebar-ring: 42 75% 55%;

  /* ---- READY-TO-USE COLORS (hsl() wrapped — use these in markup) ---- */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-gold: hsl(var(--gold));
  --color-gold-light: hsl(var(--gold-light));
  --color-gold-dark: hsl(var(--gold-dark));

  --color-nav-background: hsl(var(--nav-background));
  --color-nav-foreground: hsl(var(--nav-foreground));
  --color-nav-hover: hsl(var(--nav-hover));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-hover: hsl(var(--primary-hover));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-success: hsl(var(--success));
  --color-success-foreground: hsl(var(--success-foreground));

  /* ---- TYPOGRAPHY ---- */
  /* tailwind.config.ts: fontFamily.sans = ['Heebo','Assistant','sans-serif'] */
  /* index.html loads Heebo wght 100..700 and Assistant wght 200..700 */
  --font-sans: 'Heebo', 'Assistant', sans-serif;

  /* Weight scale available from the loaded fonts */
  --fw-thin: 100;        /* Heebo only */
  --fw-extralight: 200;  /* used for hero/section titles (font-extralight) */
  --fw-light: 300;       /* the brand default — most text is font-light */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Luxury letter-spacing (tailwind.config.ts letterSpacing.extend) */
  --tracking-widest: 0.3em;   /* hero titles */
  --tracking-ultra: 0.4em;

  /* ---- BORDER RADIUS (tailwind.config.ts + --radius) ---- */
  /* Source --radius = 0rem: the brand is intentionally sharp-cornered. */
  --radius: 0rem;
  --radius-lg: var(--radius);                 /* 0rem */
  --radius-md: calc(var(--radius) - 2px);     /* clamps to 0 at radius:0 */
  --radius-sm: calc(var(--radius) - 4px);     /* clamps to 0 at radius:0 */

  /* ---- TRANSITIONS / MOTION (src/index.css + tailwind.config.ts) ---- */
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-luxury: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ---- LAYOUT (tailwind container; App.css #root) ---- */
  /* container: centered, padding 2rem, 2xl screen 1400px */
  --container-max: 1400px;
  --container-padding: 2rem;
}

/* ----------------------------------------------------------------------------
   DARK MODE (src/index.css .dark) — scoped override.
   Lovable toggles dark via a `.dark` class on <html>; mirror under the wrapper.
   ---------------------------------------------------------------------------- */
body.nilshop.dark,
.dark body.nilshop,
#lp-nilshop.dark,
.dark #lp-nilshop {
  --background: 30 10% 6%;
  --foreground: 40 15% 92%;

  --gold: 42 70% 50%;
  --gold-light: 42 55% 65%;
  --gold-dark: 42 75% 30%;

  --nav-background: 30 10% 6%;
  --nav-foreground: 40 10% 75%;
  --nav-hover: 40 15% 92%;

  --primary: 40 15% 92%;
  --primary-foreground: 30 10% 6%;
  --primary-hover: 40 10% 80%;

  --secondary: 30 8% 12%;
  --secondary-foreground: 40 10% 75%;

  --muted: 30 8% 14%;
  --muted-foreground: 40 5% 55%;

  --accent: 42 70% 50%;
  --accent-foreground: 30 10% 6%;

  --border: 30 8% 20%;
  --input: 30 8% 20%;
  --ring: 42 70% 50%;

  --card: 30 10% 8%;
  --card-foreground: 40 15% 92%;

  --popover: 30 10% 8%;
  --popover-foreground: 40 15% 92%;

  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 98%;
}


/* ============================================================================
   NIL — tokens proposal (Phase 2, 2026-09-15)
   A DIFF against brand/tokens.css: same scope (#lp-nilshop), same naming scheme.
   Nothing in the canon is removed. Blocks marked ADD are new; blocks marked
   OVERRIDE change a canon value and say why. Absorb into brand/tokens.css on the
   owner's OK; graduate to the source project at handoff.
   ============================================================================ */

body.nilshop,
#lp-nilshop {
  /* ---- ADD: scent grounds (presentation phase; owner lifted the palette rule) ----
     Art-directed from the 2026-09-15 box photographs. Tune with the tweaks bar
     against the staged images before locking. Each ground names the ink that
     may sit on it. Grounds are for stages, ledger rules and swatches only. */
  --scent-me:      hsl(30 6% 21%);    /* #383430 charcoal (was #24221F: the black box vanished into it) · ink: cream */
  --scent-lee:     hsl(43 22% 87%);   /* #E6E2D8 bone        · ink: ink   */
  --scent-tree:    hsl(160 4% 32%);   /* #4F5551 olive       · ink: cream */
  --scent-day:     hsl(15 59% 78%);   /* #E8B6A6 salmon      · ink: ink   */
  --scent-be:      hsl(324 2% 60%);   /* #9B9699 lilac grey  · ink: test  */
  --scent-night:   hsl(11 77% 60%);   /* #E8674A coral       · ink: cream */

  --scent-me-ink:    var(--color-primary-foreground);
  --scent-lee-ink:   var(--color-foreground);
  --scent-tree-ink:  var(--color-primary-foreground);
  --scent-day-ink:   var(--color-foreground);
  --scent-be-ink:    var(--color-foreground);
  --scent-night-ink: var(--color-primary-foreground);

  /* ---- ADD (round 2, 2026-09-16): stage images are transparent cutouts; the CSS stage paints the
     ground and this contact shadow. Strength per ground (darker grounds need a deeper shadow). ---- */
  --scent-me-shadow:    .48;
  --scent-lee-shadow:   .32;
  --scent-tree-shadow:  .48;
  --scent-day-shadow:   .34;
  --scent-be-shadow:    .45;
  --scent-night-shadow: .42;
  --stage-shadow: .4;

  /* ---- ADD: type scale (fluid; desktop value at 1440, mobile at 390) ---- */
  --fs-display-latin: clamp(4.5rem, 2.5rem + 6.5vw, 8rem);      /* 72 → 128 */
  --fs-display:       clamp(2.5rem, 1.6rem + 3vw, 4rem);         /* 40 → 64  */
  --fs-h2:            clamp(1.875rem, 1.5rem + 1vw, 2.5rem);     /* 30 → 40  */
  --fs-h3:            clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem); /* 20 → 22  */
  --fs-body-lg:       clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);/* 18 → 20  */
  --fs-body:          clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);   /* 16 → 17  */
  --fs-label:         0.875rem;                                  /* 14, floor */
  --fs-label-latin:   0.875rem;                                  /* 14, Latin caps only (was 13; the 14px floor holds for Latin too, 2026-09-16) */
  --fs-button:        0.9375rem;                                 /* 15 */
  --fw-button:        var(--fw-regular);                         /* 400: 500 read heavy (round 2, 2026-09-16) */
  --fs-price:         1.25rem;                                   /* 20 on PDP */
  --fs-price-sm:      1rem;                                      /* 16 on cards */

  --lh-display-latin: 0.95;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-tight: 1.3;
  --lh-body: 1.7;
  --lh-body-lg: 1.6;
  --lh-ui: 1;

  /* ---- OVERRIDE: tracking. Canon's 0.3em / 0.4em were applied to Hebrew, which
     breaks word shapes. They stay defined but are re-scoped to Latin runs only,
     and Hebrew gets its own (zero or slightly negative) values. */
  --tracking-hebrew: 0;
  --tracking-hebrew-display: -0.01em;
  --tracking-latin-display: 0.06em;   /* scent names on the stage */
  --tracking-latin-label: 0.12em;     /* uppercase Latin labels */
  --tracking-latin-button: 0.1em;
  /* --tracking-widest / --tracking-ultra: legacy, Latin only, no new uses */

  /* ---- ADD: measure ---- */
  --measure: 60ch;

  /* ---- ADD: spacing scale, 8px base ---- */
  --sp-1: 0.25rem;   /* 4   */
  --sp-2: 0.5rem;    /* 8   */
  --sp-3: 0.75rem;   /* 12  */
  --sp-4: 1rem;      /* 16  */
  --sp-6: 1.5rem;    /* 24  */
  --sp-8: 2rem;      /* 32  */
  --sp-10: 2.5rem;   /* 40  */
  --sp-12: 3rem;     /* 48  */
  --sp-16: 4rem;     /* 64  */
  --sp-24: 6rem;     /* 96  */
  --sp-32: 8rem;     /* 128 */
  --sp-48: 12rem;    /* 192 */

  /* section bands: desktop / mobile pairs, chosen per band in direction.md §6 */
  /* tightened 2026-09-16 (owner, round 3): sections must read as one page, not islands */
  --band-commerce: clamp(var(--sp-12), 2.5vw + 1.5rem, var(--sp-24));   /* 48 → 96  */
  --band-editorial: clamp(var(--sp-16), 4vw + 2rem, var(--sp-32));       /* 64 → 128 */
  --band-utility: clamp(var(--sp-8), 1.5vw + 1rem, var(--sp-12));        /* 32 → 48  */
  --opener-h: clamp(21rem, 28vw, 30rem);                                  /* content-page opener: 336 → 480 */
  --band-footer: clamp(var(--sp-16), 3vw + 2rem, var(--sp-24));

  /* ---- OVERRIDE: layout. Canon says 1400 / 2rem; the shipped CSS used 1320 and
     its own gutters. The proposal keeps canon's 1400 and adds the mobile gutter
     and the grid gap that were never defined. */
  --container-max: 1280px;            /* storefront standard (was 1400): catalog, reading, header */
  --container-padding: 2rem;          /* desktop */
  --container-padding-mobile: 1.25rem;/* 20 */
  --grid-gap: var(--sp-6);            /* 24 */
  --grid-columns: 12;

  /* ---- ADD: borders and rules ---- */
  --hairline: 1px solid var(--color-border);
  --rule-gold: 1px solid var(--color-gold);
  --rule-scent: 3px;                  /* the scent rule atop the PDP ledger */

  /* ---- ADD: focus ring (canon had --ring, never a ring style) ---- */
  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-ring);

  /* ---- ADD: elevation. Chrome carries none; the only shadow lives inside the
     staged photograph. Defined so nothing invents one. ---- */
  --shadow-none: none;

  /* ---- OVERRIDE: motion. Canon's three named transitions (smooth / bounce /
     luxury) become one ease-out family with a duration scale. --ease-bounce is
     retired (the signature rules ban overshoot). ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear: linear;
  --dur-hover: 160ms;
  --dur-state: 240ms;
  --dur-drawer: 320ms;
  --dur-reveal: 640ms;
  --transition-ui: var(--dur-state) var(--ease-out);
  --transition-hover: var(--dur-hover) var(--ease-out);
  /* --transition-smooth / --transition-luxury: legacy aliases, no new uses.
     --transition-bounce / --ease-bounce: retired. */

  --reveal-scale: 1.04;
  --hover-scale: 1.03;
  --hero-drift: 24px;

  /* ---- ADD: z-index ladder (never defined; Astra/Woo values collide today) ---- */
  --z-sticky-bar: 40;
  --z-header: 50;
  --z-drawer: 60;
  --z-consent: 70;
  --z-floating: 80;

  /* ---- ADD: breakpoints, one system. Astra's 921/544 and the shipped
     1023/767/600 are retired inside #lp-nilshop. Astra's root font shrink under
     921px is overridden by setting html font-size back to 100% in scope. ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- ADD: component sizes ---- */
  --btn-h: 2.75rem;                   /* 44 (was 48; round 2 finesse: lighter, still the 44px target) */
  --btn-h-lg: 3.25rem;                /* 52 (was 56), the PDP add-to-cart */
  --btn-pad-x: var(--sp-10);          /* 40 inline padding (was 32): air instead of weight */
  --input-h: 2.75rem;                 /* 44, matches --btn-h */
  --floating-size: 3rem;              /* WhatsApp and accessibility squares */
  --stage-ratio-full: 3 / 4;
  --stage-ratio-card: 4 / 5;
  --stage-ratio-line: 1 / 1;
  --line-thumb: 4.5rem;               /* 72 */
}

/* Reduced motion: the reduced state is a complete design, not a broken one. */
@media (prefers-reduced-motion: reduce) {
  body.nilshop,
#lp-nilshop {
    --dur-hover: 0ms;
    --dur-state: 0ms;
    --dur-drawer: 0ms;
    --dur-reveal: 0ms;
    --reveal-scale: 1;
    --hover-scale: 1;
    --hero-drift: 0px;
  }
}

/* ----------------------------------------------------------------------------
   Root font-size discipline. Astra sets html { font-size: 91.2% } under 921px,
   shrinking every rem on tablet and phone. The scale above is designed at 100%.
   ---------------------------------------------------------------------------- */
html { font-size: 100% !important; }