/* ==========================================================================
   Leather Company Product Studio design tokens
   Source of truth for colour, type, spacing, radii and shadows.

   Rebuilt for the redesign (design/redesign/IMPLEMENTATION_PLAN.md, lane 1)
   from design/redesign/studio-redesign.html, the tested dummy. Light is the
   bare :root. Dark only redefines tokens, twice: once behind the browser's own
   preference and once behind an explicit data-theme="dark" on the root, so a
   future theme switch wins in both directions.

   Brand cues taken from leathercompany.co.uk on 6 July 2026:
   white and ivory product grounds, warm near-black text, cognac and
   chestnut leather tones in product photography.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     Colour: grounds and ink
     ------------------------------------------------------------------ */
  --paper:          #FAF8F4;  /* app background. Warm ivory, from the site's off-white product grounds */
  --surface:        #FFFFFF;  /* cards, tables, panels. Pure white, matches packshot backgrounds */
  --surface-sunken: #F3EFE8;  /* wells, code fields, table header rows. Neutral warmed toward the accent */
  --ink:            #241E17;  /* primary text. Warm near-black, from site body text */
  /* THE TWO QUIET TIERS CLEAR 4.5:1 ON EVERY GROUND (lane 5). They did not: the
     faint tier was #9A8F81, which is 3.17:1 on white, so a timestamp, a queue
     count or a column head was below the readable floor at 12 and 13px. Both are
     a step darker now, measured against paper, surface, sunken and all four
     semantic tints and the three tiers are still clearly apart:
     ink 13.7:1, soft 7.2:1, faint 4.6:1 at worst. */
  --ink-soft:       #514B41;  /* secondary text. Warm grey, hue biased toward the tan accent */
  --ink-faint:      #6F675D;  /* placeholders, timestamps, quiet labels */
  --line:           #E8E1D6;  /* hairline borders and dividers, warm neutral */
  --line-strong:    #D2C7B8;  /* input borders, emphasised rules */
  --scrim:          rgba(36, 30, 23, .38); /* behind the Details drawer and the side panel */

  /* ------------------------------------------------------------------
     Colour: accent
     Cognac tan drawn from Ashwood hides in the brand's product
     photography (chestnut briefcases, cognac holdalls). One accent only.
     ------------------------------------------------------------------ */
  --tan:       #975825;             /* primary actions, active tab, links */
  --tan-deep:  #7C4519;             /* hover and pressed states */
  --tan-tint:  #F4E8DB;             /* selected rows, accent-tinted chips */
  --tan-ring:  rgba(156, 91, 38, .35); /* focus ring */

  /* ------------------------------------------------------------------
     Colour: semantic. Separate from the accent, never decorative.
     All neutrals-derived, no brand source, chosen for contrast on white AND on
     their own tint, because every one of them is used as a chip: a pill, a
     score, the read-only strip and the segment that is on. Measured, not
     eyeballed, so each clears 4.5:1 at the 12px the chips are set in (lane 5
     moved three of them a shade darker to get there).
     ------------------------------------------------------------------ */
  --ok:          #3C764E;  /* approved, live, success */
  --ok-tint:     #E7F0E9;
  --warn:        #866713;  /* in review, attention */
  --warn-tint:   #F6EFD6;
  --danger:      #AE3E2C;  /* blocked, errors, destructive actions */
  --danger-tint: #F8E7E3;
  --info:        #44618C;  /* photos matched, informational */
  --info-tint:   #E9EEF5;

  /* Status pill mapping (see DESIGN_SPEC.md, Status pill)
     new            ink-faint on surface-sunken   neutral, nothing done yet
     photos-matched info on info-tint             assets located
     copy-drafted   tan on tan-tint               studio has produced content
     in-review      warn on warn-tint             waiting on a human
     approved       ok on ok-tint, outline        human said yes, not written
     live           white on ok, solid            written to the store
     blocked        danger on danger-tint         needs intervention */

  /* ------------------------------------------------------------------
     Typography
     Inter for the UI and Source Serif 4 for display, each with the old
     system stack behind it, so a page with no webfonts still reads the
     way it did. Mono is for SKUs, handles and any value that gets copied
     into Shopify.
     ------------------------------------------------------------------ */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale, 14px base. Desktop-first internal tool */
  --text-xs:   0.75rem;   /* 12px  timestamps, counters, table meta */
  --text-sm:   0.8125rem; /* 13px  labels, pills, secondary UI */
  --text-base: 0.875rem;  /* 14px  body, table cells, inputs */
  --text-md:   1rem;      /* 16px  field values, card titles */
  --text-lg:   1.1875rem; /* 19px  section headings */
  --text-xl:   1.5rem;    /* 24px  section titles */
  --text-2xl:  1.875rem;  /* 30px  product title, login wordmark */
  --text-3xl:  2.4rem;    /* 38px  page title */

  --leading-tight: 1.25;
  --leading-body:  1.55;

  --tracking-label: 0.06em; /* uppercase labels and eyebrows */

  /* ------------------------------------------------------------------
     Spacing, 4px base
     ------------------------------------------------------------------ */
  --s-1: 0.25rem;  /*  4px */
  --s-2: 0.5rem;   /*  8px */
  --s-3: 0.75rem;  /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */

  /* ------------------------------------------------------------------
     Radii
     ------------------------------------------------------------------ */
  --r-sm:   4px;    /* inputs, chips, thumbnails */
  --r-md:   8px;    /* buttons, field cards */
  --r-lg:   12px;   /* panels, tables, modals */
  --r-pill: 999px;  /* status pills, filter chips */

  /* ------------------------------------------------------------------
     Shadows. Warm and quiet, no dashboard gloss
     ------------------------------------------------------------------ */
  --shadow-card:  0 1px 2px rgba(36, 30, 23, 0.05);
  --shadow-raise: 0 6px 26px rgba(36, 30, 23, 0.13); /* drawer and side panel */
  --shadow-bar:   0 -2px 14px rgba(36, 30, 23, 0.09); /* sticky approval bar */

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --page-max: 1240px;
  --topbar-h: 56px;
  --store-banner-h: 28px; /* store-mode strip above the top bar */

  color-scheme: light;
}

