:root {
  --fdp-bg-base:        #F3F3F3;
  --fdp-bg-mica:        #F9F9F9;
  --fdp-bg-layer:       #FFFFFFcc;
  --fdp-bg-card:        #FFFFFF;
  --fdp-bg-subtle:      #00000005;
  --fdp-bg-hover:       #0000000A;
  --fdp-bg-press:       #00000014;
  --fdp-bg-selected:    #0078D408;

  --fdp-stroke-default: #0000000F;
  --fdp-stroke-strong:  #00000024;
  --fdp-stroke-control: #00000014;
  --fdp-stroke-divider: #0000000A;

  --fdp-fg-primary:     #1A1A1A;
  --fdp-fg-secondary:   #5C5C5C;
  --fdp-fg-tertiary:    #898989;
  --fdp-fg-disabled:    #00000061;
  --fdp-fg-on-accent:   #FFFFFF;

  --fdp-accent-100:     #CFE4FA;
  --fdp-accent-80:      #4894FE;
  --fdp-accent-60:      #0078D4;
  --fdp-accent-40:      #003E92;
  --fdp-accent-20:      #001A68;

  --fdp-hyper-cyan:     #42FFFF;
  --fdp-hyper-blue:     #2A6FFF;
  --fdp-hyper-violet:   #7B3DFF;
  --fdp-hyper-magenta:  #FF2E93;
  --fdp-hyper-pink:     #F9CCFF;
  --fdp-hyper-coral:    #FF6B5B;
  --fdp-hyper-amber:    #FFB800;
  --fdp-hyper-mint:     #4DE3B3;
  --fdp-hyper-ink:      #0A0A1F;

  --fdp-success:        #2BAE66;
  --fdp-success-bg:     #E8F6EE;
  --fdp-warning:        #E89B1A;
  --fdp-warning-bg:     #FBF1DE;
  --fdp-danger:         #D13438;
  --fdp-danger-bg:      #FBEAEA;
  --fdp-info:           #0078D4;
  --fdp-info-bg:        #DEEDFB;

  --fdp-grad-aurora:    linear-gradient(49deg, #42FFFF 0%, #F9CCFF 100%);
  --fdp-grad-magma:     linear-gradient(49deg, #FF2E93 0%, #FFB800 100%);
  --fdp-grad-nocturne:  linear-gradient(49deg, #2A6FFF 0%, #7B3DFF 60%, #FF2E93 100%);
  --fdp-grad-spectrum:  linear-gradient(49deg, #42FFFF 0%, #7B3DFF 50%, #FF2E93 100%);
  --fdp-grad-mica-tint: linear-gradient(135deg, #FFFFFFE6 0%, #FFFFFFB3 100%);

  --fdp-shadow-2:   0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.06);
  --fdp-shadow-4:   0 2px 4px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.08);
  --fdp-shadow-8:   0 4px 8px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.10);
  --fdp-shadow-16:  0 8px 16px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.12);
  --fdp-shadow-32:  0 16px 32px rgba(0,0,0,.08), 0 32px 64px rgba(0,0,0,.16);
  --fdp-shadow-accent: 0 12px 32px rgba(0, 120, 212, .35);
  --fdp-shadow-hyper:  0 16px 48px rgba(255, 46, 147, .35);

  --fdp-radius-xs:    2px;
  --fdp-radius-sm:    4px;
  --fdp-radius-md:    8px;
  --fdp-radius-lg:    12px;
  --fdp-radius-xl:    16px;
  --fdp-radius-2xl:   24px;
  --fdp-radius-pill:  9999px;

  --fdp-space-1:  4px;
  --fdp-space-2:  8px;
  --fdp-space-3:  12px;
  --fdp-space-4:  16px;
  --fdp-space-5:  20px;
  --fdp-space-6:  24px;
  --fdp-space-8:  32px;
  --fdp-space-10: 40px;
  --fdp-space-12: 48px;
  --fdp-space-16: 64px;
  --fdp-space-20: 80px;
  --fdp-space-24: 96px;

  --fdp-ease-standard: cubic-bezier(.33, 0, .67, 1);
  --fdp-ease-accel:    cubic-bezier(.7, 0, 1, .5);
  --fdp-ease-decel:    cubic-bezier(0, 0, .25, 1);
  --fdp-ease-poster:   cubic-bezier(.16, 1, .3, 1);
  --fdp-dur-fast:      150ms;
  --fdp-dur-base:      250ms;
  --fdp-dur-slow:      400ms;
  --fdp-dur-hero:      700ms;

  --fdp-blur-thin:  blur(20px) saturate(1.6);
  --fdp-blur-thick: blur(60px) saturate(1.8);
  --fdp-blur-mica:  blur(120px) saturate(2);

  --fdp-font-text:    'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --fdp-font-display: 'Space Grotesk', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --fdp-font-tight:   'Inter Tight', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --fdp-font-mono:    'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

  --fdp-fs-caption:    12px;
  --fdp-fs-body:       14px;
  --fdp-fs-body-strong:14px;
  --fdp-fs-body-large: 18px;
  --fdp-fs-subtitle:   20px;
  --fdp-fs-title:      28px;
  --fdp-fs-title-lg:   40px;
  --fdp-fs-display:    68px;
  --fdp-fs-poster:     112px;

  --fdp-lh-tight:  1.05;
  --fdp-lh-snug:   1.2;
  --fdp-lh-normal: 1.4;
  --fdp-lh-loose:  1.6;

  --fdp-tracking-display: -0.025em;
  --fdp-tracking-poster:  -0.04em;
  --fdp-tracking-allcaps:  0.18em;
}

.fdp-dark, [data-fdp-theme="dark"] {
  --fdp-bg-base:        #202020;
  --fdp-bg-mica:        #2C2C2C;
  --fdp-bg-layer:       #2B2B2BB3;
  --fdp-bg-card:        #2D2D2D;
  --fdp-bg-subtle:      #FFFFFF08;
  --fdp-bg-hover:       #FFFFFF0F;
  --fdp-bg-press:       #FFFFFF14;
  --fdp-bg-selected:    #4894FE1F;

  --fdp-stroke-default: #FFFFFF12;
  --fdp-stroke-strong:  #FFFFFF24;
  --fdp-stroke-control: #FFFFFF0F;
  --fdp-stroke-divider: #FFFFFF0A;

  --fdp-fg-primary:     #FFFFFF;
  --fdp-fg-secondary:   #FFFFFFC8;
  --fdp-fg-tertiary:    #FFFFFF87;
  --fdp-fg-disabled:    #FFFFFF5C;

  --fdp-accent-100:     #001A68;
  --fdp-accent-80:      #003E92;
  --fdp-accent-60:      #4894FE;
  --fdp-accent-40:      #76B9F8;
  --fdp-accent-20:      #CFE4FA;
}

.fdp-caption    { font-family: var(--fdp-font-text); font-size: var(--fdp-fs-caption);     line-height: var(--fdp-lh-normal); font-weight: 400; color: var(--fdp-fg-secondary); }
.fdp-body       { font-family: var(--fdp-font-text); font-size: var(--fdp-fs-body);        line-height: var(--fdp-lh-normal); font-weight: 400; color: var(--fdp-fg-primary); }
.fdp-body-strong{ font-family: var(--fdp-font-text); font-size: var(--fdp-fs-body-strong); line-height: var(--fdp-lh-normal); font-weight: 600; color: var(--fdp-fg-primary); }
.fdp-body-large { font-family: var(--fdp-font-text); font-size: var(--fdp-fs-body-large);  line-height: var(--fdp-lh-normal); font-weight: 400; color: var(--fdp-fg-primary); }
.fdp-subtitle   { font-family: var(--fdp-font-tight); font-size: var(--fdp-fs-subtitle);    line-height: var(--fdp-lh-snug);   font-weight: 600; color: var(--fdp-fg-primary); letter-spacing: var(--fdp-tracking-display); }
.fdp-title      { font-family: var(--fdp-font-tight); font-size: var(--fdp-fs-title);       line-height: var(--fdp-lh-snug);   font-weight: 600; color: var(--fdp-fg-primary); letter-spacing: var(--fdp-tracking-display); }
.fdp-title-lg   { font-family: var(--fdp-font-display); font-size: var(--fdp-fs-title-lg);  line-height: var(--fdp-lh-tight);  font-weight: 700; color: var(--fdp-fg-primary); letter-spacing: var(--fdp-tracking-display); }
.fdp-display    { font-family: var(--fdp-font-display); font-size: var(--fdp-fs-display);   line-height: var(--fdp-lh-tight);  font-weight: 700; color: var(--fdp-fg-primary); letter-spacing: var(--fdp-tracking-display); }
.fdp-poster     { font-family: var(--fdp-font-display); font-size: var(--fdp-fs-poster);    line-height: 0.95;                 font-weight: 700; color: var(--fdp-fg-primary); letter-spacing: var(--fdp-tracking-poster); text-wrap: balance; }
.fdp-allcaps    { font-family: var(--fdp-font-text); font-size: var(--fdp-fs-caption);     line-height: 1;                    font-weight: 600; text-transform: uppercase; letter-spacing: var(--fdp-tracking-allcaps); color: var(--fdp-fg-secondary); }
.fdp-mono       { font-family: var(--fdp-font-mono); font-size: var(--fdp-fs-body);        line-height: var(--fdp-lh-normal); font-weight: 400; color: var(--fdp-fg-primary); }

.fdp-acrylic-thin  { background: rgba(252, 252, 252, 0.6);  backdrop-filter: var(--fdp-blur-thin);  -webkit-backdrop-filter: var(--fdp-blur-thin);  border: 1px solid var(--fdp-stroke-default); }
.fdp-acrylic-thick { background: rgba(243, 243, 243, 0.75); backdrop-filter: var(--fdp-blur-thick); -webkit-backdrop-filter: var(--fdp-blur-thick); border: 1px solid var(--fdp-stroke-default); }
.fdp-mica          { background: var(--fdp-bg-mica);        backdrop-filter: var(--fdp-blur-mica);  -webkit-backdrop-filter: var(--fdp-blur-mica);  border: 1px solid var(--fdp-stroke-default); }
.fdp-dark .fdp-acrylic-thin,  [data-fdp-theme="dark"] .fdp-acrylic-thin  { background: rgba(40, 40, 40, 0.6); }
.fdp-dark .fdp-acrylic-thick, [data-fdp-theme="dark"] .fdp-acrylic-thick { background: rgba(32, 32, 32, 0.75); }

.fdp-reveal { position: relative; overflow: hidden; }
.fdp-reveal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.18), transparent 60%);
  opacity: 0; transition: opacity var(--fdp-dur-base) var(--fdp-ease-standard);
}
.fdp-reveal:hover::before { opacity: 1; }