/* =============================================================
   assets/css/variables.css
   AdNeutral — Design System Token File
   All CSS custom properties for the entire site live here.
   Import this file first before any other stylesheet.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   ROOT TOKENS — Dark Mode (default)
   ───────────────────────────────────────────────────────────── */

:root {

  /* ── Brand primary: Cyan (var(--color-accent)) × Void Black ───────────── */
  --color-bg:             #070608;
  --color-surface:        #161214;
  --color-surface-2:      #1E1A1C;
  --color-surface2:       var(--color-surface-2);

  --color-brand:          var(--color-accent);
  --color-brand-hover:    var(--color-accent-hover);
  --color-brand-subtle:   var(--color-accent-light);
  --color-brand-border:   color-mix(in srgb, var(--color-accent) 25%, transparent);

  --color-success:        #20C4AF;
  --color-success-subtle: rgba(32, 196, 175, 0.10);
  --color-success-border: rgba(32, 196, 175, 0.22);

  --color-text-primary:   #F5F3F0;
  --color-text-secondary: rgba(245, 243, 240, 0.55);
  --color-text-muted:     rgba(245, 243, 240, 0.30);
  --color-text:           var(--color-text-primary);
  --color-text-faint:     var(--color-text-muted);

  --color-border:         #352E33;
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-hover:   rgba(255, 255, 255, 0.3);

  --color-input-bg:        #1E1A1C;
  --color-input-border:    #352E33;
  --color-input-focus:     var(--color-accent);
  --color-input-text:      #F5F3F0;
  --color-input-placeholder: rgba(245, 243, 240, 0.30);

  --color-danger:         #DC2626;
  --color-danger-subtle:  rgba(220, 38, 38, 0.10);

  /* ── Legacy aliases (components / layout) ─────────────────── */
  --bg-primary:           var(--color-bg);
  --bg-secondary:         var(--color-surface);
  --bg-tertiary:          var(--color-surface-2);
  --bg-hover:             #221E21;

  --accent:               var(--color-accent);
  --accent-hover:         var(--color-accent-hover);
  --accent-muted:         var(--color-accent-light);
  --accent-glow:          color-mix(in srgb, var(--color-accent) 12%, transparent);
  --accent-glow-strong:   color-mix(in srgb, var(--color-accent) 22%, transparent);

  --text-primary:         var(--color-text-primary);
  --text-secondary:       var(--color-text-secondary);
  --text-muted:           var(--color-text-muted);
  --text-inverse:         #070608;

  --border:               var(--color-border);
  --border-subtle:        var(--color-border-subtle);
  --border-accent:        color-mix(in srgb, var(--color-accent) 30%, transparent);

  --success:              var(--color-success);
  --success-bg:           var(--color-success-subtle);

  --warning:              #F59E0B;
  --warning-bg:           rgba(245, 158, 11, 0.10);

  --error:                var(--color-danger);
  --error-bg:             var(--color-danger-subtle);

  --info:                 #3B82F6;
  --info-bg:              rgba(59, 130, 246, 0.10);

  --problem-tint:         rgba(239, 68, 68, 0.06);
  --solution-tint:        var(--color-accent-light);

  /* ── Typography: Font Families ───────────────────────────── */
  --font-display:       'Inter', sans-serif; /* Hero + section headings */
  --font-body:          'Inter', sans-serif; /* All body copy */
  --font-mono:          'Inter', sans-serif; /* Labels, badges, code */

  /* ── Typography: Font Sizes ───────────────────────────────── */
  --text-xs:            0.75rem;    /* 12px — labels, badges, fine print */
  --text-sm:            0.875rem;   /* 14px — small/meta text, captions */
  --text-base:          1rem;       /* 16px — default body copy */
  --text-lg:            1.125rem;   /* 18px — body large / lead text */
  --text-xl:            1.5rem;     /* 24px — H3 card titles */
  --text-2xl:           2.25rem;    /* 36px — H2 section titles */
  --text-3xl:           3rem;       /* 48px — H1 page titles */
  --text-4xl:           4.5rem;     /* 72px — Display / hero headline */

  /* ── Typography: Line Heights ─────────────────────────────── */
  --leading-none:       1;
  --leading-tight:      1.1;    /* Display headlines */
  --leading-snug:       1.15;   /* H1 titles */
  --leading-normal:     1.25;   /* H2 section titles */
  --leading-relaxed:    1.35;   /* H3 card titles */
  --leading-loose:      1.6;    /* Body copy */
  --leading-prose:      1.7;    /* Body large / article body */

  /* ── Typography: Letter Spacing ───────────────────────────── */
  --tracking-tight:     -0.125em;  /* -2px at 16px — display headlines */
  --tracking-snug:      -0.0625em; /* -1px at 16px — H1 titles */
  --tracking-normal:    0;
  --tracking-wide:      0.05em;    /* General spaced text */
  --tracking-wider:     0.08em;    /* Labels, badges (mono font) */
  --tracking-widest:    0.15em;    /* All-caps small labels */

  /* ── Typography: Font Weights ─────────────────────────────── */
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* ── Spacing (8px base grid) ──────────────────────────────── */
  --space-1:            0.5rem;    /*  8px */
  --space-2:            1rem;      /* 16px */
  --space-3:            1.5rem;    /* 24px */
  --space-4:            2rem;      /* 32px */
  --space-5:            2.5rem;    /* 40px */
  --space-6:            3rem;      /* 48px */
  --space-8:            4rem;      /* 64px */
  --space-10:           5rem;      /* 80px */
  --space-12:           6rem;      /* 96px */
  --space-16:           8rem;      /* 128px */

  /* ── Layout ───────────────────────────────────────────────── */
  --content-width:      1120px;  /* Max page content width */
  --content-narrow:     680px;   /* Article body max width (prose) */
  --content-wide:       1440px;  /* Full-bleed section max width */
  --nav-height:         64px;    /* Fixed navigation height */
  --sidebar-width:      240px;   /* Admin sidebar width */
  --article-aside:      30%;     /* Article sidebar column */
  --article-main:       70%;     /* Article main column */

  /* ── Border Radius ────────────────────────────────────────── */
  --radius-sm:          6px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-2xl:         24px;
  --radius-full:        9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 24px 64px rgba(0, 0, 0, 0.8);
  --shadow-glow:        0 0 24px color-mix(in srgb, var(--color-accent) 8%, transparent);
  --shadow-glow-strong: 0 0 40px color-mix(in srgb, var(--color-accent) 12%, transparent);
  --shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    500ms ease;
  --transition-spring:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index Scale ────────────────────────────────────────── */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-toast:            500;

  /* ── Component Dimensions ─────────────────────────────────── */
  --btn-height:         48px;    /* Primary/secondary button height */
  --btn-height-sm:      36px;    /* Small button height */
  --input-height:       44px;    /* Form input height */
  --input-height-sm:    36px;    /* Compact input height */

  /* ── Progress Bar ─────────────────────────────────────────── */
  --progress-height:    3px;
  --progress-color:     var(--accent);

  /* ── Grid & Background Patterns ───────────────────────────── */
  --grid-size:          48px;    /* Hero CSS grid overlay cell size */

  /* ── Article Ad Slots ─────────────────────────────────────── */
  --ad-label-color:     var(--text-muted);
  --ad-label-size:      0.625rem; /* 10px */
  --ad-label-tracking:  0.15em;
}


