/* The ONLY file in Soch Tools allowed to name a colour (test-enforced) — so the brand lives in one place.
   Design language: a high-end retail-operations suite for a fashion house. Warm near-neutrals (never
   cold grey), the SOCH crimson as the single bold accent, and three quiet department hues that let a
   manager tell Buying from Marketing from Finance at a glance. Light theme only, on purpose: the three
   child tools are not yet tokenised, so a dark chrome over their light bodies would read as broken. */
:root {
  /* Tells the browser which way to paint native UI it owns — scrollbars, select popups, date
     pickers, spinners. Without it they are painted light on every theme, which on the dark theme
     puts a bright grey slab under every wide table. It belongs here because this is where the
     theme is chosen. */
  color-scheme: light;

  /* ── Brand ── */
  --soch-accent:        #b8354a;   /* SOCH crimson */
  --soch-accent-strong: #93273b;   /* hover / pressed */
  --soch-accent-weak:   #f7e6e9;   /* tint: active states, badges, focus wash */
  --soch-on-accent:     #ffffff;
  --soch-danger:        #c1272d;
  --soch-danger-weak:   #f9e7e7;
  --soch-success:       #2f7a54;
  --soch-success-weak:  #e6f2ea;
  --soch-warn:          #9a6b12;
  --soch-warn-weak:     #f6edda;

  /* ── Department identity (quiet, warm-leaning; the crimson stays the loudest thing on screen) ── */
  --soch-dept-buying:    #2f6a97;   /* blue */
  --soch-dept-marketing: #7a4a93;   /* violet */
  --soch-dept-finance:   #2f7a54;   /* green */
  --soch-dept-it:        #8a6d1f;   /* amber-brown — distinct from ecom/merch, which fall back to muted */

  /* ── Warm neutrals — the ground is chosen, not defaulted (a whisper of the crimson's warmth) ── */
  --soch-bg:        #fdfcfb;
  --soch-surface:   #f6f4f2;
  --soch-surface-2: #edeae6;
  --soch-fg:        #191419;   /* warm near-black, faint plum bias toward the accent */
  --soch-muted:     #746d72;
  --soch-border:    #e7e2de;
  --soch-border-2:  #d9d3ce;

  /* ── Elevation — soft, warm-tinted shadows (colours, so they live here) ── */
  --soch-shadow-1: 0 1px 2px rgba(40, 25, 30, .05), 0 1px 3px rgba(40, 25, 30, .06);
  --soch-shadow-2: 0 2px 6px rgba(40, 25, 30, .06), 0 8px 24px rgba(40, 25, 30, .09);
  --soch-shadow-3: 0 4px 12px rgba(40, 25, 30, .08), 0 18px 48px rgba(40, 25, 30, .13);
  --soch-ring:     0 0 0 3px var(--soch-accent-weak);

  /* ── Space scale (8px rhythm) ── */
  --soch-space-1: 4px;
  --soch-space-2: 8px;
  --soch-space-3: 16px;
  --soch-space-4: 24px;
  --soch-space-5: 40px;
  --soch-space-6: 64px;

  /* ── Type scale — comfortable body, strong display contrast ── */
  --soch-text-xs:  12px;
  --soch-text-sm:  13px;
  --soch-text:     15px;
  --soch-text-lg:  18px;
  --soch-text-xl:  22px;
  --soch-text-2xl: 30px;
  --soch-text-3xl: 40px;
  --soch-leading:  1.55;

  /* ── Shape / motion ── */
  --soch-radius-sm: 8px;
  --soch-radius:    11px;
  --soch-radius-lg: 16px;
  --soch-transition:      160ms cubic-bezier(.2, 0, 0, 1);
  --soch-transition-slow: 320ms cubic-bezier(.2, 0, 0, 1);
  --soch-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Warm dark — a plum-biased near-black (never flat grey), the crimson lightened so it stays vivid on
   the dark ground, department hues lightened. Applied via data-theme (the chrome sets it suite-wide,
   defaulting to the OS preference). Only the colour tokens change; space/type/shape carry over. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --soch-accent:        #e07184;
  --soch-accent-strong: #c85669;
  --soch-accent-weak:   #3a1f24;
  --soch-on-accent:     #ffffff;
  --soch-danger:        #e5767b;
  --soch-danger-weak:   #3a1e20;
  --soch-success:       #64c088;
  --soch-success-weak:  #16281c;
  --soch-warn:          #d6b05a;
  --soch-warn-weak:     #2a2413;

  --soch-dept-buying:    #6aa6d6;
  --soch-dept-marketing: #b591d8;
  --soch-dept-finance:   #6cc08a;
  --soch-dept-it:        #d6b05a;

  --soch-bg:        #17141a;
  --soch-surface:   #1e1a21;
  --soch-surface-2: #282430;
  --soch-fg:        #ece8ec;
  --soch-muted:     #a39aa1;
  --soch-border:    #322c36;
  --soch-border-2:  #433c47;

  --soch-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --soch-shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .55);
  --soch-shadow-3: 0 4px 12px rgba(0, 0, 0, .55), 0 18px 48px rgba(0, 0, 0, .6);
  --soch-ring:     0 0 0 3px var(--soch-accent-weak);
}