/*
  Liorta Design Tokens
  Direction: warm white / light grey neutrals (~70%), charcoal dark sections (~20%),
  restrained blue-violet accent (~10%). Evolved Liorta light blue as primary.
  Placeholder values pending {{FINAL_COLORS}} / {{FINAL_LOGO}} approval - see DECISIONS.md.
*/

:root {
  /* ---- Color: neutrals (warm white / light grey) ---- */
  --color-white: #ffffff;
  --color-bg: #faf9f7;
  --color-neutral-100: #f4f2ef;
  --color-neutral-200: #e8e5e0;
  --color-neutral-300: #d6d2cb;
  --color-neutral-400: #a9a39a;
  --color-neutral-500: #7c766d;
  --color-neutral-600: #5a554e;

  /* ---- Color: charcoal / dark ---- */
  --color-charcoal-950: #0d0f12;
  --color-charcoal-900: #14171b;
  --color-charcoal-800: #1c2026;
  --color-charcoal-700: #262b33;
  --color-charcoal-600: #363c46;

  /* ---- Color: primary (evolved Liorta light blue) ---- */
  --color-primary-100: #e3f0fc;
  --color-primary-200: #bcdcf7;
  --color-primary-300: #8fc3ef;
  --color-primary-400: #5fa5e2;
  --color-primary-500: #3986d1;
  --color-primary-600: #2569ac;
  --color-primary-700: #1c5488;

  /* ---- Color: accent (restrained blue-violet) - sparing use only ---- */
  --color-accent-400: #8a7cf0;
  --color-accent-500: #6c5ce0;
  --color-accent-600: #5645c4;

  /* ---- Color: semantic ---- */
  --color-ink: var(--color-charcoal-900);
  --color-ink-soft: var(--color-neutral-600);
  --color-surface: var(--color-white);
  --color-surface-sunken: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-on-dark: #f4f2ef;
  --color-on-dark-soft: #a9a39a;
  --color-focus-ring: var(--color-accent-500);
  --color-success: #2f8f5b;
  --color-danger: #c1443a;

  /* ---- Typography ---- */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.375rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.5rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 10rem;

  /* ---- Layout ---- */
  --container-max: 78rem;
  --container-narrow: 48rem;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 360ms;
  --duration-slow: 720ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(13, 15, 18, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 15, 18, 0.08);
  --shadow-lg: 0 24px 64px rgba(13, 15, 18, 0.12);

  --header-height: 4.5rem;
}

@media (min-width: 64rem) {
  :root {
    --header-height: 5.25rem;
  }
}

/*
  ---- Redesign layer (v2) ----
  Additive tokens for the premium homepage/header/footer redesign. Nothing
  above this line is changed, so template-*.php pages not yet migrated to
  the v2 visual language render exactly as before. See DECISIONS.md for the
  redesign rationale and rollout plan.
*/
:root {
  /* A more saturated, confident "Liorta blue" calibrated against the live
     liorta.com brand color, plus a cyan companion for gradients/glow -
     used deliberately (gradients, glow, accents), not as a full repaint. */
  --v2-blue-400: #4f8ef7;
  --v2-blue-500: #2f6ff2;
  --v2-blue-600: #1d52c7;
  --v2-blue-700: #163f99;
  --v2-cyan-400: #38d9e8;
  --v2-cyan-500: #17b9d6;
  --v2-violet-500: #7c6ff0;

  --v2-ink-950: #0a0e1a;
  --v2-ink-900: #10152a;
  --v2-ink-800: #161c36;

  --v2-gradient-primary: linear-gradient(135deg, var(--v2-blue-500) 0%, var(--v2-cyan-500) 100%);
  --v2-gradient-primary-soft: linear-gradient(135deg, rgba(47, 111, 242, 0.14) 0%, rgba(23, 185, 214, 0.14) 100%);
  --v2-gradient-dark: radial-gradient(120% 140% at 15% 0%, #182248 0%, #0d1230 45%, #080a18 100%);
  --v2-gradient-mesh:
    radial-gradient(38rem 24rem at 8% -8%, rgba(47, 111, 242, 0.16), transparent 60%),
    radial-gradient(30rem 26rem at 100% 12%, rgba(23, 185, 214, 0.14), transparent 55%),
    radial-gradient(40rem 30rem at 60% 100%, rgba(124, 111, 240, 0.08), transparent 60%);

  --v2-glass-bg: rgba(255, 255, 255, 0.6);
  --v2-glass-border: rgba(255, 255, 255, 0.5);
  --v2-glass-bg-dark: rgba(22, 28, 54, 0.55);
  --v2-glass-border-dark: rgba(255, 255, 255, 0.08);

  --v2-shadow-soft: 0 2px 8px rgba(10, 14, 26, 0.06);
  --v2-shadow-panel: 0 24px 60px -12px rgba(16, 21, 42, 0.22), 0 4px 16px rgba(16, 21, 42, 0.08);
  --v2-shadow-glow: 0 0 0 1px rgba(47, 111, 242, 0.12), 0 20px 50px -10px rgba(47, 111, 242, 0.35);
  --v2-shadow-glow-cyan: 0 0 40px rgba(23, 185, 214, 0.35);

  --v2-radius-xl: 1.75rem;
  --v2-radius-2xl: 2.25rem;
}