@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ============================================================================
   PIXELBRIDGE STUDIO — DESIGN TOKENS
   Mirror of /design-system/tokens.css (blue accent). Single source of truth.
   ============================================================================ */
:root {
    /* Blue — brand accent */
    --blue-50: #EAF1FE;
    --blue-100: #CFE0FD;
    --blue-200: #A3C3FB;
    --blue-300: #6E9DF8;
    --blue-400: #3D78F4;
    --blue-500: #125AF0;
    --blue-600: #0E48CC;
    --blue-700: #0B399F;
    --blue-800: #0A2E7D;
    --blue-900: #08215A;

    --turqiouse-accent: #55e99d;

    /* Neutral / slate */
    --neutral-0: #FFFFFF;
    --neutral-50: #F8F9FA;
    --neutral-100: #F3F5F7;
    --neutral-200: #E6E9EC;
    --neutral-300: #CBD1D6;
    --neutral-400: #9AA3AB;
    --neutral-500: #787E8F;
    --neutral-600: #5A6470;
    --neutral-700: #3A444D;
    --neutral-800: #23303A;
    --neutral-900: #14181F;
    /* Status / secondary */
    --green-500: #2E9E5B;
    --amber-500: #E0A100;
    --red-500: #E5484D;
    --purple-500: #7E56B0;
    /* Semantic */
    --color-bg: var(--neutral-50);
    --color-bg-alt: var(--neutral-100);
    --color-surface: var(--neutral-0);
    --color-surface-inverse: var(--neutral-900);
    --color-primary: var(--blue-500);
    --color-primary-hover: var(--blue-600);
    --color-primary-active: var(--blue-700);
    --color-primary-subtle: var(--blue-50);
    --color-on-primary: var(--neutral-0);
    --color-ink: var(--neutral-900);
    --color-on-ink: var(--neutral-0);
    --color-text: var(--neutral-800);
    --color-text-strong: var(--neutral-900);
    --color-text-secondary: var(--neutral-600);
    --color-text-muted: var(--neutral-500);
    --color-text-on-dark: var(--neutral-50);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-focus-ring: var(--blue-400);
    --color-success: var(--green-500);
    --color-error: var(--red-500);
    /* Typography */
    --font-heading: "Plus Jakarta Sans","Inter",system-ui,sans-serif;
    --font-pixel: "Press Start 2P", "Courier New", monospace;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --fs-display: clamp(2.5rem,1.4rem + 4.6vw,3.2rem);
    --fs-h1: clamp(2.25rem,1.5rem + 3vw,3rem);
    --fs-h2: clamp(1.875rem,1.3rem + 2.3vw,2.75rem);
    --fs-h3: clamp(1.5rem,1.2rem + 1.2vw,2rem);
    --fs-h4: 1.5rem;
    --fs-h5: 1.25rem;
    --fs-overline: 0.875rem;
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-body-sm: 0.875rem;
    --fs-caption: 0.75rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --lh-tight: 1.08;
    --lh-snug: 1.2;
    --lh-heading: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --ls-tighter: -0.02em;
    --ls-tight: -0.01em;
    --ls-wider: 0.08em;
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    /* Layout */
    --container-max: 1200px;
    --container-narrow: 760px;
    --grid-gutter: 1.5rem;
    --page-margin: 1.5rem;
    --section-pad-y: clamp(4rem,2rem + 8vw,8rem);
    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(20,24,31,.06);
    --shadow-sm: 0 2px 8px rgba(20,24,31,.06);
    --shadow-md: 0 6px 20px rgba(20,24,31,.08);
    --shadow-lg: 0 14px 36px rgba(20,24,31,.10);
    --shadow-xl: 0 28px 64px rgba(20,24,31,.12);
    --shadow-primary: 0 10px 28px rgba(18,90,240,.28);
    /* Motion */
    --ease-standard: cubic-bezier(.2,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-modal: 400;
}