/* =========================================================================
   Patter Design System — CSS Tokens
   Neo-Brutalist Technical Minimalist Tokens & Utilities
   Source: https://www.getpatter.com/
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* --- Ink & Neutrals --- */
  --ink:               #000000;
  --ink-2:             #1a1a1a;
  --ink-muted:         #aaaaaa;
  --ink-faint:         #cbcbcb;
  --line:              #eeeeee;
  --line-2:            #e3e3e6;

  /* --- Backgrounds & Surfaces --- */
  --bg:                #ffffff;
  --bg-cream:          #f6f6f4;
  --bg-warm:           #fff8ef;
  --bg-cool:           #ebf0f5;
  --bg-fog:            #f4f7fb;
  --code-bg:           #fafaf8;
  --code-fg:           #1a1a1a;
  --code-border:       var(--line);

  /* --- Signature Peach Palette --- */
  --peach:             #df9367;
  --peach-light:       #efc5ac;
  --peach-cream:       #fff8ef;
  --peach-deep:        #c97a4c;

  /* --- Tech Blues & Status --- */
  --blue-1:            #278eff;
  --blue-2:            #93c5fd;
  --blue-3:            #5a96f0;
  --blue-cool:         #3b82f6;
  --status-live:       #2ea043;
  --carrier-twilio:    #d23b3b;
  --carrier-telnyx:    #1ea672;

  /* --- Dot Grid Background --- */
  --dot:               #dad8de;
  --dot-soft:          #e8e6ec;
  --dot-grid:          radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  --dot-grid-size:     18px 18px;

  /* --- Typography --- */
  --font-sans:         "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display:      var(--font-sans);

  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-19:  19px;
  --fs-20:  20px;
  --fs-22:  22px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-56:  56px;
  --fs-64:  64px;
  --fs-128: 128px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  /* --- Spacing --- */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  --container-max:     1280px;
  --container-tight:   1080px;

  /* --- Borders & Radii --- */
  --r-1:    4px;
  --r-2:    8px;
  --r-3:    12px;
  --r-4:    16px;
  --r-5:    24px;
  --r-pill: 999px;

  --bw-hair: 1px;
  --bw-1:    1.5px;
  --bw-2:    2px;
  --bw-3:    3px;

  /* --- Hard Neo-Brutalist Shadows --- */
  --shadow-none:       none;
  --shadow-subtle:     0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card:       0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-hard-sm:    0 4px 0 0 var(--ink);
  --shadow-hard-md:    12px 12px 0 -1px var(--bg-cream), 12px 12px 0 0 var(--ink);
  --shadow-mock:       0 16px 0 -8px var(--bg-cream), 0 16px 0 -6px var(--ink);

  /* --- Transitions --- */
  --motion-fast:       150ms;
  --motion:            220ms;
  --motion-slow:       320ms;
  --easing:            cubic-bezier(0.2, 0.0, 0.0, 1);
}