/* ============================================================
   UX Software v.1.1 — Light theme, same brand DNA as v.1.0
   Cyan + Violet accents on a clean white surface.
   ============================================================ */

:root {
  /* --- Surfaces (light) --------------------------------------- */
  --color-bg:           #FFFFFF;
  --color-bg-elev:      #F7F8FB;
  --color-bg-tint:      #FAFBFD;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F4F5F8;
  --color-border:       #E1E5EB;
  --color-border-soft:  #EBEEF3;

  /* --- Text --------------------------------------------------- */
  --color-text:         #0F1421;
  --color-text-soft:    #4A5568;
  --color-text-muted:   #6B7488;
  --color-text-on-accent: #FFFFFF;

  /* --- Brand accents (cyan + violet — kept from v.1.0) ------- */
  /* "ink" tones are for text/links on white; "hi" tones are for glows/badges */
  --color-accent:       #0891B2;   /* cyan-ink, AA-contrast on white */
  --color-accent-2:     #7C3AED;   /* violet-ink */
  --color-accent-3:     #059669;   /* mint-ink */
  --color-accent-hi:    #22D3EE;   /* electric cyan — for glows, dots */
  --color-accent-2-hi:  #A78BFA;   /* electric violet */
  --color-accent-lo:    #0E7490;   /* cyan pressed/hover */

  /* --- Semantic ---------------------------------------------- */
  --color-success:      #059669;
  --color-warning:      #B45309;
  --color-danger:       #DC2626;
  --color-info:         #2563EB;

  /* --- Gradients --------------------------------------------- */
  --grad-accent:        linear-gradient(135deg, #22D3EE 0%, #A78BFA 100%);
  --grad-accent-soft:   linear-gradient(135deg, rgba(34,211,238,.12) 0%, rgba(167,139,250,.12) 100%);
  --grad-hero-glow:     radial-gradient(70% 60% at 50% 0%, rgba(34,211,238,.14) 0%, rgba(167,139,250,.10) 35%, transparent 75%);
  --grad-cta:           linear-gradient(135deg, #22D3EE 0%, #A78BFA 60%, #C084FC 100%);
  --grad-text:          linear-gradient(135deg, #0891B2 0%, #7C3AED 60%, #C026D3 100%);

  /* --- Typography (same as v.1.0) ---------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-3xl:  clamp(2.25rem, 1.7rem + 2.4vw, 3rem);
  --fs-4xl:  clamp(2.75rem, 1.9rem + 3.4vw, 4rem);
  --fs-5xl:  clamp(3.25rem, 2.2rem + 4.4vw, 5rem);

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;

  /* --- Spacing scale (8pt) ----------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* --- Layout ------------------------------------------------- */
  --container-max:   1200px;
  --container-narrow: 880px;
  --container-pad:   24px;

  /* --- Radii -------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --border-w: 1px;

  /* --- Shadows (Atlassian-style soft for light theme) -------- */
  --shadow-sm:        0 1px 2px rgba(15, 20, 33, .06), 0 0 0 1px rgba(15, 20, 33, .04);
  --shadow-md:        0 4px 12px rgba(15, 20, 33, .08), 0 1px 2px rgba(15, 20, 33, .06);
  --shadow-lg:        0 12px 32px rgba(15, 20, 33, .10), 0 2px 4px rgba(15, 20, 33, .06);
  --shadow-glow:        0 0 0 1px rgba(34,211,238,.30), 0 10px 28px -8px rgba(34,211,238,.35);
  --shadow-glow-violet: 0 0 0 1px rgba(167,139,250,.30), 0 10px 28px -8px rgba(167,139,250,.35);

  /* --- Motion ------------------------------------------------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    420ms;

  /* --- Z-index ------------------------------------------------ */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  900;
  --z-modal:    1000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; }
}