/* ═══════════════════════════════════════
   DESIGN TOKENS — ASINCrate Website
   Source: extensions/chrome/src/content/sidebar/styles.css.ts
   ═══════════════════════════════════════ */

:root {
  /* ── Deep Teal / Petrol palette ── */
  --pri:      #1A7F8A;
  --pri-h:    #156972;
  --pri-soft: #E6F4F5;
  --pri-mute: #A8D5D9;
  --pri-deep: #0A5C66;
  --pri-mid:  #0E6B76;
  --pri-wash: #D0EDEE;
  --pri-wash-d: #B8E2E5;
  --grad:     linear-gradient(135deg, var(--pri) 0%, var(--pri-mid) 50%, var(--pri-deep) 100%);

  /* ── Pri alpha tokens ── */
  --pri-a03: rgba(26,127,138,.03);
  --pri-a04: rgba(26,127,138,.04);
  --pri-a06: rgba(26,127,138,.06);
  --pri-a08: rgba(26,127,138,.08);
  --pri-a10: rgba(26,127,138,.1);
  --pri-a12: rgba(26,127,138,.12);
  --pri-a14: rgba(26,127,138,.14);
  --pri-a15: rgba(26,127,138,.15);
  --pri-a20: rgba(26,127,138,.2);
  --pri-a22: rgba(26,127,138,.22);
  --pri-a25: rgba(26,127,138,.25);
  --pri-a35: rgba(26,127,138,.35);

  /* ── Pro / Amber ── */
  --pro:     #F59E0B;
  --pro-light: #FBBF24;
  --pro-bg:  #FFF7E6;
  --pro-grad: linear-gradient(135deg, #F59E0B, #FBBF24);

  /* ── Semantic ── */
  --ok:      #1C9960;
  --ok-bg:   #E7F6EE;
  --ok-t:    #146B44;
  --warn:    #C88A1E;
  --warn-bg: #FFF7E6;
  --warn-t:  #7D5610;
  --err:     #D1453B;
  --err-bg:  #FDECEB;
  --err-t:   #8C2A23;

  /* ── Neutrals (cool slate) ── */
  --n0: #FFFFFF;
  --n1: #F6F8F9;
  --n2: #E8ECEF;
  --n3: #D1D8DE;
  --n4: #A3B0BA;
  --n5: #6B7B87;
  --n6: #4F5D68;
  --n7: #3A464F;
  --n8: #2A333B;
  --n9: #1B2228;

  /* ── Typography ── */
  --font:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-brand: 'Space Grotesk', var(--font);
  --mono:       'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Border radius ── */
  --r:    10px;
  --r-sm: 7px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* ── Shadows ── */
  --sh:    0 1px 3px rgba(27,34,40,.06), 0 4px 12px rgba(27,34,40,.06);
  --sh-md: 0 2px 8px rgba(27,34,40,.06), 0 8px 24px rgba(27,34,40,.08);
  --sh-lg: 0 4px 12px rgba(27,34,40,.08), 0 16px 32px rgba(27,34,40,.1);
  --sh-xl: 0 8px 24px rgba(27,34,40,.1), 0 24px 48px rgba(27,34,40,.12);

  /* ── Spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Easing ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.6,.4,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ── Z-index ── */
  --z-nav: 100;
  --z-modal: 200;

  /* ── Container widths ── */
  --w-sm: 640px;
  --w-md: 768px;
  --w-lg: 1024px;
  --w-xl: 1200px;
  --w-2xl: 1320px;
}