/* Design tokens (from the djsoft design skill). Loaded first: it declares the layer order. */
@layer reset, tokens, base, components, sections, utilities;

@font-face{font-family:"Geist";src:url("../fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

@layer tokens {
/* colors */
  :root{
  /* ── base ramp: cool near-black slate (dark is the primary theme) ── */
  --slate-1000:#05060a;--slate-950:#080a0f;--slate-900:#0b0e14;--slate-850:#11151d;
  --slate-800:#171c26;--slate-700:#222835;--slate-600:#333b4b;--slate-500:#4d5768;
  --slate-450:#7d8899;--slate-400:#6c7789;--slate-300:#9aa4b5;--slate-200:#c3cad6;--slate-100:#e4e8ee;
  --slate-50:#f2f4f8;--white:#ffffff;
  
  /* ── brand accent: azure → cyan ── */
  --azure-600:#0f6fd6;--azure-500:#2f8bff;--azure-400:#5aa4ff;--azure-300:#8ec1ff;
  --cyan-500:#28d7c8;--cyan-400:#5fe3d6;
  
  /* ── semantic status hues ── */
  --green-500:#3fcf82;--amber-500:#f0b429;--red-500:#f2635b;
  
  /* ── surfaces (dark, default) ── */
  --surface-page:var(--slate-1000);
  --surface-1:var(--slate-950);
  --surface-card:var(--slate-900);
  --surface-raised:var(--slate-850);
  --surface-inset:#0a0c11;
  --surface-overlay:rgba(5,6,10,.72);
  
  /* ── text ── every ink level clears 4.5:1 on --surface-page and --surface-card ── */
  --text-strong:var(--slate-50);
  --text-body:var(--slate-200);
  --text-muted:var(--slate-300);
  --text-faint:var(--slate-450);
  --text-inverse:var(--slate-1000);
  --text-accent:var(--azure-400);
  --text-on-accent:var(--slate-1000); /* dark ink: white on #2f8bff is only 3.4:1 */
  --text-link:var(--azure-400);
  --text-link-hover:var(--azure-300);
  
  /* ── hairlines & borders ── */
  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.18);
  --border-accent:rgba(47,139,255,.45);
  
  /* ── interactive ── */
  --accent:var(--azure-500);
  --accent-hover:var(--azure-400);
  --accent-press:var(--azure-600);
  --accent-tint:rgba(47,139,255,.12);
  --accent-tint-strong:rgba(47,139,255,.22);
  --accent-ring:rgba(47,139,255,.38);
  --accent-secondary:var(--cyan-500);
  
  /* ── status pairs ── */
  --success:var(--green-500);--success-tint:rgba(63,207,130,.14);
  --warning:var(--amber-500);--warning-tint:rgba(240,180,41,.14);
  --danger:var(--red-500);--danger-tint:rgba(242,99,91,.14);
  --text-danger:var(--red-500);
  
  /* ── signature grid background ── */
  --grid-line:rgba(255,255,255,.045);
  --grid-cell:64px; 
  --glow-azure:rgba(47,139,255,.30);
  --glow-cyan:rgba(40,215,200,.20);
  --hero-dot:var(--azure-300);
  --ripple-line:rgba(142,193,255,.42);
  }
  
  :root[data-theme="light"]{
  --surface-page:#fbfbfd;
  --surface-1:var(--white);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-inset:#f3f5f9;
  --surface-overlay:rgba(251,251,253,.75);
  --text-strong:var(--slate-900);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-600);
  --text-faint:var(--slate-500);
  --text-inverse:var(--white);
  --text-accent:var(--azure-600);
  --text-link:var(--azure-600);
  --text-link-hover:var(--azure-500);
  --border-subtle:rgba(11,14,20,.07);
  --border-default:rgba(11,14,20,.12);
  --border-strong:rgba(11,14,20,.2);
  --border-accent:rgba(15,111,214,.4);
  --accent:var(--azure-600);
  --accent-hover:#0c62c0; /* darker: white on azure-500 fails AA */
  --accent-press:#0b5cb0;
  --accent-tint:rgba(15,111,214,.09);
  --accent-tint-strong:rgba(15,111,214,.16);
  --accent-ring:rgba(15,111,214,.32);
  --text-danger:#b42318;
  --text-on-accent:var(--white);
  --grid-line:rgba(11,14,20,.055);
  --glow-azure:rgba(47,139,255,.16);
  --glow-cyan:rgba(40,215,200,.12);
  --hero-dot:var(--azure-600);
  --ripple-line:rgba(15,111,214,.34);
  }
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]){
    --surface-page:#fbfbfd;
    --surface-1:var(--white);
    --surface-card:var(--white);
    --surface-raised:var(--white);
    --surface-inset:#f3f5f9;
    --surface-overlay:rgba(251,251,253,.75);
    --text-strong:var(--slate-900);
    --text-body:var(--slate-700);
    --text-muted:var(--slate-600);
    --text-faint:var(--slate-500);
    --text-inverse:var(--white);
    --text-accent:var(--azure-600);
    --text-link:var(--azure-600);
    --text-link-hover:var(--azure-500);
    --border-subtle:rgba(11,14,20,.07);
    --border-default:rgba(11,14,20,.12);
    --border-strong:rgba(11,14,20,.2);
    --border-accent:rgba(15,111,214,.4);
    --accent:var(--azure-600);
    --accent-hover:#0c62c0; /* darker: white on azure-500 fails AA */
    --accent-press:#0b5cb0;
    --accent-tint:rgba(15,111,214,.09);
    --accent-tint-strong:rgba(15,111,214,.16);
    --accent-ring:rgba(15,111,214,.32);
  --text-danger:#b42318;
  --text-on-accent:var(--white);
    --grid-line:rgba(11,14,20,.055);
    --glow-azure:rgba(47,139,255,.16);
    --glow-cyan:rgba(40,215,200,.12);
    --hero-dot:var(--azure-600);
    --ripple-line:rgba(15,111,214,.34);
    }
  }
