/* Wilicom — design tokens v2 (Premium B2B) */

:root {
  /* Brand */
  --c-primary:        #1B4F8C;
  --c-primary-dark:   #0F3461;
  --c-primary-deep:   #0A2240;
  --c-primary-50:     #E8F0F9;
  --c-primary-100:    #C7DAEE;
  --c-primary-300:    #6F9CC9;

  /* Accent — neon glow */
  --c-accent:         #F59E0B;
  --c-accent-bright:  #FFB23E;
  --c-accent-dark:    #B45309;
  --c-accent-glow:    rgba(245, 158, 11, 0.45);

  /* Surfaces */
  --c-bg:             #FFFFFF;
  --c-bg-soft:        #F6F9FD;
  --c-bg-tint:        #EEF3FA;
  --c-dark:           #050B1A;
  --c-dark-2:         #0C162E;
  --c-dark-3:         #182549;

  /* Ink */
  --c-text:           #0B132B;
  --c-text-soft:      #3A4868;
  --c-text-mute:      #6B7894;
  --c-text-on-dark:   #F4F7FC;
  --c-text-on-dark-mute: #9AA8C7;

  /* Borders */
  --c-border:         #DFE6F2;
  --c-border-strong:  #C7D4E6;
  --c-border-dark:    rgba(255, 255, 255, 0.10);

  /* Status */
  --c-success:        #14B86F;
  --c-danger:         #DC2626;

  /* Gradients */
  --grad-hero:
    radial-gradient(60% 80% at 15% 10%,  rgba(80, 60, 200, 0.45)  0%, transparent 60%),
    radial-gradient(50% 70% at 90% 20%,  rgba(245, 158, 11, 0.18) 0%, transparent 65%),
    radial-gradient(70% 90% at 60% 100%, rgba(27, 79, 140, 0.55)  0%, transparent 70%),
    linear-gradient(180deg, #050B1A 0%, #0C162E 60%, #0F3461 100%);
  --grad-cta:
    linear-gradient(135deg, #F59E0B 0%, #FFB23E 50%, #F59E0B 100%);
  --grad-divider:
    linear-gradient(90deg, transparent 0%, var(--c-border-strong) 50%, transparent 100%);
  --grad-divider-dark:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15, 52, 97, .06), 0 1px 1px rgba(15, 52, 97, .04);
  --sh-2: 0 6px 18px rgba(15, 52, 97, .08), 0 2px 6px rgba(15, 52, 97, .04);
  --sh-3: 0 16px 40px rgba(15, 52, 97, .12), 0 6px 14px rgba(15, 52, 97, .06);
  --sh-card: 0 1px 0 rgba(15, 52, 97, .04), 0 8px 28px rgba(15, 52, 97, .08);
  --sh-card-hover: 0 1px 0 rgba(15, 52, 97, .06), 0 18px 50px rgba(15, 52, 97, .16);
  --sh-glow-accent: 0 0 0 1px rgba(245, 158, 11, .35), 0 12px 36px var(--c-accent-glow);
  --sh-inner-dark: inset 0 1px 0 rgba(255,255,255, .08);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* Spacing — 8pt */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Type */
  --ff-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --ff-display: var(--ff-sans);
  --ff-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.625rem, 1.4rem + .9vw, 2.0625rem);
  --fs-3xl: clamp(2rem, 1.55rem + 1.6vw, 2.75rem);
  --fs-4xl: clamp(2.5rem, 1.8rem + 2.8vw, 3.75rem);
  --fs-5xl: clamp(3rem, 2rem + 4.5vw, 5.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  --tracking-tight: -0.025em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.04em;

  /* Sizing */
  --container: 1240px;
  --container-narrow: 880px;
  --header-h: 76px;

  /* Z */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

/* Dark surface scope */
.is-dark {
  --c-bg:           var(--c-dark);
  --c-bg-soft:      var(--c-dark-2);
  --c-bg-tint:      var(--c-dark-3);
  --c-text:         var(--c-text-on-dark);
  --c-text-soft:    var(--c-text-on-dark-mute);
  --c-text-mute:    var(--c-text-on-dark-mute);
  --c-border:       var(--c-border-dark);
  --c-border-strong: rgba(255,255,255,.18);
  color: var(--c-text);
}