/* ── PRODIGI® Design Tokens ─────────────────────────────────────────────── */
/* Source: Brand Manual pages 03–04 + brand-styleguide.md                    */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ── Base (dark theme default) ───────────────────────────────────────────── */
:root,
[data-theme="dark"] {

  /* ── Brand colors (page 03) ──────────────────────────────────────────── */
  --prodigi-black:   #0E0E0E;
  --prodigi-magenta: #FF008C;
  --prodigi-cyan:    #00FFFF;
  --prodigi-white:   #FFFFFF;

  /* ── Brand gradients (45° — mandatory angle) ─────────────────────────── */
  --prodigi-gradient:         linear-gradient(45deg, #FF008C, #00FFFF);
  --prodigi-gradient-reverse: linear-gradient(45deg, #00FFFF, #FF008C);
  --prodigi-gradient-shift:   linear-gradient(135deg, #FF008C 0%, #A855F7 50%, #00FFFF 100%);

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --prodigi-bg:             #0A0A0F;
  --prodigi-surface:        #131318;
  --prodigi-surface-hover:  #1A1A21;
  --prodigi-border:         #25252B;
  --prodigi-border-focus:   #FF008C;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --prodigi-text-primary: #FFFFFF;
  --prodigi-text-muted:   #8C8C8C;
  --prodigi-text-subtle:  #666666;

  /* ── Feedback ────────────────────────────────────────────────────────── */
  --prodigi-success: #7AC943;
  --prodigi-error:   #FF4757;
  --prodigi-warning: #FF931E;

  /* ── Semantic aliases (used in components) ───────────────────────────── */
  --bg:          var(--prodigi-bg);
  --surface:     #131318;
  --text-primary: var(--prodigi-text-primary);
  --text-muted:   var(--prodigi-text-muted);
  --accent:       var(--prodigi-magenta);
  --border:       var(--prodigi-border);

  /* ── Typography (page 04 — Space Grotesk only) ───────────────────────── */
  --prodigi-font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --prodigi-text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8rem);    /* 12–13px  */
  --prodigi-text-sm:   clamp(0.8rem,   0.75rem + 0.3vw,  0.875rem);  /* 13–14px  */
  --prodigi-text-base: clamp(0.95rem,  0.9rem  + 0.3vw,  1.05rem);   /* 15–17px  */
  --prodigi-text-lg:   clamp(1.1rem,   1rem    + 0.5vw,  1.25rem);   /* 18–20px  */
  --prodigi-text-xl:   clamp(1.25rem,  1.1rem  + 0.8vw,  1.5rem);    /* 20–24px  */
  --prodigi-text-2xl:  clamp(1.5rem,   1.25rem + 1.2vw,  2rem);      /* 24–32px  */
  --prodigi-text-3xl:  clamp(2rem,     1.5rem  + 2.5vw,  3rem);      /* 32–48px  */
  --prodigi-text-4xl:  clamp(2.5rem,   2rem    + 3vw,    3.75rem);   /* 40–60px  */
  --prodigi-text-5xl:  clamp(3rem,     2.5rem  + 4vw,    5rem);      /* 48–80px  */

  /* Legacy aliases (keep backward compat) */
  --font-sans:     var(--prodigi-font-family);
  --font-size-xs:  var(--prodigi-text-xs);
  --font-size-sm:  var(--prodigi-text-sm);
  --font-size-md:  var(--prodigi-text-base);
  --font-size-lg:  var(--prodigi-text-lg);
  --font-size-xl:  var(--prodigi-text-xl);
  --font-size-2xl: var(--prodigi-text-2xl);
  --font-size-3xl: var(--prodigi-text-3xl);
  --font-size-4xl: var(--prodigi-text-4xl);

  /* Heading tokens */
  --prodigi-heading-weight:      700;
  --prodigi-heading-line-height: 1.12;
  --prodigi-heading-tracking:    -0.02em;

  /* Body tokens */
  --prodigi-body-weight:      400;
  --prodigi-body-line-height: 1.6;

  /* Payoff tokens */
  --prodigi-payoff-weight:   400;
  --prodigi-payoff-tracking: 0.2em;
  --prodigi-payoff-transform: uppercase;

  /* Label tokens */
  --prodigi-label-weight:   600;
  --prodigi-label-tracking: 0.1em;
  --prodigi-label-transform: uppercase;
  --prodigi-label-size:     var(--prodigi-text-xs);

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

  /* Semantic spacing */
  --prodigi-gap-xs:     var(--prodigi-space-2);
  --prodigi-gap-sm:     var(--prodigi-space-4);
  --prodigi-gap-md:     var(--prodigi-space-6);
  --prodigi-gap-lg:     var(--prodigi-space-12);
  --prodigi-gap-xl:     var(--prodigi-space-20);
  --prodigi-section-py: var(--prodigi-space-20);

  /* Legacy spacing aliases */
  --space-1:  var(--prodigi-space-1);
  --space-2:  var(--prodigi-space-2);
  --space-3:  var(--prodigi-space-3);
  --space-4:  var(--prodigi-space-4);
  --space-6:  var(--prodigi-space-6);
  --space-8:  var(--prodigi-space-8);
  --space-12: var(--prodigi-space-12);
  --space-16: var(--prodigi-space-16);
  --space-24: var(--prodigi-space-24);
  --space-32: 8rem;

  /* ── Border radius ───────────────────────────────────────────────────── */
  --prodigi-radius-sm:   6px;
  --prodigi-radius-md:   10px;
  --prodigi-radius-lg:   14px;
  --prodigi-radius-xl:   20px;
  --prodigi-radius-2xl:  28px;
  --prodigi-radius-full: 999px;

  /* ── Shadows & effects ───────────────────────────────────────────────── */
  --prodigi-shadow-sm: 0  2px  8px #000000;
  --prodigi-shadow-md: 0  4px 20px #000000;
  --prodigi-shadow-lg: 0  8px 40px #000000;

  --prodigi-glow-magenta:  0 0 20px #FF008C;
  --prodigi-glow-cyan:     0 0 20px #00FFFF;
  --prodigi-glow-gradient: 0 4px 20px #FF008C, 0 4px 20px #00FFFF;

  /* Glass morphism */
  --prodigi-glass-bg:     #131318;
  --prodigi-glass-blur:   blur(12px);
  --prodigi-glass-border: 1px solid #25252B;

  /* Legacy shadow alias */
  --shadow-soft: var(--prodigi-shadow-md);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --prodigi-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --prodigi-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --prodigi-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --prodigi-dur-fast: 150ms;
  --prodigi-dur-base: 250ms;
  --prodigi-dur-med:  400ms;
  --prodigi-dur-slow: 700ms;

  --prodigi-transition-colors:   color var(--prodigi-dur-fast),
                                 background-color var(--prodigi-dur-fast),
                                 border-color var(--prodigi-dur-fast);
  --prodigi-transition-transform: transform var(--prodigi-dur-fast) var(--prodigi-ease-out-expo);
  --prodigi-transition-all:      all var(--prodigi-dur-base) var(--prodigi-ease-in-out);

  /* Legacy motion aliases */
  --ease-out-expo: var(--prodigi-ease-out-expo);
  --duration-fast: var(--prodigi-dur-fast);
  --duration-base: var(--prodigi-dur-med);
  --duration-slow: var(--prodigi-dur-slow);

  /* ── Breakpoints (reference — use in @media queries) ────────────────── */
  /* --prodigi-bp-sm:  480px   (large phones)  */
  /* --prodigi-bp-md:  768px   (tablets)       */
  /* --prodigi-bp-lg:  1024px  (desktop)       */
  /* --prodigi-bp-xl:  1280px  (wide desktop)  */
  /* --prodigi-bp-2xl: 1536px  (ultra-wide)    */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --prodigi-max-w:        1200px;
  --prodigi-max-w-narrow: 780px;
  --prodigi-max-w-prose:  65ch;

  --container-max: var(--prodigi-max-w);
  --container-pad: var(--prodigi-space-6);
  --header-h:      72px;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --prodigi-z-canvas:   0;
  --prodigi-z-noise:    1;
  --prodigi-z-content:  2;
  --prodigi-z-sticky:   100;
  --prodigi-z-dropdown: 200;
  --prodigi-z-overlay:  300;
  --prodigi-z-modal:    400;
  --prodigi-z-toast:    500;
}

/* ── Light theme overrides ───────────────────────────────────────────────── */
[data-theme="light"] {
  --prodigi-bg:            #F5F5F7;
  --prodigi-surface:       #EDEDEF;
  --prodigi-surface-hover: #E4E4E7;
  --prodigi-border:        #DCDCE0;
  --prodigi-text-primary:  #0E0E0E;
  --prodigi-text-muted:    #4A4A4A;
  --prodigi-text-subtle:   #777777;
  --prodigi-glass-bg:      #FFFFFF;
  --prodigi-glass-border:  1px solid #D9D9DE;

  --bg:          var(--prodigi-bg);
  --surface:     #FFFFFF;
  --text-primary: var(--prodigi-text-primary);
  --text-muted:   var(--prodigi-text-muted);
  --border:       var(--prodigi-border);
  --shadow-soft:  0 4px 32px #000000;
}