/* ============================================================
 * UI UX Pro Max — Colors & Type
 * Source of truth for all brand color + typography tokens.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BASE COLORS (palette) ---------- */
  /* Navy / blue surfaces — base of the brand */
  --uupm-navy-950: #05080F;   /* deepest bg */
  --uupm-navy-900: #0B1220;   /* page bg */
  --uupm-navy-800: #111827;   /* card bg */
  --uupm-navy-700: #1F2937;   /* raised card */
  --uupm-navy-600: #334155;   /* border-strong */
  --uupm-navy-500: #475569;
  --uupm-navy-400: #64748B;   /* muted text */
  --uupm-navy-300: #94A3B8;
  --uupm-navy-200: #CBD5E1;
  --uupm-navy-100: #E2E8F0;
  --uupm-navy-50:  #F1F5F9;

  /* Brand blue — primary CTA / iconography */
  --uupm-blue-700: #1D4ED8;
  --uupm-blue-600: #2563EB;
  --uupm-blue-500: #3B82F6;   /* PRIMARY */
  --uupm-blue-400: #60A5FA;
  --uupm-blue-300: #93C5FD;
  --uupm-blue-200: #BFDBFE;

  /* Brand orange — accent / highlight */
  --uupm-orange-700: #C2410C;
  --uupm-orange-600: #EA580C;
  --uupm-orange-500: #F97316;   /* ACCENT */
  --uupm-orange-400: #FB923C;
  --uupm-orange-300: #FDBA74;

  /* Brand magenta — used in wordmark gradient */
  --uupm-magenta-500: #C084FC;
  --uupm-magenta-400: #D8B4FE;

  /* Semantic */
  --uupm-success: #10B981;
  --uupm-warning: #F59E0B;
  --uupm-danger:  #DC2626;
  --uupm-info:    #3B82F6;

  /* ---------- SEMANTIC TOKENS (light mode default) ---------- */
  --bg:          #FFFFFF;
  --bg-subtle:   #F8FAFC;
  --bg-muted:    #F1F5F9;

  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F8FAFC;

  --fg-1: #0B1220;   /* primary text */
  --fg-2: #334155;   /* secondary text */
  --fg-3: #64748B;   /* muted */
  --fg-4: #94A3B8;   /* placeholder */
  --fg-on-primary: #FFFFFF;
  --fg-on-accent:  #0B1220;

  --primary:        var(--uupm-blue-500);
  --primary-hover:  var(--uupm-blue-600);
  --primary-press:  var(--uupm-blue-700);
  --primary-soft:   #DBEAFE;

  --accent:         var(--uupm-orange-500);
  --accent-hover:   var(--uupm-orange-600);
  --accent-soft:    #FFEDD5;

  --border-subtle:  #E2E8F0;
  --border:         #CBD5E1;
  --border-strong:  #94A3B8;

  --ring: var(--uupm-blue-500);

  /* ---------- DARK MODE ---------- */
  /* default: dark is the brand's primary surface */
}

[data-theme="dark"], .uupm-dark {
  --bg:          var(--uupm-navy-900);
  --bg-subtle:   var(--uupm-navy-950);
  --bg-muted:    var(--uupm-navy-800);

  --surface:        var(--uupm-navy-800);
  --surface-raised: var(--uupm-navy-700);
  --surface-sunken: var(--uupm-navy-950);

  --fg-1: #F1F5F9;
  --fg-2: #CBD5E1;
  --fg-3: #94A3B8;
  --fg-4: #64748B;

  --border-subtle: rgba(148, 163, 184, 0.10);
  --border:        rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.32);

  --primary-soft: rgba(59, 130, 246, 0.18);
  --accent-soft:  rgba(249, 115, 22, 0.18);
}

/* ---------- TYPE FAMILIES ---------- */
:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: 'Inter', var(--font-sans);

  /* Type scale (display + ui) */
  --fs-display-2xl: clamp(48px, 7vw, 80px);
  --fs-display-xl:  clamp(40px, 6vw, 64px);
  --fs-display-lg:  clamp(32px, 4.5vw, 48px);
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Spacing scale (8pt base, with 4pt half-step) */
  --space-0: 0px;
  --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;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;     /* default for buttons / cards */
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  /* Elevation (light) */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(11, 18, 32, 0.08), 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(11, 18, 32, 0.12), 0 4px 8px rgba(11, 18, 32, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(11, 18, 32, 0.18);

  /* Glow (brand specific — used on dark surfaces) */
  --glow-blue:   0 0 0 1px rgba(59, 130, 246, 0.30), 0 8px 32px -8px rgba(59, 130, 246, 0.40);
  --glow-orange: 0 0 0 1px rgba(249, 115, 22, 0.30), 0 8px 32px -8px rgba(249, 115, 22, 0.40);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- BRAND GRADIENTS ---------- */
:root {
  /* The signature wordmark gradient: blue → magenta → orange */
  --gradient-wordmark: linear-gradient(90deg, #3B82F6 0%, #C084FC 50%, #F97316 100%);
  /* Hero background ambient: blue glow left, orange glow right */
  --gradient-ambient:
    radial-gradient(60% 50% at 15% 30%, rgba(59,130,246,0.25), transparent 60%),
    radial-gradient(50% 50% at 85% 70%, rgba(249,115,22,0.20), transparent 60%);
}

/* ============================================================
 * SEMANTIC TYPE STYLES
 * Use directly via class, or @extend in your own CSS.
 * ============================================================ */
.uupm-display-2xl { font: 800 var(--fs-display-2xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.uupm-display-xl  { font: 800 var(--fs-display-xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.uupm-display-lg  { font: 700 var(--fs-display-lg)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); }

.uupm-h1 { font: 700 var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.uupm-h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.uupm-h3 { font: 600 var(--fs-h3)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.uupm-h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }

.uupm-body-lg { font: 400 var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans); color: var(--fg-2); }
.uupm-body    { font: 400 var(--fs-body)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }
.uupm-body-sm { font: 400 var(--fs-body-sm)/var(--lh-normal) var(--font-sans); color: var(--fg-3); }
.uupm-caption { font: 500 var(--fs-caption)/var(--lh-normal) var(--font-sans); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.uupm-micro   { font: 500 var(--fs-micro)/var(--lh-normal) var(--font-sans); color: var(--fg-3); }

.uupm-mono    { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }

.uupm-wordmark {
  background: var(--gradient-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}