/* ============================================================
   BRUTALS.AGENCY — DESIGN TOKENS v1.0
   The single source of truth. Everything visual derives from here.
   ============================================================ */

:root {
  /* —————————— COLOR / CORE —————————— */
  --color-ink:       #161515;   /* near-black, body & brand mass */
  --color-paper:     #f7f7f7;   /* off-white, default surface */
  --color-signal:    #f61c1c;   /* brand red, action + accent */
  --color-pure-black:#000000;
  --color-pure-white:#ffffff;

  /* —————————— COLOR / NEUTRAL RAMP —————————— */
  --color-ash-900:   #161515;
  --color-ash-800:   #232121;
  --color-ash-700:   #2e2c2c;
  --color-ash-600:   #4a4747;
  --color-ash-500:   #6b6868;
  --color-ash-400:   #989494;
  --color-ash-300:   #c1bebe;
  --color-ash-200:   #dad7d7;
  --color-ash-100:   #ebe9e9;
  --color-ash-050:   #f3f1f1;
  --color-ash-025:   #f7f7f7;

  /* —————————— COLOR / SIGNAL RAMP —————————— */
  --color-signal-900: #6a0808;
  --color-signal-700: #b41212;
  --color-signal-500: #f61c1c;
  --color-signal-300: #ff8080;
  --color-signal-100: #ffd7d7;
  --color-signal-050: #fff0f0;

  /* —————————— COLOR / SUPPORT (paper goods, status) —————————— */
  --color-cream:     #efece3;   /* warm paper for invoices/letters */
  --color-cream-deep:#e3dfd0;
  --color-amber:     #f6b51c;   /* caution, highlight (use sparingly) */
  --color-mint:      #1cf67e;   /* success (use sparingly) */
  --color-ocean:     #1c5cf6;   /* link/info (use sparingly) */

  /* —————————— TYPE —————————— */
  --font-sans: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — modular, slightly compressed ratio (1.25) */
  --fs-3xs:   10px;
  --fs-2xs:   12px;
  --fs-xs:    13px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   120px;
  --fs-7xl:   168px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-loose:   1.6;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.24em;

  /* —————————— SPACE / 4px base —————————— */
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   192px;
  --space-12:   256px;

  /* —————————— RADIUS —————————— */
  --radius-0:    0px;
  --radius-1:    4px;
  --radius-2:    8px;
  --radius-3:    16px;
  --radius-4:    28px;       /* squircle — matches logo geometry */
  --radius-5:    48px;
  --radius-full: 9999px;

  /* —————————— BORDER —————————— */
  --bw-hair:  1px;
  --bw-line:  2px;
  --bw-rule:  4px;
  --bw-slab:  8px;

  /* —————————— SHADOW —————————— */
  --shadow-none:   none;
  --shadow-soft:   0 1px 2px rgba(22,21,21,.06), 0 4px 12px rgba(22,21,21,.04);
  --shadow-card:   0 2px 4px rgba(22,21,21,.06), 0 12px 32px rgba(22,21,21,.08);
  --shadow-pop:    0 16px 48px rgba(22,21,21,.18);
  --shadow-brutal: 8px 8px 0 0 var(--color-ink);
  --shadow-brutal-red: 8px 8px 0 0 var(--color-signal);

  /* —————————— MOTION —————————— */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.5,0,.85,.5);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* —————————— LAYOUT —————————— */
  --grid-gutter: 24px;
  --grid-cols:   12;
  --container-narrow: 880px;
  --container-base:   1240px;
  --container-wide:   1600px;
}