/* Serviyou Technologies — Premium Dark-Tier Design Tokens (v4.1, 2026-05-15)
 *
 * Premium dark-navy aesthetic with electric blue accent. Replaces the
 * light-mode v3 system. Single source of truth for all colors,
 * typography, spacing, radii, shadows, transitions, focus rings.
 *
 * Accessibility-first defaults preserved from v3:
 *   - 18px body text baseline
 *   - 1.6 line-height
 *   - 4.5:1 color contrast on every text/bg pair (white on #0a0e27 = 17.4:1)
 *   - Focus ring 3:1 contrast minimum
 *   - prefers-reduced-motion respected (see base.css)
 *   - 48px minimum tap targets
 *
 * Compat: the v3 semantic names (--color-primary, --color-accent,
 * --color-background, etc.) are aliased to v4 dark values so the
 * existing button/card/form components continue to render without
 * a sweeping template rewrite.
 */

:root {
  /* ─── v4 Dark-Tier Surfaces ──────────────────────────────────── */
  --color-bg-primary:     #0a0e27;  /* deep navy — page background */
  --color-bg-secondary:   #0f1535;  /* slightly lighter navy — bands */
  --color-bg-elevated:    #151b3d;  /* card background */
  --color-bg-overlay:     rgba(15, 21, 53, 0.85);
  --color-bg-tinted:      rgba(59, 130, 246, 0.08);  /* electric-blue wash */

  /* ─── v4 Accent (electric blue) ──────────────────────────────── */
  --color-accent-primary: #3b82f6;
  --color-accent-hover:   #2563eb;
  --color-accent-light:   #60a5fa;
  --color-accent-glow:    rgba(59, 130, 246, 0.40);

  /* ─── v4 Text ─────────────────────────────────────────────────── */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #94a3b8;
  --color-text-accent:    #60a5fa;
  --color-text-inverse:   #0a0e27;  /* for buttons on white surfaces */

  /* ─── v4 Borders ─────────────────────────────────────────────── */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.16);
  --color-border-accent:  rgba(59, 130, 246, 0.40);

  /* ─── v4 Status (kept high-saturation for dark BG) ───────────── */
  --color-success:        #10b981;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;
  --color-info:           #60a5fa;

  /* ─── v3 compatibility aliases (so existing components keep working) ─ */
  --color-primary:           var(--color-accent-primary);
  --color-primary-hover:     var(--color-accent-hover);
  --color-accent:            var(--color-accent-primary);
  --color-background:        var(--color-bg-primary);
  --color-surface:           var(--color-bg-secondary);
  --color-surface-elevated:  var(--color-bg-elevated);
  --color-surface-tinted:    var(--color-bg-tinted);

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-family-sans:  'Inter', system-ui, sans-serif;
  --font-family-display: 'Inter', system-ui, sans-serif;
  --font-family-serif: 'Crimson Pro', Georgia, serif;
  --font-family-mono:  'JetBrains Mono', Menlo, Consolas, monospace;

  /* Min 14px; 18px is the body baseline */
  --font-size-xs:    0.75rem;    /* 12px — small caps labels only */
  --font-size-sm:    0.875rem;   /* 14px — fine print */
  --font-size-base:  1rem;       /* 16px — labels */
  --font-size-lg:    1.125rem;   /* 18px — body */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-2xl:   2rem;       /* 32px */
  --font-size-3xl:   2.5rem;     /* 40px */
  --font-size-4xl:   3.5rem;     /* 56px — hero */
  --font-size-5xl:   4.5rem;     /* 72px — massive hero */

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wider:  0.05em;
  --letter-spacing-widest: 0.10em;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ─── Spacing scale ───────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ─── Border radius ───────────────────────────────────────────── */
  --radius-sm:    0.375rem;   /* 6px */
  --radius-md:    0.5rem;     /* 8px */
  --radius-lg:    0.75rem;    /* 12px */
  --radius-xl:    1rem;       /* 16px */
  --radius-2xl:   1.5rem;     /* 24px */
  --radius-full:  9999px;

  /* ─── Shadows (deep cards + accent glow) ─────────────────────── */
  --shadow-sm:        0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-md:        0 4px 12px -2px rgb(0 0 0 / 0.40);
  --shadow-lg:        0 10px 25px -3px rgb(0 0 0 / 0.50);
  --shadow-xl:        0 20px 40px -10px rgb(0 0 0 / 0.55);
  --shadow-card:      0 4px 24px rgb(0 0 0 / 0.50);

  --shadow-glow-sm:   0 0 12px rgba(59, 130, 246, 0.20);
  --shadow-glow-md:   0 0 24px rgba(59, 130, 246, 0.30);
  --shadow-glow-lg:   0 0 48px rgba(59, 130, 246, 0.40);

  /* ─── Transitions ─────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-normal:  250ms ease;
  --transition-slow:    350ms ease;

  /* ─── Focus ring (accessibility) ──────────────────────────────── */
  --focus-ring:        0 0 0 3px rgba(59, 130, 246, 0.60);
  --focus-ring-amber:  0 0 0 3px rgba(59, 130, 246, 0.60);  /* aliased to blue */

  /* ─── Layout containers ───────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* ─── Touch targets (mobile a11y) ─────────────────────────────── */
  --tap-target-min: 48px;

  /* ─── Header height (used in calc(100vh - var(--header-h))) ──── */
  --header-h:        80px;
  --header-h-mobile: 64px;
}

/* Page-level dark background — overrides any Tailwind bg-stone-50 leftovers */
html, body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Subtle radial gradient for depth (upper-left wash) */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(59, 130, 246, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(59, 130, 246, 0.04), transparent 50%);
  background-attachment: fixed;
}