/* DARK, the browser's own preference. Guarded with :not([data-theme="light"])
   so an explicit light choice still wins here. Only tokens change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:          #15120E;
    --surface:        #1D1914;
    --surface-sunken: #26211A;
    --ink:            #F2EDE4;
    --ink-soft:       #CFC4B2;
    --ink-faint:      #A39481;
    --line:           #332C23;
    --line-strong:    #4C4237;
    --scrim:          rgba(0, 0, 0, .6);
    --tan:            #D08A4E;
    --tan-deep:       #E5A268;
    --tan-tint:       #3A2A1B;
    --tan-ring:       rgba(208, 138, 78, .45);
    --ok:          #74B68A; --ok-tint:     #1D2E23;
    --warn:        #D6B255; --warn-tint:   #2E2715;
    --danger:      #E5806B; --danger-tint: #33201B;
    --info:        #87A0CB; --info-tint:   #1C2430;
    --shadow-card:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow-raise: 0 6px 26px rgba(0, 0, 0, .55);
    --shadow-bar:   0 -2px 14px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* DARK, chosen explicitly. Same tokens, so the choice beats the preference. */
:root[data-theme="dark"] {
  --paper:          #15120E;
  --surface:        #1D1914;
  --surface-sunken: #26211A;
  --ink:            #F2EDE4;
  --ink-soft:       #CFC4B2;
  --ink-faint:      #A39481;
  --line:           #332C23;
  --line-strong:    #4C4237;
  --scrim:          rgba(0, 0, 0, .6);
  --tan:            #D08A4E;
  --tan-deep:       #E5A268;
  --tan-tint:       #3A2A1B;
  --tan-ring:       rgba(208, 138, 78, .45);
  --ok:          #74B68A; --ok-tint:     #1D2E23;
  --warn:        #D6B255; --warn-tint:   #2E2715;
  --danger:      #E5806B; --danger-tint: #33201B;
  --info:        #87A0CB; --info-tint:   #1C2430;
  --shadow-card:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-raise: 0 6px 26px rgba(0, 0, 0, .55);
  --shadow-bar:   0 -2px 14px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* Base element defaults shared by all screens */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--tan); }

:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px;
}

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