/* ============================================================
   ATELIER DESIGN TOKENS — v1.0 · August 2026
   Machine-usable custom properties for app.atelier.inc.
   Source of truth: atelier-platform/src/app/client-shell.css,
   src/components/ui/button.css, src/app/globals.css,
   src/components/items/ItemStatusBar.module.css.
   Import once at :root. Prefix: --at-*
   ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────── */
  --at-font-sans: 'Roobert', Helvetica, Arial, sans-serif;
  --at-font-mono: 'Roobert Mono', ui-monospace, 'SFMono-Regular', monospace;

  --at-body-size: 16px;
  --at-body-weight: 300;          /* Roobert Regular file maps 300–400 */
  --at-body-lh: 1.6;
  --at-display-weight: 300;
  --at-display-lh: 1.0;
  --at-heading-ls: -0.015em;
  --at-strong-weight: 500;        /* b/strong render Medium */

  --at-label-size: 10px;          /* mono eyebrow / label / meta floor */
  --at-label-ls: 0;               /* 🔴 mono kerning removed site-wide 2026-08-04 */
  --at-label-case: uppercase;
  --at-card-text: 0.75rem;        /* standardized card body/meta text (12px) */

  --at-btn-font: var(--at-font-mono);
  --at-btn-ls: 0;                 /* platform buttons: mono uppercase, zero tracking */
  --at-btn-size-sm: 0.66rem;
  --at-btn-size-md: 0.7rem;
  --at-btn-size-lg: 0.72rem;

  /* ── Color · core ───────────────────────────────────────── */
  --at-ink: #171512;
  --at-ink-2: #3A362F;
  --at-muted: #757575;            /* portal muted */
  --at-muted-2: #6D675F;          /* small-text safe muted (5.3:1 on paper) */
  --at-paper: #FAFAF8;            /* app background */
  --at-white: #FFFFFF;
  --at-dark: #14120E;             /* rail / hero dark */
  --at-line: #EEEEEE;             /* hairline */
  --at-line-2: rgba(23, 21, 18, 0.10);

  /* ⛔ BONE (#E9E5DC / #EFECE4 / #F5F2EB) is BANNED for platform UI
     backgrounds — legacy marketing homepage only. Do not token-ify. */

  /* ── Color · accent ─────────────────────────────────────── */
  --at-accent: #F1613A;
  --at-accent-light: #F4845F;
  --at-accent-dark: #D94E2A;
  --at-accent-tint: rgba(241, 97, 58, 0.08);
  --at-accent-focus: rgba(241, 97, 58, 0.45);

  /* ── Color · status ─────────────────────────────────────── */
  --at-green: #3D7A4E;            /* approved / connected text */
  --at-green-tint: #EAF3EC;
  --at-green-line: #CFE4D4;
  --at-green-spine: #6E9B6F;      /* shipped spine bar */
  --at-green-spine-dark: #4B7A4E;
  --at-green-dot: #7FBF8A;        /* done status dot */
  --at-amber: #9C6F1C;            /* revise / pending-review text */
  --at-amber-tint: #FAF3E3;
  --at-amber-line: #EEE0BD;
  --at-gold-dot: #E7B84B;         /* review/build status dot */
  --at-red: #C0392B;              /* rejected / destructive */
  --at-red-dark: #A93226;
  --at-red-tint: rgba(192, 57, 43, 0.07);
  --at-red-line: rgba(192, 57, 43, 0.25);
  --at-blue: #6E93C9;             /* transit */
  --at-neutral: #6D675F;          /* pending / draft text */
  --at-neutral-tint: #F1F0EE;
  --at-neutral-line: #E3E1DD;
  --at-draft: #CFC9BC;            /* draft spine bar */
  --at-draft-dot: #C8C2B6;

  /* ── Color · progress / spine ───────────────────────────── */
  --at-track: #ECECEC;            /* status-bar track */
  --at-track-line: #EEEEEE;
  --at-spine-dot-done: #C74A2E;
  --at-fill-gradient: linear-gradient(90deg, #D94E2A 0%, #F1613A 100%);

  /* ── Glass (standing rule 2026-08-02: borderless, ~30%) ─── */
  --at-glass-bg: rgba(10, 10, 8, 0.30);
  --at-glass-blur: 16px;          /* 16–18px range in production */
  --at-glass-text: #FFFFFF;

  /* ── Radius (rectangular — NEVER pill) ──────────────────── */
  --at-r-micro: 2px;              /* bars, strips, dense-row tracks */
  --at-r-chip: 4px;               /* chips, tags, detail bar track */
  --at-r-control: 6px;            /* buttons, inputs, toggles, dropzone, thumbs */
  --at-r-menu: 8px;               /* dropdown menus, popovers */
  --at-r-card: 10px;              /* cards, panels, modals */

  /* ── Elevation ──────────────────────────────────────────── */
  --at-shadow-menu: 0 14px 34px -18px rgba(23, 21, 18, 0.35);
  --at-shadow-icon-chip: 0 2px 7px -2px rgba(217, 78, 42, 0.55);
  --at-shadow-modal: 0 30px 80px -30px rgba(20, 18, 14, 0.5);

  /* ── Spacing (4/8 scale) ────────────────────────────────── */
  --at-s-1: 4px;  --at-s-2: 8px;  --at-s-3: 12px; --at-s-4: 16px;
  --at-s-5: 20px; --at-s-6: 24px; --at-s-8: 32px; --at-s-10: 40px;
  --at-s-12: 48px; --at-s-16: 64px;
  --at-gutter: clamp(22px, 4vw, 64px);

  /* ── Motion ─────────────────────────────────────────────── */
  --at-t-fast: 0.15s ease;        /* button color/bg/border */
  --at-t-ui: 0.18s ease;          /* borders, quiet hovers */
  --at-t-med: 0.25s ease;         /* legacy button, arrows */
  --at-t-slow: 0.3s ease;         /* card lifts, overlays */
  --at-t-fill: 0.7s ease;         /* status-bar fill width */
  --at-pulse: 1.8s;               /* current-stage dot pulse */
  --at-toast-in: 200ms;           /* toast slide-in */

  /* ── Layout / breakpoints (for reference in calc/media) ─── */
  --at-bp-wide: 1360px;
  --at-bp-tablet: 900px;
  --at-bp-mobile-nav: 767px;      /* MobileNav appears ≤767px */
  --at-bp-narrow: 640px;
  --at-bp-target-min: 390px;      /* design floor: iPhone 12/13/14 */
  --at-touch-target: 44px;
  --at-mobile-nav-clearance: calc(3.5rem + 12px + env(safe-area-inset-bottom, 0px));
}