/* ==========================================================================
   Leather Company Product Studio design tokens
   Source of truth for colour, type, spacing, radii and shadows.
   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 */
  --ink-soft:       #6F6457;  /* secondary text. Warm grey, hue biased toward the tan accent */
  --ink-faint:      #9A8F81;  /* placeholders, timestamps, disabled labels */
  --line:           #E8E1D6;  /* hairline borders and dividers, warm neutral */
  --line-strong:    #D2C7B8;  /* input borders, emphasised rules */

  /* ------------------------------------------------------------------
     Colour: accent
     Cognac tan drawn from Ashwood hides in the brand's product
     photography (chestnut briefcases, cognac holdalls). One accent only.
     ------------------------------------------------------------------ */
  --tan:       #9C5B26;             /* 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.
     ------------------------------------------------------------------ */
  --ok:          #3E7A50;  /* approved, live, success */
  --ok-tint:     #E7F0E9;
  --warn:        #8A6A14;  /* 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
     No webfonts. The brand site runs a clean grotesque so the UI uses
     the system sans. The serif display stack echoes the premium
     stationery feel of a heritage leather label. Mono is for SKUs,
     handles and any value that gets copied into Shopify.
     ------------------------------------------------------------------ */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    -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  page titles */
  --text-2xl:  1.875rem;  /* 30px  summary counts, login wordmark */

  --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 4px 16px rgba(36, 30, 23, 0.10);
  --shadow-bar:   0 -2px 12px rgba(36, 30, 23, 0.08); /* sticky approval bar */

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --page-max: 1280px;
  --topbar-h: 56px;
}

/* Base element defaults shared by all screens */
html { box-sizing: border-box; }
*, *::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;
}

: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;
  }
}

/* ==========================================================================
   REDESIGN TOKENS, phase 1 (2 October 2026)
   The new shell at /home, /pages, /watchlist and /settings renders from these.
   Namespaced --rd-* on purpose: the seven old screens keep the tokens above
   exactly as they are until the redesign replaces them.
   Palette and type from design/UX_REDESIGN_SPEC.md and the agreed mockup:
   Leather Company cream paper, one tan accent, Cormorant Garamond headings,
   Archivo body. Theme aware in all three states - explicit light, explicit
   dark and the system default.
   ========================================================================== */

:root {
  --rd-paper:   #F6F1EA;  /* panels, the top bar, table wells */
  --rd-bg:      #FBF8F3;  /* the page ground */
  --rd-ink:     #584B3C;  /* body text */
  --rd-soft:    #8A7D6D;  /* secondary text, table headings, meta */
  --rd-line:    #D9CFC2;  /* hairlines */
  --rd-tan:     #7A4B23;  /* the one accent: links, the active tab, filled buttons */
  --rd-good:    #4F7A3A;
  --rd-amber:   #B07A1E;
  --rd-red:     #A8402F;
  --rd-shadow:  0 1px 2px rgba(88, 75, 60, .10), 0 10px 26px rgba(88, 75, 60, .12);

  /* The two data-series slots, for the history graphs and nothing else. They
     are deliberately NOT the tan accent: the accent means "this is a control",
     and a line that wears it reads as something to click. Both slots were run
     through the data-viz palette validator against this surface (#FBF8F3) and
     against the dark one, in that order, and pass the lightness band, the
     chroma floor, colour-blind separation and the 3:1 contrast gate. The
     comparison line also carries a dash, so identity never rests on colour. */
  --rd-s1:      #2A78D6;  /* slot 1, blue: this year, Google, the main line */
  --rd-s2:      #EB6834;  /* slot 2, orange: Bing, last year, the second line */

  --rd-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --rd-font-body:    Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rd-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rd-paper:  #2A2521;
    --rd-bg:     #1F1B18;
    --rd-ink:    #EDE6DB;
    --rd-soft:   #B8AC9C;
    --rd-line:   #4A423A;
    --rd-tan:    #D9A273;
    --rd-good:   #8BC46E;
    --rd-amber:  #E0A84A;
    --rd-red:    #E07A66;
    --rd-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px rgba(0, 0, 0, .45);
    --rd-s1:     #3987E5;
    --rd-s2:     #D95926;
  }
}

:root[data-theme="dark"] {
  --rd-paper:  #2A2521;
  --rd-bg:     #1F1B18;
  --rd-ink:    #EDE6DB;
  --rd-soft:   #B8AC9C;
  --rd-line:   #4A423A;
  --rd-tan:    #D9A273;
  --rd-good:   #8BC46E;
  --rd-amber:  #E0A84A;
  --rd-red:    #E07A66;
  --rd-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px rgba(0, 0, 0, .45);
  --rd-s1:     #3987E5;
  --rd-s2:     #D95926;
}