/* ============================================================
   OneStepAhead — Foundations
   Colors, type, spacing, radii, shadows, motion
   Light-primary with dark variant
   ============================================================ */

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

:root {
  /* ---------- Brand core ---------- */
  --brand-indigo:   #5B4FE9;   /* primary action / link */
  --brand-indigo-2: #6B5BFF;   /* accent gradient stop */
  --brand-violet:   #8B5BFF;   /* magical accent */
  --brand-teal:     #00E5C7;   /* signal / online / spark */
  --brand-gold:     #FFD166;   /* highlight / premium */
  --brand-ink:      #0B0E1A;   /* near-black, used in dark */

  /* Brand gradients — the "magic" gesture */
  --grad-aether:    linear-gradient(135deg, #6B5BFF 0%, #8B5BFF 45%, #00E5C7 100%);
  --grad-spark:     linear-gradient(135deg, #5B4FE9 0%, #00E5C7 100%);
  --grad-dawn:      linear-gradient(180deg, #FFD166 0%, #FF9C6B 100%);
  --grad-mesh:      radial-gradient(at 20% 10%, rgba(107,91,255,.18), transparent 50%),
                    radial-gradient(at 80% 30%, rgba(0,229,199,.14), transparent 55%),
                    radial-gradient(at 50% 90%, rgba(255,209,102,.10), transparent 60%);

  /* ---------- Neutrals (light theme) ---------- */
  --bg-0:  #FFFFFF;            /* page */
  --bg-1:  #F7F7FB;            /* surface */
  --bg-2:  #EFEFF6;            /* sunken / hover */
  --bg-3:  #E5E5EF;            /* divider band */
  --line:  rgba(11, 14, 26, 0.08);
  --line-strong: rgba(11, 14, 26, 0.14);

  --fg-1:  #0B0E1A;            /* primary text */
  --fg-2:  #3D4356;            /* secondary text */
  --fg-3:  #6B7186;            /* tertiary / placeholder */
  --fg-4:  #9097A8;            /* disabled */
  --fg-inv:#FFFFFF;            /* on dark/colored bg */

  /* Semantic */
  --success: #1F8A5B;
  --success-bg: #E5F5ED;
  --warning: #B8730E;
  --warning-bg: #FFF4DC;
  --danger:  #C73E3E;
  --danger-bg:  #FBE7E7;
  --info:    #2E63D4;
  --info-bg: #E5EEFB;

  /* ---------- Type ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.250 minor third, comfortable for ERP) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-64: 64px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal: 0;
  --tr-wide:    0.04em;
  --tr-caps:    0.08em;

  /* ---------- Spacing (4-pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radii ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(11, 14, 26, 0.05), 0 1px 1px rgba(11, 14, 26, 0.04);
  --shadow-2: 0 2px 4px rgba(11, 14, 26, 0.06), 0 4px 12px rgba(11, 14, 26, 0.06);
  --shadow-3: 0 4px 8px rgba(11, 14, 26, 0.06), 0 12px 32px rgba(11, 14, 26, 0.10);
  --shadow-4: 0 8px 16px rgba(11, 14, 26, 0.08), 0 24px 64px rgba(11, 14, 26, 0.14);
  --shadow-glow: 0 0 0 1px rgba(107, 91, 255, 0.35), 0 8px 32px rgba(107, 91, 255, 0.28);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(91, 79, 233, 0.30);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
  --dur-magic: 700ms;
}

/* ---------- Dark variant ---------- */
[data-theme="dark"] {
  --bg-0: #0B0E1A;
  --bg-1: #11152A;
  --bg-2: #181D38;
  --bg-3: #232A4A;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --fg-1: #F2F3FA;
  --fg-2: #B7BDD2;
  --fg-3: #8A91AB;
  --fg-4: #5D6486;

  --success-bg: rgba(31, 138, 91, 0.18);
  --warning-bg: rgba(184, 115, 14, 0.18);
  --danger-bg:  rgba(199, 62, 62, 0.18);
  --info-bg:    rgba(46, 99, 212, 0.18);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.4);
  --shadow-3: 0 8px 24px rgba(0,0,0,.5);
  --shadow-4: 0 16px 48px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(139, 91, 255, 0.45), 0 8px 32px rgba(107, 91, 255, 0.40);
}

/* ============================================================
   Semantic type styles
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-1);
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: var(--r-1);
}

/* Magic text — gradient fill, use sparingly */
.magic-text {
  background: var(--grad-aether);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}