/* Najmat Almadina — design tokens.
   Direction B (clean & lite) committed 2026-05-27.
   Used by every component CSS file; load before base.css. */

:root {
  /* ───────── Palette ───────── */
  --orange:      #F5811C;
  --orange-soft: #F59E4A;          /* hover lift on cream */
  --ink:         #14140F;          /* primary text, header, footer */
  --ink-deep:    #0F0F0B;          /* footer (deeper than header) */
  --warm-ink:    #2C2620;          /* secondary text on cream */
  --cream:       #FAF8F3;          /* hero, listings */
  --surface-2:   #F3F0E9;          /* section alternation on cream */
  --steel:       #8E8E8E;          /* dividers, dimmed labels */
  --steel-soft:  #C9C9C2;          /* hairlines */
  --paper:       #FFFFFF;          /* cards, input bg */
  --warning:     #F4CD17;          /* low-stock / cataloguing chip */
  --alert:       #E84E2C;          /* sale tag, urgent */
  --success:     #2BA86A;          /* in-stock badge */

  /* ───────── Type ───────── */
  --font-sans:  'Switzer', 'Helvetica Neue', Inter, system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-9:   9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-56: 56px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight:   -0.030em;
  --tracking-snug:    -0.022em;
  --tracking-default: -0.012em;
  --tracking-wide:    0.16em;       /* mono labels */

  /* ───────── Spacing (4px grid) ───────── */
  --s-4:    4px;
  --s-8:    8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-20:  20px;
  --s-24:  24px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-64:  64px;
  --s-80:  80px;
  --s-96:  96px;
  --s-120: 120px;
  --s-160: 160px;

  /* ───────── Sizes ───────── */
  --rail:        1280px;            /* max content width on 1440 viewport */
  --header-h:    64px;
  --radius-sm:   3px;
  --radius-md:   4px;

  /* ───────── Motion ───────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  120ms;
  --dur-default: 200ms;
  --dur-slow:  300ms;

  /* ───────── Focus ───────── */
  --focus-ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--orange);
}