/* typography */
  :root{
  /* One typeface family for the whole brand — Geist Sans. Mono only for code/labels. */
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);
  --font-code:var(--font-mono);
  
  --weight-light:300; 
  --weight-regular:400; 
  --weight-medium:500; 
  --weight-semibold:600; 
  --weight-bold:700; 
  
  /* fluid type scale — clamp() everywhere (320px → 1920px) */
  --fs-display-1:clamp(2.75rem,1.6rem + 5.6vw,5.5rem); 
  --fs-display-2:clamp(2.25rem,1.5rem + 3.6vw,4rem); 
  --fs-h1:clamp(2rem,1.45rem + 2.6vw,3.25rem); 
  --fs-h2:clamp(1.625rem,1.3rem + 1.6vw,2.375rem); 
  --fs-h3:clamp(1.25rem,1.1rem + .75vw,1.625rem); 
  --fs-h4:clamp(1.0625rem,1rem + .35vw,1.25rem); 
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.375rem); 
  --fs-body-lg:1.0625rem; 
  --fs-body-md:1rem; 
  --fs-body-sm:.9375rem; 
  --fs-caption:.8125rem; 
  --fs-micro:.75rem; 
  
  --leading-tight:1.06; 
  --leading-snug:1.18; 
  --leading-heading:1.25; 
  --leading-body:1.65; 
  --leading-relaxed:1.75; 
  
  --tracking-display:-.035em; 
  --tracking-heading:-.02em; 
  --tracking-body:-.005em; 
  --tracking-wide:.02em; 
  --tracking-label:.14em; 
  
  --measure-prose:64ch; 
  --measure-lead:46ch; 
  }
/* spacing */
  :root{
  --space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.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;
  
  /* fluid rhythm */
  --space-section:clamp(4rem,2.5rem + 7vw,9rem);
  --space-section-tight:clamp(2.5rem,1.75rem + 3.5vw,5rem);
  --space-stack:clamp(1rem,.85rem + .7vw,1.5rem);
  --gutter:clamp(1.25rem,.9rem + 1.6vw,2.5rem); 
  }
/* radius */
  :root{
  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;
  --radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;
  --radius-control:10px;   /* buttons, inputs */
  --radius-card:16px;      /* cards, panels */
  --radius-panel:20px;     /* large surfaces, dialogs */
  }
/* elevation */
  :root{
  /* Dark UI leans on hairlines + glow, not drop shadows. */
  --shadow-none:none;
  --shadow-hairline:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 12px 32px -24px rgba(0,0,0,.9);
  --glow-accent:0 0 0 1px var(--border-accent),0 8px 40px -12px var(--glow-azure);
  --glow-accent-soft:0 10px 60px -20px var(--glow-azure);
  --ring-focus:0 0 0 3px var(--accent-ring);
  --blur-glass:14px;
  --blur-veil:28px;
  }
  
  :root[data-theme="light"]{
  --shadow-hairline:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(11,14,20,.06);
  --shadow-md:0 8px 24px -10px rgba(11,14,20,.14);
  --shadow-lg:0 24px 60px -24px rgba(11,14,20,.18);
  --shadow-card:0 1px 2px rgba(11,14,20,.05),0 12px 28px -22px rgba(11,14,20,.3);
  }
  @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]){
    --shadow-hairline:inset 0 1px 0 rgba(255,255,255,.9);
    --shadow-sm:0 1px 2px rgba(11,14,20,.06);
    --shadow-md:0 8px 24px -10px rgba(11,14,20,.14);
    --shadow-lg:0 24px 60px -24px rgba(11,14,20,.18);
    --shadow-card:0 1px 2px rgba(11,14,20,.05),0 12px 28px -22px rgba(11,14,20,.3);
    }
  }
/* motion */
  :root{
  --dur-instant:80ms; 
  --dur-fast:140ms; 
  --dur-base:220ms; 
  --dur-slow:380ms; 
  --dur-ambient:8s; 
  --ease-standard:cubic-bezier(.4,0,.2,1); 
  --ease-out:cubic-bezier(.16,1,.3,1); 
  --ease-in-out:cubic-bezier(.65,0,.35,1); 
  --ease-entrance:cubic-bezier(.22,1,.36,1); 
  --lift-hover:-2px; 
  --press-scale:.985; 
  }
/* animation */
  /* Brand keyframes. Shipped with the token closure so components need no CSS-in-JS. */
  @keyframes dj-drift-a{0%{transform:translate3d(-8%,-6%,0) scale(1)}50%{transform:translate3d(10%,8%,0) scale(1.15)}100%{transform:translate3d(-8%,-6%,0) scale(1)}}
  @keyframes dj-drift-b{0%{transform:translate3d(6%,10%,0) scale(1.1)}50%{transform:translate3d(-10%,-4%,0) scale(.9)}100%{transform:translate3d(6%,10%,0) scale(1.1)}}
  @keyframes dj-ripple{0%{transform:translate(-50%,-50%) scale(.06);opacity:0}10%{opacity:1}55%{opacity:.85}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
  @keyframes dj-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* layout */
  :root{
  --container-max:1200px; 
  --container-narrow:760px; 
  --container-wide:1440px; 
  --header-h:64px; 
  --z-base:0; 
  --z-raised:10; 
  --z-sticky:100; 
  --z-overlay:900; 
  --z-modal:1000; 
  --z-toast:1100; 
  --tap-min:44px; 
  }
}