/* ═══════════════════════════════════════════════════════════════
   Blueprint.gg — Design Tokens
   All colors, spacing, typography, shadows, and transitions
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color: Primary ── */
  --color-teal:            #5BB5B5;
  --color-teal-hover:      #4A9E9E;
  --color-teal-dark:       #4A9E9E;
  --color-teal-light:      #E8F5F5;
  --color-teal-wash:       rgba(91, 181, 181, 0.08);
  --color-indigo:          #6366F1;
  --color-indigo-hover:    #4F46E5;
  --color-indigo-light:    #EEF0FF;

  /* ── Color: Neutrals (Slate Scale) ── */
  --color-slate-900:       #0F172A;
  --color-slate-800:       #1E293B;
  --color-slate-700:       #334155;
  --color-slate-600:       #475569;
  --color-slate-500:       #64748B;
  --color-slate-400:       #94A3B8;
  --color-slate-300:       #CBD5E1;
  --color-slate-200:       #E2E8F0;
  --color-slate-100:       #F1F5F9;
  --color-slate-50:        #F8FAFC;
  --color-white:           #FFFFFF;

  /* ── Color: Semantic ── */
  --color-success:         #34D399;
  --color-success-bg:      #ECFDF5;
  --color-success-text:    #059669;
  --color-warning:         #FBBF24;
  --color-warning-bg:      #FFFBEB;
  --color-warning-text:    #D97706;
  --color-danger:          #FB7185;
  --color-danger-bg:       #FFF1F2;
  --color-danger-text:     #E11D48;
  --color-error:           #FB7185;
  --color-info:            #60A5FA;
  --color-info-bg:         #EFF6FF;
  --color-info-text:       #2563EB;

  /* ── Color: Overlays & Alpha ── */
  --color-overlay-white:   rgba(255, 255, 255, 0.95);
  --color-overlay-white-5: rgba(255, 255, 255, 0.05);
  --color-overlay-black-5: rgba(0, 0, 0, 0.05);
  --color-overlay-black-8: rgba(0, 0, 0, 0.08);
  --color-overlay-black-15: rgba(0, 0, 0, 0.15);
  --color-overlay-black-30: rgba(0, 0, 0, 0.3);
  --color-teal-15:         rgba(91, 181, 181, 0.15);
  --color-teal-20:         rgba(91, 181, 181, 0.2);
  --color-teal-light-30:   rgba(232, 245, 245, 0.3);
  --color-indigo-6:        rgba(99, 102, 241, 0.06);
  --color-warning-8:       rgba(245, 158, 11, 0.08);
  --color-success-15:      rgba(5, 150, 105, 0.15);
  --color-warning-15:      rgba(217, 119, 6, 0.15);
  --color-danger-20:       rgba(251, 113, 133, 0.2);
  --color-warning-20:      rgba(251, 191, 36, 0.2);
  --color-info-20:         rgba(96, 165, 250, 0.2);
  --color-success-20:      rgba(52, 211, 153, 0.2);
  --color-teal-12:         rgba(91, 181, 181, 0.12);
  --color-teal-50:         rgba(91, 181, 181, 0.5);
  --color-indigo-12:       rgba(99, 102, 241, 0.12);
  --color-indigo-15:       rgba(99, 102, 241, 0.15);
  --color-indigo-20:       rgba(99, 102, 241, 0.2);
  --color-indigo-50:       rgba(99, 102, 241, 0.5);
  --color-warning-12:      rgba(251, 191, 36, 0.12);
  --color-warning-50:      rgba(251, 191, 36, 0.5);
  --color-warning-60:      rgba(251, 191, 36, 0.6);
  --color-danger-8:        rgba(251, 113, 133, 0.08);
  --color-danger-12:       rgba(251, 113, 133, 0.12);
  --color-danger-15:       rgba(239, 68, 68, 0.15);
  --color-danger-50:       rgba(251, 113, 133, 0.5);
  --color-success-12:      rgba(52, 211, 153, 0.12);
  --color-success-50:      rgba(52, 211, 153, 0.5);
  --color-info-10:         rgba(96, 165, 250, 0.1);
  --color-info-12:         rgba(96, 165, 250, 0.12);
  --color-info-15:         rgba(96, 165, 250, 0.15);
  --color-info-50:         rgba(96, 165, 250, 0.5);
  --color-blue-15:         rgba(59, 130, 246, 0.15);
  --color-overlay-black-6: rgba(0, 0, 0, 0.06);
  --color-overlay-black-7: rgba(0, 0, 0, 0.07);
  --color-overlay-black-10: rgba(0, 0, 0, 0.1);
  --color-overlay-black-20: rgba(0, 0, 0, 0.2);

  /* ── Color: Semantic Deep Variants ── */
  --color-warning-deep:    #f97316;  /* orange-500 — audit grade D, between warning and danger */

  /* ── Color: UTM Parameter Text (darker readable-on-light variants) ── */
  --color-utm-source:      #3d8c8c;
  --color-utm-campaign:    #b27d02;
  --color-utm-term:        #c0283f;
  --color-utm-content:     #047857;
  --color-utm-id:          #1d4ed8;

  /* ── Color: Chart Palette ── */
  --chart-1:               #5BB5B5;
  --chart-2:               #6366F1;
  --chart-3:               #FB7185;
  --chart-4:               #FBBF24;
  --chart-5:               #60A5FA;
  --chart-6:               #34D399;
  --chart-7:               #94A3B8;

  /* ── Spacing Scale (base-4, rem) ── */
  --space-1:               0.25rem;   /*  4px */
  --space-2:               0.5rem;    /*  8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-5:               1.25rem;   /* 20px */
  --space-6:               1.5rem;    /* 24px */
  --space-8:               2rem;      /* 32px */
  --space-10:              2.5rem;    /* 40px */
  --space-12:              3rem;      /* 48px */
  --space-16:              4rem;      /* 64px */
  --space-20:              5rem;      /* 80px */
  --space-24:              6rem;      /* 96px */
  --space-32:              8rem;      /* 128px */

  /* ── Type Scale (rem) ── */
  --text-3xs:              0.625rem;  /* 10px — dashboard micro labels */
  --text-2xs:              0.6875rem; /* 11px — dashboard labels, captions */
  --text-xs:               0.75rem;   /* 12px */
  --text-sm:               0.875rem;  /* 14px */
  --text-base:             1rem;      /* 16px */
  --text-lg:               1.125rem;  /* 18px */
  --text-xl:               1.25rem;   /* 20px */
  --text-2xl:              1.5rem;    /* 24px */
  --text-3xl:              1.875rem;  /* 30px */
  --text-4xl:              2.25rem;   /* 36px */
  --text-5xl:              3rem;      /* 48px */
  --text-6xl:              3.75rem;   /* 60px */

  /* ── Font Families ── */
  --font-heading:          'Source Serif 4', Georgia, serif;
  --font-body:             'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:             'DM Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Font Weights ── */
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  /* ── Line Heights ── */
  --leading-tight:         1.2;
  --leading-snug:          1.3;
  --leading-normal:        1.5;
  --leading-relaxed:       1.6;
  --leading-loose:         1.75;

  /* ── Letter Spacing ── */
  --tracking-tight:        0.02em;
  --tracking-snug:         0.03em;
  --tracking-normal:       0.04em;
  --tracking-label:        0.05em;
  --tracking-wide:         0.08em;
  --tracking-wider:        0.1em;

  /* ── Border Radius ── */
  --radius-sm:             0.25rem;   /*  4px */
  --radius-md:             0.5rem;    /*  8px */
  --radius-lg:             0.75rem;   /* 12px */
  --radius-xl:             1rem;      /* 16px */
  --radius-full:           9999px;

  /* ── Shadows ── */
  --shadow-sm:             0 1px 2px var(--color-overlay-black-5);
  --shadow-md:             0 1px 3px var(--color-overlay-black-6);
  --shadow-lg:             0 4px 6px -1px var(--color-overlay-black-7);
  --shadow-xl:             0 10px 15px -3px var(--color-overlay-black-8);
  --shadow-2xl:            0 20px 25px -5px var(--color-overlay-black-10);
  --shadow-focus:          0 0 0 3px var(--color-teal-15);
  --shadow-teal:           0 4px 12px var(--color-teal-12);

  /* ── Transitions ── */
  --ease-default:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:         150ms;
  --duration-base:         250ms;
  --duration-slow:         350ms;

  /* ── Opacity ── */
  --opacity-glow:          0.15;
  --opacity-dim:           0.5;
  --opacity-muted:         0.6;

  /* ── Icon Sizes ── */
  --icon-xs:               1rem;      /* 16px */
  --icon-sm:               1.25rem;   /* 20px */
  --icon-md:               1.5rem;    /* 24px */
  --icon-lg:               1.75rem;   /* 28px */
  --icon-xl:               2rem;      /* 32px */
  --icon-2xl:              2.5rem;    /* 40px */
  --icon-3xl:              3rem;      /* 48px */

  /* ── Component Sizes ── */
  --size-input:            2.5rem;    /* 40px — default input height */
  --size-input-lg:         3rem;      /* 48px — large input height */
  --size-icon-box:         3rem;      /* 48px — icon container */
  --size-icon-box-lg:      3.5rem;    /* 56px — large icon container */
  --size-avatar:           3rem;      /* 48px — default avatar */
  --size-avatar-lg:        6rem;      /* 96px — large avatar */
  --size-chip:             1.75rem;   /* 28px — chip height */
  --size-toggle:           2.75rem;   /* 44px — toggle switch width */
  --size-toggle-knob:      1.25rem;   /* 20px — toggle switch knob */
  --size-step-number:      2.5rem;    /* 40px — step circle */

  /* ── Max-Widths ── */
  --max-w-xs:              20rem;     /* 320px */
  --max-w-sm:              28rem;     /* 448px */
  --max-w-md:              32rem;     /* 512px */
  --max-w-lg:              34rem;     /* 544px */
  --max-w-xl:              36rem;     /* 576px */
  --max-w-2xl:             38rem;     /* 608px */
  --max-w-3xl:             40rem;     /* 640px */
  --max-w-4xl:             42rem;     /* 672px */
  --max-w-5xl:             48rem;     /* 768px */
  --max-w-6xl:             52rem;     /* 832px */
  --max-w-7xl:             72rem;     /* 1152px */

  /* ── Z-Index Scale ── */
  --z-base:              1;
  --z-sticky:            50;
  --z-dropdown:          100;
  --z-nav:               200;
  --z-skip-link:         300;
  --z-modal:             1000;

  /* ── Layout ── */
  --container-max:         80rem;     /* 1280px */
  --container-narrow:      48rem;     /* 768px */
  --container-wide:        90rem;     /* 1440px */
  --nav-height:            4.5rem;    /* 72px */
}