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

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

:root {
  /* --- Ink & Neutrals (WCAG AA Compliant) --- */
  --ink:               #000000;
  --ink-2:             #1a1a1a;
  --ink-muted:         #595959;
  --ink-faint:         #767676;
  --line:              #000000;
  --line-light:        #e5e5e5;
  --line-2:            #d0d0d0;

  /* --- 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:         "IBM Plex 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);
}

/* =========================================================================
   Neo-Brutalist Dark Theme Overrides
   ========================================================================= */
[data-theme="dark"] {
  --ink:               #f5f5f5;
  --ink-2:             #ffffff;
  --ink-muted:         #a3a3a3;
  --ink-faint:         #737373;
  --line:              #f5f5f5;
  --line-light:        #2d3139;
  --line-2:            #383d47;

  --bg:                #0e1015;
  --bg-cream:          #161920;
  --bg-warm:           #1f1c19;
  --bg-cool:           #131a24;
  --bg-fog:            #171b22;
  --code-bg:           #12141a;
  --code-fg:           #f5f5f5;
  --code-border:       var(--line-light);

  --peach:             #df9367;
  --peach-light:       #4d3121;
  --peach-cream:       #261911;
  --peach-deep:        #f3a579;

  --dot:               #252932;
  --dot-soft:          #1c2028;

  --shadow-hard-sm:    0 4px 0 0 #000000;
  --shadow-hard-md:    12px 12px 0 -1px var(--bg-cream), 12px 12px 0 0 #000000;
  --shadow-mock:       0 16px 0 -8px var(--bg-cream), 0 16px 0 -6px #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:               #f5f5f5;
    --ink-2:             #ffffff;
    --ink-muted:         #a3a3a3;
    --ink-faint:         #737373;
    --line:              #f5f5f5;
    --line-light:        #2d3139;
    --line-2:            #383d47;

    --bg:                #0e1015;
    --bg-cream:          #161920;
    --bg-warm:           #1f1c19;
    --bg-cool:           #131a24;
    --bg-fog:            #171b22;
    --code-bg:           #12141a;
    --code-fg:           #f5f5f5;
    --code-border:       var(--line-light);

    --peach:             #df9367;
    --peach-light:       #4d3121;
    --peach-cream:       #261911;
    --peach-deep:        #f3a579;

    --dot:               #252932;
    --dot-soft:          #1c2028;

    --shadow-hard-sm:    0 4px 0 0 #000000;
    --shadow-hard-md:    12px 12px 0 -1px var(--bg-cream), 12px 12px 0 0 #000000;
    --shadow-mock:       0 16px 0 -8px var(--bg-cream), 0 16px 0 -6px #000000;
  }
}

/* =========================================================================
   Accessible Focus Ring (Anti-UI-Slop & UX Architect)
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--peach-deep) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}