/*
 * AdCat Design Tokens
 * Neo-utilitarian noir: black ink on warm paper, yolk-yellow accent.
 * Preview-area gold gradient (#AC7524/#E7C034/#FFE664) lives in ad_block_preview.css — do NOT unify.
 * All tokens live on :root so page-level CSS + Bootstrap overrides share vocabulary.
 */

:root {
  /* ─── Color: ink ─── */
  --ink:          #141414;   /* primary text, dark chrome */
  --ink-2:        #2A2A2A;   /* softened dark (borders on dark bg) */
  --ink-3:        #595450;   /* secondary text, captions */
  --ink-4:        #8C8678;   /* tertiary text, placeholders */

  /* ─── Color: paper ─── */
  --paper:        #FAF8F2;   /* app background (warm white) */
  --paper-2:      #F2EFE6;   /* card / surface alt */
  --paper-3:      #E8E4D8;   /* subtle emphasis */
  --line:         #E4E1D6;   /* hairline */
  --line-strong:  #C9C5B8;   /* stronger hairline */

  /* ─── Color: brand accent (logo-sampled yolk) ─── */
  --yolk:         #FFD23F;   /* accent: CTAs, active state, brand */
  --yolk-deep:    #E5B82A;   /* yolk hover / pressed */
  --yolk-wash:    #FFF4C4;   /* yolk at low opacity for hover bg */
  --yolk-ink:     #141414;   /* text on yolk */

  /* ─── Color: semantic (desaturated to sit on paper) ─── */
  --success:      #2D7A4F;
  --success-wash: #E5F0E9;
  --warn:         #B8860B;
  --warn-wash:    #FAEFD0;
  --danger:       #B4312C;
  --danger-wash:  #F6DDDB;
  --info:         #3A6B8F;
  --info-wash:    #DCE8F0;

  /* ─── Type: families ─── */
  --font-sans:    "IBM Plex Sans TC", "IBM Plex Sans", -apple-system, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ─── Type: scale (rem, 4px base) ─── */
  --text-xs:      0.75rem;   /* 12 */
  --text-sm:      0.8125rem; /* 13 */
  --text-base:    0.875rem;  /* 14 — body default for dense admin */
  --text-md:      1rem;      /* 16 */
  --text-lg:      1.125rem;  /* 18 */
  --text-xl:      1.375rem;  /* 22 */
  --text-2xl:     1.75rem;   /* 28 */
  --text-3xl:     2.25rem;   /* 36 */
  --text-4xl:     3rem;      /* 48 */

  /* ─── Type: tracking ─── */
  --track-tight:  -0.02em;
  --track-body:   -0.005em;
  --track-label:  0.04em;    /* uppercase labels */
  --track-mono:   0;

  /* ─── Spacing (4px grid) ─── */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;
  --space-16:     64px;

  /* ─── Radius (modest, tool-feeling) ─── */
  --radius-sm:    3px;
  --radius-md:    6px;
  --radius-lg:    10px;

  /* ─── Motion ─── */
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Elevation (hairline-first, shadow rarely) ─── */
  --shadow-focus: 0 0 0 3px rgba(255, 210, 63, 0.35);
  --shadow-pop:   0 2px 0 var(--ink);       /* hard-shadow pop for hover */
  --shadow-lift:  0 8px 24px rgba(20, 20, 20, 0.06);
}