/* ─────────────────────────────────────────────────────────────
   LIGHT MODE OVERRIDES
   Activated by: <html data-theme="light">
   Toggled via JS on document.documentElement
   Persisted in: localStorage key 'adneutral-theme' (see main.js)
   ───────────────────────────────────────────────────────────── */

[data-theme="light"] {

  --color-bg:              #FAFAF9;
  --color-surface:         #FDF9F7;
  --color-surface-2:       #F3EFED;

  --color-brand:           var(--color-accent);
  --color-brand-hover:     var(--color-accent-hover);
  --color-brand-subtle:    var(--color-accent-light);
  --color-brand-border:    color-mix(in srgb, var(--color-accent) 20%, transparent);

  --color-success:         #0D9488;
  --color-success-subtle:  rgba(13, 148, 136, 0.08);
  --color-success-border:  rgba(13, 148, 136, 0.20);

  --color-text-primary:    #1A1210;
  --color-text-secondary:  rgba(26, 18, 16, 0.60);
  --color-text-muted:      rgba(26, 18, 16, 0.35);
  --color-text:            var(--color-text-primary);
  --color-text-faint:      var(--color-text-muted);

  --color-border:          #E8E0DC;
  --color-border-subtle:   rgba(0, 0, 0, 0.06);
  --color-border-hover:    rgba(0, 0, 0, 0.18);
  --color-surface2:        var(--color-surface-2);

  --color-input-bg:        #FDF9F7;
  --color-input-border:    #D9D0CB;
  --color-input-focus:     var(--color-accent);
  --color-input-text:      #1A1210;
  --color-input-placeholder: rgba(26, 18, 16, 0.35);

  --color-danger:          #DC2626;
  --color-danger-subtle:   rgba(220, 38, 38, 0.08);

  --bg-primary:           var(--color-bg);
  --bg-secondary:         var(--color-surface);
  --bg-tertiary:          var(--color-surface-2);
  --bg-hover:             #EDEAE7;

  --accent:               var(--color-accent);
  --accent-hover:         var(--color-accent-hover);
  --accent-muted:         var(--color-accent-light);
  --accent-glow:          color-mix(in srgb, var(--color-accent) 12%, transparent);
  --border-accent:        color-mix(in srgb, var(--color-accent) 30%, transparent);

  --text-primary:         var(--color-text-primary);
  --text-secondary:       var(--color-text-secondary);
  --text-muted:           var(--color-text-muted);
  --text-inverse:         #070608;

  --border:               var(--color-border);
  --border-subtle:        var(--color-border-subtle);

  --success:              var(--color-success);
  --success-bg:           var(--color-success-subtle);

  --error:                var(--color-danger);
  --error-bg:             var(--color-danger-subtle);

  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:            0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-glow:          0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
  --shadow-inset:         inset 0 1px 0 rgba(0, 0, 0, 0.04);

  --problem-tint:         rgba(239, 68, 68, 0.04);
  --solution-tint:        var(--color-accent-light);
}


