/* ============================================================================
   tokens.css — Web3 Profile v2 design tokens.
   Two base presets (dark default + light), COMPACT scale. Card/surface palette
   keyed by [data-theme]; text-on-page-background keyed by [data-bg] (computed
   from the actual background luminance by apply.js -> never glares/invisible).
   ============================================================================ */

:root,
:root[data-theme="default"],
:root[data-theme="dark"] {
  --profile-bg:             #0a0b14;
  --profile-bg-2:           #0e1020;
  --profile-surface:        #161823;
  --profile-surface-2:      #11121b;
  --profile-surface-hover:  #1d2030;
  --profile-fg:             #f4f6fb;
  --profile-muted:          #a3acc0;
  --profile-border:         #272a3a;
  --profile-hairline:       rgba(255, 255, 255, 0.06);

  --profile-accent:         #34bdf2;
  --profile-accent-strong:  #34bdf2;
  --profile-accent-ink:     #7ad4f7;
  --profile-accent-text:    #04141e;
  --profile-accent-tint:    #102634;
  --profile-accent-2:       #7c5cff;
  --profile-accent-glow:    rgba(52, 189, 242, 0.40);

  --profile-success:        #3ddc97;
  --profile-danger:         #ff7a85;
  --profile-on-cover:       #ffffff;

  /* softer card shadows + a faint highlight ring for depth on dark surfaces */
  --profile-shadow-card:        0 12px 30px -10px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.03);
  --profile-shadow-card-hover:  0 20px 40px -12px rgba(0, 0, 0, 0.68), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  --profile-shadow-pop:         0 30px 60px -15px rgba(0, 0, 0, 0.78);

  /* default page-bg matches the dark theme */
  --profile-page-bg:        radial-gradient(58% 42% at 50% -8%, color-mix(in srgb, var(--profile-accent) 24%, transparent) 0%, transparent 60%),
                            radial-gradient(42% 38% at 88% 12%, color-mix(in srgb, var(--profile-accent-2) 18%, transparent) 0%, transparent 55%),
                            radial-gradient(70% 50% at 50% 120%, var(--profile-bg-2) 0%, transparent 70%),
                            var(--profile-bg);
}

/* ---- LIGHT preset (cards/surfaces) ------------------------------------- */
:root[data-theme="light"] {
  --profile-bg:             #f3f5fa;
  --profile-bg-2:           #e7ecf4;
  --profile-surface:        #ffffff;
  --profile-surface-2:      #f3f5f9;
  --profile-surface-hover:  #eceff5;
  --profile-fg:             #0f1722;
  --profile-muted:          #586273;
  --profile-border:         #e2e7ef;
  --profile-hairline:       rgba(0, 0, 0, 0.05);

  --profile-accent:         #0e7aa8;
  --profile-accent-strong:  #0e7aa8;
  --profile-accent-ink:     #0b6c95;
  --profile-accent-text:    #ffffff;
  --profile-accent-tint:    #e6f4fb;
  --profile-accent-2:       #6b50e0;
  --profile-accent-glow:    rgba(14, 122, 168, 0.28);

  --profile-success:        #15794c;
  --profile-danger:         #c2342f;
  --profile-on-cover:       #ffffff;

  /* light theme: ultra-soft, wide blue-grey shadows (not hard black smudges) */
  --profile-shadow-card:        0 10px 30px -10px rgba(15, 23, 34, 0.08), 0 1px 4px rgba(15, 23, 34, 0.03);
  --profile-shadow-card-hover:  0 16px 40px -12px rgba(15, 23, 34, 0.12), 0 2px 8px rgba(15, 23, 34, 0.04);
  --profile-shadow-pop:         0 24px 50px -12px rgba(15, 23, 34, 0.16);

  --profile-page-bg:        radial-gradient(60% 45% at 50% -10%, color-mix(in srgb, var(--profile-accent) 14%, transparent) 0%, transparent 60%),
                            var(--profile-bg);
}

/* ---- text placed directly ON the page background (identity, footer) ----
   apply.js sets data-bg from the real background luminance, so this stays
   readable on custom light/dark/image backgrounds. -------------------------*/
:root,
:root[data-bg="dark"] {
  --profile-on-bg:       #ffffff;
  --profile-on-bg-muted: rgba(255, 255, 255, 0.74);
  /* no blurry text-shadow halo (audit) — readability comes from the bg scrim */
  --profile-on-bg-shadow: none;
}
:root[data-bg="light"] {
  --profile-on-bg:       #0f1722;
  --profile-on-bg-muted: rgba(15, 23, 34, 0.64);
  --profile-on-bg-shadow: none;
}

/* shared (theme-agnostic) tokens ----------------------------------------- */
:root {
  --profile-font:
    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  /* one family, multiple weights — hierarchy comes from weight + size contrast,
     not a competing display face (keeps headers consistent with body). */
  --profile-font-heading: var(--profile-font);
  --profile-font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --profile-fs-display:  clamp(1.6rem, 5.2vw, 2rem);
  --profile-fs-title:    1rem;
  --profile-fs-body:     0.9375rem;
  --profile-fs-sm:       0.8125rem;
  --profile-fs-xs:       0.6875rem;

  --profile-lh-tight:    1.14;
  --profile-lh-body:     1.55;

  --profile-fw-regular:  400;  --profile-fw-medium: 450;  --profile-fw-semibold: 500;
  --profile-fw-bold:     600;  --profile-fw-black: 700;
  --profile-track-tight: -0.015em;

  --profile-space-1: 4px;  --profile-space-2: 8px;  --profile-space-3: 12px;
  --profile-space-4: 16px; --profile-space-5: 20px; --profile-space-6: 24px;
  --profile-space-8: 32px; --profile-space-10: 40px; --profile-space-12: 56px;

  --profile-block-radius:   18px;
  --profile-block-padding:  16px;
  --profile-radius-pill:    999px;
  --profile-radius-sm:      12px;
  --profile-block-gap:      10px;
  --profile-page-maxw:      560px;
  --profile-page-pad:       18px;

  /* --profile-shadow-* are defined per-theme above (dark vs light) so they never
     look like hard black smudges on light cards. */
  --profile-glow:               0 0 0 1px var(--profile-accent-glow), 0 8px 36px -10px var(--profile-accent-glow);

  --profile-focus-width:  2px;
  --profile-focus-offset: 2px;
  --profile-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --profile-dur-fast:    140ms;
  --profile-dur-base:    240ms;
  --profile-dur-slow:    560ms;
  --profile-touch-min:   44px;
  --profile-bg-blur:     0px;
}

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