/*
 * RootUIP umbrella design tokens — replicated on /creatives/ so this page
 * reads as the same brand as rootuip.com/. Source of truth is
 * /var/www/rootuip-root/landing.jsx (PALETTES.indigo + SURFACES.dark).
 *
 * Names use the --um-* prefix ("umbrella") so this file is additive: no
 * collision with the existing inline :root in /creatives/index.html. The
 * dark restyle phases (2C onwards) consume these directly via var(--um-*).
 *
 * Active configuration mirrored from index.html:207:
 *     palette="indigo"   mode="dark"
 */

:root {
  /* ===== Page surface ====================================================== */
  --um-surface:    #0a0d12;             /* page background */
  --um-surface-2:  #11151c;             /* panel surface */
  --um-surface-3:  #181d26;             /* deeper subtle surface */

  /* ===== Text =============================================================== */
  --um-text:       #f0f3f8;             /* primary body text */
  --um-text-dim:   rgba(240, 243, 248, 0.74);   /* italic accent, lede */
  --um-text-muted: #7a8595;             /* secondary / muted text */

  /* ===== Accents — indigo primary, cyan secondary ========================== */
  --um-accent:        #6366f1;          /* primary indigo — CTAs, logo dot, wordmark, links */
  --um-accent-bright: #8b8dff;          /* hover */
  --um-accent-soft:   rgba(99, 102, 241, 0.14);  /* selection bg, eyebrow bg, bloom A */
  --um-accent-line:   rgba(99, 102, 241, 0.34);  /* border on accent surfaces */
  --um-accent-glow:   rgba(99, 102, 241, 0.50);  /* dot pulse, button glow */

  --um-secondary:      #22d3ee;         /* cyan, bloom B */
  --um-secondary-soft: rgba(34, 211, 238, 0.14); /* cyan soft, bloom B fill */

  /* ===== Borders ============================================================ */
  --um-border:        rgba(255, 255, 255, 0.08);  /* default 1px border */
  --um-border-strong: rgba(255, 255, 255, 0.14);  /* nav, hover state */

  /* ===== Glass / card surfaces ============================================= */
  --um-card-bg:    rgba(20, 22, 28, 0.60);  /* card fill */
  --um-glass-bg:   rgba(20, 22, 28, 0.55);  /* slightly more transparent variant */
  --um-nav-bg:     rgba(14, 16, 22, 0.78);  /* navbar pill fill */

  --um-card-radius: 22px;
  --um-card-pad:    36px 32px 32px;
  --um-card-blur:   blur(14px);
  --um-nav-blur:    blur(20px) saturate(140%);

  --um-shadow-glass:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.60);

  /* ===== Typography ========================================================= */
  --um-font-display: 'Fraunces', Georgia, serif;
  --um-font-body:    'Inter', system-ui, sans-serif;
  --um-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Hero h1 sizing (fluid clamp) */
  --um-hero-size:    clamp(48px, 5.6vw, 84px);
  --um-hero-leading: 0.98;
  --um-hero-tracking: -0.025em;

  /* Hero lede */
  --um-lede-size:    18px;
  --um-lede-leading: 1.55;
  --um-lede-max:     540px;

  /* ===== Layout rhythm ====================================================== */
  --um-section-pad: 110px 48px;        /* vertical / horizontal section padding */
  --um-section-max: 1280px;            /* container width */

  /* ===== Hero radial bloom (drop into a positioned ::before / overlay) ===== */
  --um-bloom-a:
    radial-gradient(ellipse 70vw 50vh at 18% 20%,
                    var(--um-accent-soft), transparent 60%);
  --um-bloom-b:
    radial-gradient(ellipse 55vw 40vh at 85% 70%,
                    var(--um-secondary-soft), transparent 60%);
  --um-bloom-filter: blur(40px);

  /* ===== Eyebrow pill (for "FOR CIVIL LAW FIRMS") ========================== */
  --um-eyebrow-font:    var(--um-font-mono);
  --um-eyebrow-size:    11px;
  --um-eyebrow-tracking: 0.22em;

  /* ============================================================================
     Aliases matching the umbrella's internal naming (landing.jsx PaletteCSS).
     Restyle phases that lift CSS from the umbrella reference these names
     directly — keeping aliases means a paste-from-umbrella patch just works.
     ============================================================================ */
  --um-bg:         var(--um-surface);
  --um-bg2:        var(--um-surface-2);
  --um-bg3:        var(--um-surface-3);
  --um-ink:        var(--um-text);
  --um-ink-dim:    var(--um-text-dim);
  --um-ink-muted:  var(--um-text-muted);
  --um-p:          var(--um-accent);
  --um-pb:         var(--um-accent-bright);
  --um-ps:         var(--um-accent-soft);
  --um-pl:         var(--um-accent-line);
  --um-pg:         var(--um-accent-glow);
  --um-sec:        var(--um-secondary);
  --um-secs:       var(--um-secondary-soft);
  --um-line:       var(--um-border);
  --um-line2:      var(--um-border-strong);
}