/* System preference when user has not forced dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:              #FAFAF9;
    --color-surface:         #FDF9F7;
    --color-surface-2:       #F3EFED;
    --color-brand:           var(--color-accent);
    --color-brand-hover:     var(--color-accent-hover);
    --color-brand-subtle:    var(--color-accent-light);
    --color-brand-border:    color-mix(in srgb, var(--color-accent) 20%, transparent);
    --color-success:         #0D9488;
    --color-success-subtle:  rgba(13, 148, 136, 0.08);
    --color-success-border:  rgba(13, 148, 136, 0.20);
    --color-text-primary:    #1A1210;
    --color-text-secondary:  rgba(26, 18, 16, 0.60);
    --color-text-muted:      rgba(26, 18, 16, 0.35);
    --color-text:            var(--color-text-primary);
    --color-text-faint:      var(--color-text-muted);
    --color-border:          #E8E0DC;
    --color-border-subtle:   rgba(0, 0, 0, 0.06);
    --color-border-hover:    rgba(0, 0, 0, 0.18);
    --color-surface2:        var(--color-surface-2);
    --color-input-bg:        #FDF9F7;
    --color-input-border:    #D9D0CB;
    --color-input-focus:     var(--color-accent);
    --color-input-text:      #1A1210;
    --color-input-placeholder: rgba(26, 18, 16, 0.35);
    --color-danger:          #DC2626;
    --color-danger-subtle:   rgba(220, 38, 38, 0.08);
    --bg-primary:           var(--color-bg);
    --bg-secondary:         var(--color-surface);
    --bg-tertiary:          var(--color-surface-2);
    --bg-hover:             #EDEAE7;
    --accent:               var(--color-accent);
    --accent-hover:         var(--color-accent-hover);
    --accent-muted:         var(--color-accent-light);
    --accent-glow:          color-mix(in srgb, var(--color-accent) 12%, transparent);
    --border-accent:        color-mix(in srgb, var(--color-accent) 30%, transparent);
    --text-primary:         var(--color-text-primary);
    --text-secondary:       var(--color-text-secondary);
    --text-muted:           var(--color-text-muted);
    --text-inverse:         #070608;
    --border:               var(--color-border);
    --border-subtle:        var(--color-border-subtle);
    --success:              var(--color-success);
    --success-bg:           var(--color-success-subtle);
    --error:                var(--color-danger);
    --error-bg:             var(--color-danger-subtle);
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl:            0 24px 64px rgba(0, 0, 0, 0.16);
    --shadow-glow:          0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
    --shadow-inset:         inset 0 1px 0 rgba(0, 0, 0, 0.04);
    --problem-tint:         rgba(239, 68, 68, 0.04);
    --solution-tint:        var(--color-accent-light);
  }
}


/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
   Respects user's OS-level preference.
   All animation durations are collapsed to near-zero.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:  1ms linear;
    --transition-base:  1ms linear;
    --transition-slow:  1ms linear;
  }
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE TYPE SCALE
   Scales font sizes fluidly on smaller viewports.
   Applied only at breakpoints where reduction is intentional.
   ───────────────────────────────────────────────────────────── */

/* Tablet (max 1023px) — scale down display and H1 */
@media (max-width: 1023px) {
  :root {
    --text-4xl:  3.25rem;   /* 52px — was 72px */
    --text-3xl:  2.25rem;   /* 36px — was 48px */
    --text-2xl:  1.875rem;  /* 30px — was 36px */
  }
}

/* Mobile (max 767px) — scale down further */
@media (max-width: 767px) {
  :root {
    --text-4xl:  2.25rem;   /* 36px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-xl:   1.25rem;   /* 20px */
    --space-16:  6rem;      /* 96px — reduce large section gaps on mobile */
    --space-12:  4rem;      /* 64px */
    --space-10:  3rem;      /* 48px */
  }
}


/* ─────────────────────────────────────────────────────────────
   LUCIDE / SVG ICONS — avoid stroke clipping; size via em
   ───────────────────────────────────────────────────────────── */

svg.lucide,
svg[data-lucide] {
  overflow: visible;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

svg.lucide {
  width: 1em !important;
  height: 1em !important;
  max-width: none;
  max-height: none;
  box-sizing: content-box;
}