/* Toolspot4u Child Theme — Design Tokens
   Paper & Ember system (v3). All other CSS files consume these custom
   properties — never reference raw hex values outside this file. */

:root {

  /* ── Core palette ─────────────────────────────────────────────────────── */
  --paper:       #F2EFE9;        /* page background */
  --linen:       #E8E2D6;        /* card / section background */
  --linen-deep:  #DED6C6;        /* deepened card / hover state */
  --ink:         #1D1B16;        /* primary text, dark UI elements */
  --ink-60:      rgba(29,27,22,.62);  /* muted text, secondary labels */
  --ink-30:      rgba(29,27,22,.30);  /* borders, placeholder text */
  --ink-12:      rgba(29,27,22,.12);  /* subtle dividers, focus rings */
  --ember:       #FF5C00;        /* primary accent — CTAs, active states */
  --ember-deep:  #D64A00;        /* hover / pressed variant of ember */

  /* ── Typography families ─────────────────────────────────────────────── */
  --disp:  'Magra', sans-serif;           /* headings, logo, display numbers */
  --body:  'Libre Franklin', sans-serif;  /* body copy, UI labels */
  --mono:  'IBM Plex Mono', monospace;    /* eyebrows, chips, metadata, code */

  /* ── Spacing scale (multiples of 4px) ───────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-22:  88px;

  /* ── Border radius scale ─────────────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    20px;
  --r-2xl:   24px;
  --r-3xl:   28px;
  --r-4xl:   32px;
  --r-pill:  999px;

  /* ── Shadow scale ────────────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px -2px rgba(29,27,22,.10);
  --shadow-md:   0 4px 24px -8px rgba(29,27,22,.14);
  --shadow-lg:   0 8px 40px -12px rgba(29,27,22,.18);
  --shadow-ember: 0 16px 40px -10px rgba(214,74,0,.40);
  --shadow-ink:   0 16px 40px -10px rgba(0,0,0,.32);

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   1;
  --z-card:    2;
  --z-sticky:  10;
  --z-nav:     50;
  --z-overlay: 100;
  --z-intro:   200;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --max-width:  1200px;
  --nav-height: 72px;
  --wrap-px:    32px;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --dur-fast:   0.15s;
  --dur-std:    0.22s;
  --dur-slow:   0.40s;
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ── Semantic form tokens ────────────────────────────────────────────── */
  --f-h:              48px;    /* field height */
  --f-h-sm:           40px;
  --f-h-lg:           56px;
  --f-px:             16px;    /* horizontal padding */
  --f-py:             12px;    /* vertical padding */
  --f-radius:         var(--r-md);    /* 12px */
  --f-bg:             #ffffff;
  --f-bg-disabled:    var(--linen);
  --f-border:         var(--ink-30);
  --f-border-hover:   var(--ink-60);
  --f-border-focus:   var(--ember);
  --f-border-error:   #dc2626;
  --f-border-success: #16a34a;
  --f-text:           var(--ink);
  --f-placeholder:    var(--ink-30);
  --f-label-font:     var(--mono);
  --f-label-size:     0.72rem;
  --f-label-tracking: 0.06em;
  --f-focus-ring:     0 0 0 3px rgba(255,92,0,.14);
  --f-error-ring:     0 0 0 3px rgba(220,38,38,.12);
  --f-success-ring:   0 0 0 3px rgba(22,163,74,.12);

  /* ── State colours ───────────────────────────────────────────────────── */
  --state-error:    #dc2626;
  --state-success:  #16a34a;
  --state-warning:  #d97706;
  --state-info:     #2563eb;
}