/* ============================================================================
   adberg · brand system v2.0
   tokens.css — single source of truth (portado al child theme de WordPress)
   ----------------------------------------------------------------------------
   Premium AI-visibility studio. Obsidian + violet + cyan signal accent.
   All tokens are exposed as CSS custom properties on :root. Override with
   [data-theme="…"] or [data-surface="…"] selectors.

   © adberg · alex@adberg.agency
   ============================================================================ */

:root {
  /* ── Palette · raw ──────────────────────────────────────────────────────── */

  /* Obsidian — main dark surfaces */
  --obsidian-950: #08070D;
  --obsidian-900: #11101A;

  /* Graphite — elevated dark surfaces, borders */
  --graphite-850: #181622;
  --graphite-800: #1E1B2A;
  --graphite-750: #242130;
  --graphite-700: #2C2939;

  /* Violet — brand signal */
  --violet-700:   #4933B8;
  --violet-600:   #6648E8;
  --violet-500:   #7C5CFF;  /* primary brand */
  --violet-400:   #9B83FF;  /* hover */
  --violet-300:   #B7A4FF;

  --lavender-200: #D8D0FF;
  --mist-100:     #F4F1FF;
  --mist-050:     #FAF8FF;

  /* Editorial surfaces */
  --ivory-100:    #F7F3EA;
  --ivory-200:    #EDE7D6;
  --bone-300:     #DDD4BD;
  --paper:        #FFFFFF;

  /* Signal — data / status. Used sparingly. */
  --signal-cyan:  #77E0C6;
  --signal-amber: #F4C77B;
  --signal-coral: #FF8B7E;

  /* Archive — v1 reference only. Never as a dominant v2 color. */
  --legacy-crimson: #A00D3A;

  /* ── Semantic mappings · dark (default) ─────────────────────────────────── */

  --bg:           var(--obsidian-950);
  --bg-sunken:    var(--obsidian-900);
  --bg-elevated:  var(--graphite-850);
  --bg-overlay:   rgba(8, 7, 13, 0.78);

  --fg:           var(--mist-100);
  --fg-muted:     rgba(244, 241, 255, 0.62);
  --fg-faint:     rgba(244, 241, 255, 0.38);
  --fg-on-brand:  #FFFFFF;

  --border:        rgba(216, 208, 255, 0.10);
  --border-strong: rgba(216, 208, 255, 0.18);
  --divider:       rgba(216, 208, 255, 0.06);

  --brand:        var(--violet-500);
  --brand-hover:  var(--violet-400);
  --brand-press:  var(--violet-600);
  --brand-soft:   rgba(124, 92, 255, 0.12);
  --brand-on-soft: var(--violet-300);

  --success: var(--signal-cyan);
  --warning: var(--signal-amber);
  --danger:  var(--signal-coral);

  --focus-ring: 0 0 0 2px var(--obsidian-950), 0 0 0 4px var(--violet-400);

  /* ── Typography ─────────────────────────────────────────────────────────── */

  --font-display: "Inter Tight", "Instrument Serif", system-ui, sans-serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-editorial: "Instrument Serif", Georgia, serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Scale — clamp for responsive */
  --fs-display-xl: clamp(56px, 8vw, 108px);
  --fs-display-lg: clamp(44px, 6vw, 76px);
  --fs-h1:         clamp(34px, 4vw, 52px);
  --fs-h2:         clamp(28px, 3vw, 40px);
  --fs-h3:         clamp(22px, 2.2vw, 28px);
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  /* Line height */
  --lh-tight:   1.04;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-display: -0.025em;
  --ls-tight:   -0.012em;
  --ls-normal:   0;
  --ls-eyebrow:  0.18em;

  /* ── Spacing (4 px base) ────────────────────────────────────────────────── */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radii ──────────────────────────────────────────────────────────────── */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */

  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm:     0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-md:     0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg:     0 24px 80px rgba(0, 0, 0, 0.32);
  --shadow-soft:   0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-violet: 0 0 40px rgba(124, 92, 255, 0.28);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ── Motion ─────────────────────────────────────────────────────────────── */

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-hero: 700ms;

  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ─────────────────────────────────────────────────────────────── */

  --container-max:   1280px;
  --container-text:   720px;
  --gutter:           32px;
  --section-y:      120px;

  /* ── Z-index ────────────────────────────────────────────────────────────── */

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    700;
}


/* ── Surface · editorial (ivory) ──────────────────────────────────────────── */

[data-surface="editorial"] {
  --bg:           var(--ivory-100);
  --bg-sunken:    var(--ivory-200);
  --bg-elevated:  #FFFFFF;
  --bg-overlay:   rgba(247, 243, 234, 0.88);

  --fg:           #11101A;
  --fg-muted:     rgba(17, 16, 26, 0.62);
  --fg-faint:     rgba(17, 16, 26, 0.40);
  --fg-on-brand:  #FFFFFF;

  --border:        rgba(17, 16, 26, 0.10);
  --border-strong: rgba(17, 16, 26, 0.18);
  --divider:       rgba(17, 16, 26, 0.06);

  --brand-soft:    rgba(124, 92, 255, 0.10);
  --brand-on-soft: var(--violet-700);

  --shadow-xs: 0 1px 2px rgba(17, 16, 26, 0.06);
  --shadow-sm: 0 4px 14px rgba(17, 16, 26, 0.08);
  --shadow-md: 0 12px 40px rgba(17, 16, 26, 0.10);
  --shadow-lg: 0 24px 80px rgba(17, 16, 26, 0.12);
}


/* ── Mobile section padding ───────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root {
    --section-y: 80px;
    --gutter:    20px;
  }
}


/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-hero: 0ms;
  }
}