/* =========================================================================
   Logicwind Design Tokens — v1.0.0
   Two-layer model: primitives → semantic. Use semantic in components.
   ========================================================================= */

:root {
  /* ---------- Primitives: Brand ---------- */
  --lw-white: #FFFFFF;
  --lw-stone-white: #F2F4F7;
  --lw-blue-grey: #D2D6E5;

  /* Red scale */
  --lw-red-50:  #FEF2F2;
  --lw-red-100: #FDE3E2;
  --lw-red-200: #FBC8C6;
  --lw-red-300: #F79B97;
  --lw-red-400: #F37571;
  --lw-red-500: #F04F4B;  /* brand */
  --lw-red-600: #D43A36;
  --lw-red-700: #B12C28;
  --lw-red-800: #8E2421;
  --lw-red-900: #6F1C1A;

  /* Blue scale */
  --lw-blue-50:  #F4F5F7;
  --lw-blue-100: #E5E7EB;
  --lw-blue-200: #C8CCD3;
  --lw-blue-300: #98A0AE;
  --lw-blue-400: #5C6675;
  --lw-blue-500: #2E3744;
  --lw-blue-600: #1B2330;
  --lw-blue-700: #131A24;
  --lw-blue-800: #0E151E;  /* brand */
  --lw-blue-900: #080C12;

  /* Grey scale */
  --lw-grey-50:  #F4F5F8;
  --lw-grey-100: #E7E9EE;
  --lw-grey-200: #CBCFD9;
  --lw-grey-300: #A6ACBC;
  --lw-grey-400: #7B819A;
  --lw-grey-500: #585E75;  /* brand */
  --lw-grey-600: #444A5E;
  --lw-grey-700: #353A4A;
  --lw-grey-800: #272B37;
  --lw-grey-900: #181B22;

  /* Status */
  --lw-success: #16A34A;
  --lw-warning: #F59E0B;
  --lw-danger:  #DC2626;
  --lw-info:    #2563EB;

  /* ---------- Semantic: Light (default) ---------- */
  --bg-primary: var(--lw-white);
  --bg-surface: var(--lw-stone-white);
  --bg-elevated: var(--lw-white);
  --bg-accent-subtle: var(--lw-red-50);
  --bg-inverse: var(--lw-blue-800);

  --text-primary: var(--lw-blue-800);
  --text-secondary: var(--lw-grey-500);
  --text-tertiary: var(--lw-grey-400);
  --text-disabled: var(--lw-blue-300);
  --text-inverse: var(--lw-white);
  --text-accent: var(--lw-red-700);

  --accent-default: var(--lw-red-500);
  --accent-hover: var(--lw-red-600);
  --accent-active: var(--lw-red-700);

  --border-subtle: var(--lw-stone-white);
  --border-default: var(--lw-blue-grey);
  --border-strong: var(--lw-grey-300);
  --border-accent: var(--lw-red-500);

  --focus-ring: rgba(240, 79, 75, 0.35);

  /* ---------- Typography ---------- */
  --font-display: 'Poppins', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-handwritten: 'Caveat', 'Comic Sans MS', cursive;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */
  --fs-7xl:  4.5rem;    /* 72 */

  --lh-xs:   1rem;      /* 16 */
  --lh-sm:   1.25rem;   /* 20 */
  --lh-base: 1.5rem;    /* 24 */
  --lh-lg:   1.75rem;   /* 28 */
  --lh-xl:   1.875rem;  /* 30 */
  --lh-2xl:  2rem;      /* 32 */
  --lh-3xl:  2.375rem;  /* 38 */
  --lh-4xl:  2.75rem;   /* 44 */
  --lh-5xl:  3.5rem;    /* 56 */
  --lh-6xl:  4.25rem;   /* 68 */
  --lh-7xl:  5rem;      /* 80 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --space-0_5: 0.125rem; /* 2 */
  --space-1:   0.25rem;  /* 4 */
  --space-1_5: 0.375rem; /* 6 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */
  --space-40:  10rem;    /* 160 */
  --space-48:  12rem;    /* 192 */
  --space-64:  16rem;    /* 256 */

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;       /* inputs, small surfaces */
  --radius-button: 10px;  /* buttons (slightly softer than --radius-md) */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------- Elevation ---------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(14, 21, 30, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(14, 21, 30, 0.06), 0 1px 2px -1px rgba(14, 21, 30, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(14, 21, 30, 0.08), 0 2px 4px -2px rgba(14, 21, 30, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(14, 21, 30, 0.10), 0 4px 6px -4px rgba(14, 21, 30, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(14, 21, 30, 0.10), 0 8px 10px -6px rgba(14, 21, 30, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(14, 21, 30, 0.20);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Raised: multi-layer 3D depth for marketing CTAs and CTA Block surfaces.
     Stack = top inner highlight + bottom inner edge + near drop + far drop.
     Reserve for moments that should physically lift off the page. */
  --shadow-raised:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(14, 21, 30, 0.18),
    0 6px 14px -2px rgba(14, 21, 30, 0.22),
    0 14px 32px -10px rgba(14, 21, 30, 0.18);
  --shadow-raised-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(14, 21, 30, 0.18),
    0 10px 20px -2px rgba(14, 21, 30, 0.26),
    0 20px 40px -12px rgba(14, 21, 30, 0.20);
  --shadow-raised-brand:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(106, 12, 12, 0.28),
    0 8px 18px -3px rgba(212, 58, 54, 0.35),
    0 14px 32px -10px rgba(14, 21, 30, 0.18);
  --shadow-raised-steady:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30),
    0 8px 18px -3px rgba(14, 21, 30, 0.32),
    0 14px 32px -10px rgba(14, 21, 30, 0.22);

  /* Frame cross — single SVG glyph used as 4-corner background for `.framed`.
     Brand red so the marker reads as a deliberate accent, not chrome. */
  --frame-cross: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 0v12M0 6h12' stroke='%23F04F4B' stroke-width='1.4' stroke-linecap='round' fill='none'/></svg>");

  /* ---------- Borders ---------- */
  --border-width-1: 1px;
  --border-width-2: 2px;

  /* ---------- Motion ---------- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-default: all var(--duration-base) var(--ease-in-out);

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

  --container-sm: 640px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1200px;
  --container-2xl: 1320px;

  /* ---------- CTA variants ----------
     Three primary CTA backgrounds.
     - Brand: high-energy moments (hero CTAs, marketing landings).
     - Steady: default for in-product, section CTAs, forms.
     - Inverted: white CTA on red/navy backgrounds.
  */
  --cta-brand-bg: var(--lw-red-500);
  --cta-brand-bg-hover: var(--lw-red-600);
  --cta-brand-bg-active: var(--lw-red-700);
  --cta-brand-fg: var(--lw-white);

  --cta-steady-bg: var(--lw-blue-800);
  --cta-steady-bg-hover: var(--lw-blue-700);
  --cta-steady-bg-active: var(--lw-blue-900);
  --cta-steady-fg: var(--lw-white);

  --cta-inverted-bg: var(--lw-white);
  --cta-inverted-bg-hover: var(--lw-stone-white);
  --cta-inverted-fg: var(--lw-blue-800);

  /* ---------- Hero banner system ----------
     Heroes = one gradient base + one optional motif overlay.
     Render with CSS gradients (cheap) + a single SVG overlay (lightweight).
     Total budget per hero: < 30KB. No raster PNG hero backgrounds.
  */
  --gradient-warm:
    radial-gradient(ellipse 80% 60% at 50% 100%, var(--lw-red-100) 0%, rgba(254,227,226,0) 70%),
    var(--lw-white);
  --gradient-coral:
    linear-gradient(180deg, var(--lw-white) 0%, var(--lw-red-200) 100%);
  --gradient-stone:
    radial-gradient(ellipse 70% 70% at 90% 0%, var(--lw-blue-50) 0%, var(--lw-white) 70%);
  --gradient-brand: var(--lw-red-500);

  /* Motif overlay opacities (apply to motif SVG color) */
  --motif-line-tone: rgba(240, 79, 75, 0.18);
  --motif-line-tone-stone: rgba(14, 21, 30, 0.10);
  --motif-line-tone-on-brand: rgba(255, 255, 255, 0.30);

  /* ---------- Footer watermark ----------
     Footer Pattern A — giant pale wordmark behind minimal social/copyright.
     Use semantic bg-surface so the footer auto-flips in dark mode.
  */
  --footer-bg: var(--bg-surface);
  --footer-watermark-color: rgba(14, 21, 30, 0.04);

  /* ---------- CTA Block background variants ----------
     The whole section background changes; text/eyebrow/benefits flip to match.
     Default uses semantic bg-surface (theme-aware). Brand/Steady are fixed
     intentional colors (red / navy) — the *moment* doesn't change in dark mode.
  */
  --cta-block-bg-default:        var(--bg-surface);
  --cta-block-bg-brand:          var(--lw-red-500);
  --cta-block-bg-steady:         var(--lw-blue-800);

  --cta-block-default-ornament:  rgba(14, 21, 30, 0.10);

  /* On Brand (red) — white text overlays */
  --cta-block-on-brand-text:     rgba(255, 255, 255, 0.92);
  --cta-block-on-brand-sub:      rgba(255, 255, 255, 0.78);
  --cta-block-on-brand-ornament: rgba(255, 255, 255, 0.30);
  /* On Steady (navy) — white text overlays */
  --cta-block-on-steady-text:    var(--lw-white);
  --cta-block-on-steady-sub:     rgba(255, 255, 255, 0.72);
  --cta-block-on-steady-ornament: rgba(255, 255, 255, 0.10);
}

/* ---------- Semantic: Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: var(--lw-blue-800);
    --bg-surface: var(--lw-blue-700);
    --bg-elevated: var(--lw-blue-600);
    --bg-accent-subtle: rgba(111, 28, 26, 0.2);
    --bg-inverse: var(--lw-white);

    --text-primary: var(--lw-white);
    --text-secondary: var(--lw-grey-300);
    --text-tertiary: var(--lw-grey-400);
    --text-disabled: var(--lw-grey-600);
    --text-inverse: var(--lw-blue-800);
    --text-accent: var(--lw-red-400);

    --accent-default: var(--lw-red-500);
    --accent-hover: var(--lw-red-400);
    --accent-active: var(--lw-red-300);

    --border-subtle: var(--lw-blue-700);
    --border-default: var(--lw-blue-600);
    --border-strong: var(--lw-grey-600);
    --border-accent: var(--lw-red-500);

    --focus-ring: rgba(243, 117, 113, 0.45);

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-raised:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 0 rgba(0, 0, 0, 0.45),
      0 6px 14px -2px rgba(0, 0, 0, 0.55),
      0 14px 32px -10px rgba(0, 0, 0, 0.45);
    --shadow-raised-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -2px 0 rgba(0, 0, 0, 0.45),
      0 10px 20px -2px rgba(0, 0, 0, 0.60),
      0 20px 40px -12px rgba(0, 0, 0, 0.50);
    --shadow-raised-brand:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -2px 0 rgba(106, 12, 12, 0.40),
      0 8px 18px -3px rgba(212, 58, 54, 0.45),
      0 14px 32px -10px rgba(0, 0, 0, 0.55);
    --shadow-raised-steady:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -2px 0 rgba(0, 0, 0, 0.55),
      0 8px 18px -3px rgba(0, 0, 0, 0.60),
      0 14px 32px -10px rgba(0, 0, 0, 0.55);

    --footer-watermark-color: rgba(255, 255, 255, 0.05);
    --cta-block-default-ornament: rgba(255, 255, 255, 0.10);
    /* Steady CTA needs to be distinct from the dark surface; lighten it. */
    --cta-steady-bg: var(--lw-blue-500);
    --cta-steady-bg-hover: var(--lw-blue-400);
    --cta-steady-bg-active: var(--lw-blue-600);
    /* CTA Block surfaces re-tuned for dark: page bg is already navy, so default
       and steady must lift visibly off the canvas — otherwise they vanish. */
    --cta-block-bg-default: var(--lw-blue-600);
    --cta-block-bg-steady:  var(--lw-blue-500);
    --gradient-warm:
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(240, 79, 75, 0.25) 0%, rgba(240, 79, 75, 0) 70%),
      var(--lw-blue-800);
    --gradient-coral:
      linear-gradient(180deg, var(--lw-blue-800) 0%, rgba(240, 79, 75, 0.35) 100%);
    --gradient-stone:
      radial-gradient(ellipse 70% 70% at 90% 0%, var(--lw-blue-600) 0%, var(--lw-blue-800) 70%);
    --motif-line-tone: rgba(243, 117, 113, 0.30);
    --motif-line-tone-stone: rgba(255, 255, 255, 0.12);
  }
}

[data-theme="dark"] {
  --bg-primary: var(--lw-blue-800);
  --bg-surface: var(--lw-blue-700);
  --bg-elevated: var(--lw-blue-600);
  --bg-accent-subtle: rgba(111, 28, 26, 0.2);
  --bg-inverse: var(--lw-white);

  --text-primary: var(--lw-white);
  --text-secondary: var(--lw-grey-300);
  --text-tertiary: var(--lw-grey-400);
  --text-disabled: var(--lw-grey-600);
  --text-inverse: var(--lw-blue-800);
  --text-accent: var(--lw-red-400);

  --accent-default: var(--lw-red-500);
  --accent-hover: var(--lw-red-400);
  --accent-active: var(--lw-red-300);

  --border-subtle: var(--lw-blue-700);
  --border-default: var(--lw-blue-600);
  --border-strong: var(--lw-grey-600);
  --border-accent: var(--lw-red-500);

  --focus-ring: rgba(243, 117, 113, 0.45);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-raised:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 6px 14px -2px rgba(0, 0, 0, 0.55),
    0 14px 32px -10px rgba(0, 0, 0, 0.45);
  --shadow-raised-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 10px 20px -2px rgba(0, 0, 0, 0.60),
    0 20px 40px -12px rgba(0, 0, 0, 0.50);
  --shadow-raised-brand:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(106, 12, 12, 0.40),
    0 8px 18px -3px rgba(212, 58, 54, 0.45),
    0 14px 32px -10px rgba(0, 0, 0, 0.55);
  --shadow-raised-steady:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    0 8px 18px -3px rgba(0, 0, 0, 0.60),
    0 14px 32px -10px rgba(0, 0, 0, 0.55);

  /* Pattern tokens that don't auto-derive from bg/text */
  --footer-watermark-color: rgba(255, 255, 255, 0.05);
  --cta-block-default-ornament: rgba(255, 255, 255, 0.10);
  /* Steady CTA needs to be distinct from the dark surface; lighten it. */
  --cta-steady-bg: var(--lw-blue-500);
  --cta-steady-bg-hover: var(--lw-blue-400);
  --cta-steady-bg-active: var(--lw-blue-600);
  /* CTA Block surfaces re-tuned for dark: page bg is already navy, so default
     and steady must lift visibly off the canvas — otherwise they vanish. */
  --cta-block-bg-default: var(--lw-blue-600);
  --cta-block-bg-steady:  var(--lw-blue-500);

  /* Hero gradients — re-target to dark surfaces */
  --gradient-warm:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(240, 79, 75, 0.25) 0%, rgba(240, 79, 75, 0) 70%),
    var(--lw-blue-800);
  --gradient-coral:
    linear-gradient(180deg, var(--lw-blue-800) 0%, rgba(240, 79, 75, 0.35) 100%);
  --gradient-stone:
    radial-gradient(ellipse 70% 70% at 90% 0%, var(--lw-blue-600) 0%, var(--lw-blue-800) 70%);
  --motif-line-tone: rgba(243, 117, 113, 0.30);
  --motif-line-tone-stone: rgba(255, 255, 255, 0.12);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}