/* =========================================================
   WebYourIdea — Design Tokens
   Derived from the brand mark: steel blue "W" + deep navy "V".
   Palette expanded into a hosting-industry-appropriate system
   with clear informational semantics (success/warn/error/info).
   ========================================================= */

:root {
  /* ---------- Brand Core ---------- */
  --wyi-navy-950: #00133D;   /* deep ink, headings */
  --wyi-navy-900: #001F5B;   /* primary navy (logo inner V) */
  --wyi-navy-800: #0A2E75;
  --wyi-navy-700: #143F8E;
  --wyi-blue-600: #1C4FA8;
  --wyi-blue-500: #2560A0;   /* brand steel blue (logo outer W) */
  --wyi-blue-400: #4A82C4;
  --wyi-blue-300: #7DA6D6;
  --wyi-blue-200: #B5CCE6;
  --wyi-blue-100: #DCE7F3;
  --wyi-blue-050: #EEF3FA;

  /* ---------- Neutrals (cool gray, biased toward blue) ---------- */
  --wyi-ink-950:  #0B1020;
  --wyi-ink-900:  #111934;
  --wyi-ink-700:  #2B3553;
  --wyi-ink-500:  #5A6583;
  --wyi-ink-400:  #7F89A3;
  --wyi-ink-300:  #B1B9CC;
  --wyi-ink-200:  #D5DAE4;
  --wyi-ink-100:  #E9ECF2;
  --wyi-ink-050:  #F4F6FA;
  --wyi-ink-000:  #FFFFFF;

  /* ---------- Semantic / Status ---------- */
  --wyi-success-600: #10885A;
  --wyi-success-500: #16A070;
  --wyi-success-100: #DEF5EC;
  --wyi-warning-600: #B97803;
  --wyi-warning-500: #E8950D;
  --wyi-warning-100: #FBEFD3;
  --wyi-danger-600:  #C0362C;
  --wyi-danger-500:  #DE4A3F;
  --wyi-danger-100:  #FADCD9;
  --wyi-info-500:    var(--wyi-blue-500);
  --wyi-info-100:    var(--wyi-blue-100);

  /* Promo accent (domenii în promoție / hot) */
  --wyi-accent-500: #F04E23; /* warm orange — used sparingly for SALE tags, hot domains */
  --wyi-accent-100: #FFE3D8;

  /* ---------- Semantic aliases (fg/bg) ---------- */
  --fg-strong:   var(--wyi-navy-950);
  --fg-default:  var(--wyi-ink-900);
  --fg-muted:    var(--wyi-ink-500);
  --fg-subtle:   var(--wyi-ink-400);
  --fg-on-navy:  var(--wyi-ink-000);
  --fg-link:     var(--wyi-blue-500);
  --fg-link-hover: var(--wyi-navy-900);

  --bg-page:     var(--wyi-ink-000);
  --bg-surface:  var(--wyi-ink-000);
  --bg-subtle:   var(--wyi-ink-050);
  --bg-muted:    var(--wyi-ink-100);
  --bg-navy:     var(--wyi-navy-900);
  --bg-brand:    var(--wyi-blue-500);
  --bg-brand-soft: var(--wyi-blue-050);

  --border-subtle:  var(--wyi-ink-100);
  --border-default: var(--wyi-ink-200);
  --border-strong:  var(--wyi-ink-300);
  --border-brand:   var(--wyi-blue-500);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;  /* default card/button */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 31, 91, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 31, 91, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(0, 31, 91, 0.14);
  --shadow-lg: 0 20px 40px -12px rgba(0, 31, 91, 0.22);
  --shadow-ring-brand: 0 0 0 4px rgba(37, 96, 160, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0: 0;
  --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;
  --sp-24: 96px;

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

  /* ---------- Type scale ---------- */
  --fs-display-xl: clamp(44px, 5.2vw, 64px);
  --fs-display-lg: clamp(36px, 4vw, 48px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps:  0.1em;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Z ---------- */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 150;
}

/* =========================================================
   Semantic type classes
   ========================================================= */

.wyi-display-xl {
  font: 700 var(--fs-display-xl) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.wyi-display-lg {
  font: 700 var(--fs-display-lg) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.wyi-h1 { font: 700 var(--fs-h1) / var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.wyi-h2 { font: 700 var(--fs-h2) / var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.wyi-h3 { font: 700 var(--fs-h3) / var(--lh-snug) var(--font-display); color: var(--fg-strong); }
.wyi-h4 { font: 600 var(--fs-h4) / var(--lh-snug) var(--font-display); color: var(--fg-strong); }
.wyi-h5 { font: 600 var(--fs-h5) / var(--lh-snug) var(--font-display); color: var(--fg-strong); }

.wyi-lead  { font: 400 var(--fs-body-lg) / var(--lh-relaxed) var(--font-sans); color: var(--fg-muted); }
.wyi-body  { font: 400 var(--fs-body)    / var(--lh-normal)  var(--font-sans); color: var(--fg-default); }
.wyi-body-sm { font: 400 var(--fs-body-sm) / var(--lh-normal) var(--font-sans); color: var(--fg-default); }
.wyi-caption { font: 500 var(--fs-caption) / var(--lh-normal) var(--font-sans); color: var(--fg-muted); }
.wyi-micro   { font: 500 var(--fs-micro) / 1.4 var(--font-sans); color: var(--fg-muted); }

.wyi-eyebrow {
  font: 700 var(--fs-micro) / 1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-link);
}

.wyi-code,
code { font: 500 0.92em / 1.5 var(--font-mono); color: var(--wyi-navy-900); background: var(--wyi-ink-050); padding: 2px 6px; border-radius: var(--radius-xs); }

/* Price display */
.wyi-price-lg { font: 700 44px/1 var(--font-display); color: var(--fg-strong); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.wyi-price-lg .cur { font-size: 22px; font-weight: 700; color: var(--fg-muted); vertical-align: top; margin-right: 2px; }
.wyi-price-lg .per { font-size: 14px; font-weight: 500; color: var(--fg-muted); font-family: var(--font-sans); }