/**
 * Profile vibe themes (themes.4).
 *
 * A vibe is a full theme the profile OWNER picks. It is scoped to the profile content
 * area (#page-profile); the shell (top bar, nav, tab bar) always follows the VIEWER's
 * site theme. Each vibe is self-contained: it declares every token any site theme varies,
 * so it renders identically under Classic, Street, Concrete, Heat and After Hours.
 * "Match site theme" (stored id classic-block) has no block on purpose.
 *
 * Structure: one shared light base (Classic values) for the light vibes, one dark base
 * for Night Wire, then a per-vibe identity block. Studio swatches share the same blocks
 * so the picker always shows the real palette.
 *
 * Gate: scripts/check-theme-contracts.mjs (roles, contrast pairs, self-containment)
 * and scripts/test/profile-vibe-contrast.test.mjs (rendered isolation + contrast).
 * Rule: tokens only here. Component styling stays in page CSS and reads these tokens.
 */

/* ── Light base (Classic values) ───────────────────────────────────────────── */
#page-profile[data-uc-profile-vibe="flyer-stack"],
#page-profile[data-uc-profile-vibe="clean-cut"],
#page-profile[data-uc-profile-vibe="pink-porch"],
#page-profile[data-uc-profile-vibe="baby-blue"],
#page-profile[data-uc-profile-vibe="park-green"],
#page-profile[data-uc-profile-vibe="sunset-orange"],
#page-profile[data-uc-profile-vibe="sun-yellow"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="flyer-stack"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="clean-cut"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="pink-porch"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="baby-blue"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="park-green"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sunset-orange"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sun-yellow"] {
  --uc-surface: #ffffff;
  --uc-surface-soft: #f8f8f8;
  --uc-surface-muted: #f3f4f6;
  --uc-surface-raised: #ffffff;
  --uc-surface-sunken: #f3f4f6;
  --uc-surface-input: #ffffff;
  --uc-text: #111827;
  --uc-text-secondary: #4b5563;
  --uc-text-muted: #6b7280;
  --uc-text-inverse: #ffffff;
  --uc-text-on-primary: #ffffff;
  --uc-text-on-media: #f8fafc;
  --uc-text-on-gold: #111111;
  --uc-border: #e5e7eb;
  --uc-border-strong: #111111;
  --uc-divider: #e5e7eb;

  --uc-primary: #b22222;
  --uc-primary-dark: #8b0000;
  --uc-primary-darker: #7f1d1d;
  --uc-primary-ink: #7f1d1d;
  --urban-red: #b22222;
  --urban-dark-red: #8b0000;
  --urban-bg-red: #700104;
  --uc-gold: #facc15;
  --uc-gold-dim: #d4a017;
  --uc-focus-ring: #b22222;
  --uc-primary-wash: rgba(178, 34, 34, 0.08);
  --uc-primary-wash-strong: rgba(178, 34, 34, 0.2);
  --uc-accent-wash: rgba(250, 204, 21, 0.2);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.4);

  --uc-dna-header-red: #b22222;
  --uc-dna-card-surface: #ffffff;
  --uc-dna-card-surface-soft: #f8f8f8;
  --uc-dna-border-strong: #111111;
  --uc-dna-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.32);
  --uc-dna-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.2);
  --uc-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.32);
  --uc-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.2);
  --uc-shadow-ink-weak: rgba(0, 0, 0, 0.06);
  --uc-shadow-ink-soft: rgba(0, 0, 0, 0.12);
  --uc-shadow-ink-strong: rgba(0, 0, 0, 0.25);
  /* Card elevation: the DNA hard shadow plus the gold ring (same as .uc-card-trippy). */
  --uc-card-elevation: 6px 6px 0 rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 223, 0, 0.22);

  --uc-danger: #ef4444;
  --uc-danger-surface: #fef2f2;
  --uc-danger-border: #fecaca;
  --uc-danger-text: #991b1b;
  --uc-success: #22c55e;
  --uc-success-surface: #ecfdf5;
  --uc-success-border: #bbf7d0;
  --uc-success-text: #166534;
  --uc-warning: #f59e0b;
  --uc-warning-surface: #fffbeb;
  --uc-warning-border: #fde68a;
  --uc-warning-text: #92400e;
  --uc-info: #3b82f6;
  --uc-info-surface: #eff6ff;
  --uc-info-border: #bfdbfe;
  --uc-info-text: #1d4ed8;

  --uc-scrim: rgba(0, 0, 0, 0.35);
  --uc-scrim-weak: rgba(0, 0, 0, 0.08);
  --uc-scrim-soft: rgba(0, 0, 0, 0.18);
  --uc-scrim-strong: rgba(0, 0, 0, 0.55);
  --uc-wash-weak: rgba(15, 23, 42, 0.06);
  --uc-wash-soft: rgba(15, 23, 42, 0.1);
  --uc-wash-strong: rgba(15, 23, 42, 0.18);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-state-hover: rgba(17, 24, 39, 0.04);
  --uc-state-active: rgba(17, 24, 39, 0.08);
  --uc-state-disabled: #9ca3af;
  --uc-chrome: #111827;
  --uc-chrome-text: #f9fafb;

  --uc-chat-tone-sat: 70%;
  --uc-chat-tone-text-l: 30%;
  --uc-chat-tone-bg-l: 95%;
  --uc-chat-tone-border-l: 84%;
  --uc-chat-tone-accent-l: 60%;

  --uc-slate-50: #f8fafc;
  --uc-slate-100: #f1f5f9;
  --uc-slate-200: #e2e8f0;
  --uc-slate-300: #cbd5e1;
  --uc-slate-400: #94a3b8;
  --uc-slate-500: #64748b;
  --uc-slate-600: #475569;
  --uc-slate-700: #334155;
  --uc-slate-800: #1e293b;
  --uc-slate-900: #0f172a;
  --uc-gray-50: #f9fafb;
  --uc-gray-100: #f3f4f6;
  --uc-gray-200: #e5e7eb;
  --uc-gray-300: #d1d5db;
  --uc-gray-400: #9ca3af;
  --uc-gray-500: #6b7280;
  --uc-gray-600: #4b5563;
  --uc-gray-700: #374151;
  --uc-gray-800: #1f2937;
  --uc-gray-900: #111827;

  --uc-profile-wash: transparent;
}

/* ── Night Wire (dark; crimson brand, owner decision 2026-09-30) ───────────── */
#page-profile[data-uc-profile-vibe="night-wire"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="night-wire"] {
  --uc-surface: #140808;
  --uc-surface-soft: #1b1010;
  --uc-surface-muted: #211313;
  --uc-surface-raised: #1b1010;
  --uc-surface-sunken: #0d0606;
  --uc-surface-input: #241719;
  --uc-text: #f8fafc;
  --uc-text-secondary: #e2e8f0;
  --uc-text-muted: #94a3b8;
  --uc-text-inverse: #0a0909;
  --uc-text-on-primary: #ffffff;
  --uc-text-on-media: #f8fafc;
  --uc-text-on-gold: #111111;
  --uc-border: #4a292d;
  --uc-border-strong: #f8fafc;
  --uc-divider: #412126;

  --uc-primary: #e11d48;
  --uc-primary-dark: #be123c;
  --uc-primary-darker: #9f1239;
  --uc-primary-ink: #fecaca;
  --urban-red: #e11d48;
  --urban-dark-red: #be123c;
  --urban-bg-red: #4c0519;
  --uc-gold: #facc15;
  --uc-gold-dim: #d4a017;
  --uc-focus-ring: #facc15;
  --uc-primary-wash: rgba(225, 29, 72, 0.14);
  --uc-primary-wash-strong: rgba(225, 29, 72, 0.3);
  --uc-accent-wash: rgba(250, 204, 21, 0.16);
  --uc-accent-wash-strong: rgba(250, 204, 21, 0.34);

  --uc-dna-header-red: #e11d48;
  --uc-dna-card-surface: #140808;
  --uc-dna-card-surface-soft: #1b1010;
  --uc-dna-border-strong: #f8fafc;
  --uc-dna-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
  --uc-dna-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.35);
  --uc-shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
  --uc-shadow-soft: 3px 3px 0 rgba(0, 0, 0, 0.35);
  --uc-shadow-ink-weak: rgba(0, 0, 0, 0.35);
  --uc-shadow-ink-soft: rgba(0, 0, 0, 0.55);
  --uc-shadow-ink-strong: rgba(0, 0, 0, 0.75);
  /* Card elevation: the DNA hard shadow plus the gold ring (same as .uc-card-trippy). */
  --uc-card-elevation: 6px 6px 0 rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 223, 0, 0.22);

  --uc-danger: #f87171;
  --uc-danger-surface: #1f1214;
  --uc-danger-border: #7f1d1d;
  --uc-danger-text: #fecaca;
  --uc-success: #4ade80;
  --uc-success-surface: #0f2018;
  --uc-success-border: #166534;
  --uc-success-text: #bbf7d0;
  --uc-warning: #fbbf24;
  --uc-warning-surface: #1a160c;
  --uc-warning-border: #92400e;
  --uc-warning-text: #fde68a;
  --uc-info: #60a5fa;
  --uc-info-surface: #0e1a2c;
  --uc-info-border: #1e40af;
  --uc-info-text: #bfdbfe;

  --uc-scrim: rgba(0, 0, 0, 0.7);
  --uc-scrim-weak: rgba(0, 0, 0, 0.3);
  --uc-scrim-soft: rgba(0, 0, 0, 0.5);
  --uc-scrim-strong: rgba(0, 0, 0, 0.85);
  --uc-wash-weak: rgba(248, 250, 252, 0.04);
  --uc-wash-soft: rgba(248, 250, 252, 0.08);
  --uc-wash-strong: rgba(248, 250, 252, 0.14);
  --uc-veil-weak: rgba(255, 255, 255, 0.08);
  --uc-veil-soft: rgba(255, 255, 255, 0.14);
  --uc-veil-strong: rgba(255, 255, 255, 0.22);
  --uc-state-hover: rgba(248, 250, 252, 0.07);
  --uc-state-active: rgba(248, 250, 252, 0.13);
  --uc-state-disabled: #7f8794;
  --uc-chrome: #080808;
  --uc-chrome-text: #f8fafc;

  --uc-chat-tone-sat: 70%;
  --uc-chat-tone-text-l: 76%;
  --uc-chat-tone-bg-l: 18%;
  --uc-chat-tone-border-l: 34%;
  --uc-chat-tone-accent-l: 56%;

  /* Inverted ramps, as in Heat: light ramp values on a dark plate are the defect. */
  --uc-slate-50: #0f172a;
  --uc-slate-100: #1e293b;
  --uc-slate-200: #334155;
  --uc-slate-300: #475569;
  --uc-slate-400: #64748b;
  --uc-slate-500: #94a3b8;
  --uc-slate-600: #cbd5e1;
  --uc-slate-700: #e2e8f0;
  --uc-slate-800: #f1f5f9;
  --uc-slate-900: #f8fafc;
  --uc-gray-50: #111827;
  --uc-gray-100: #1f2937;
  --uc-gray-200: #374151;
  --uc-gray-300: #4b5563;
  --uc-gray-400: #6b7280;
  --uc-gray-500: #9ca3af;
  --uc-gray-600: #d1d5db;
  --uc-gray-700: #e5e7eb;
  --uc-gray-800: #f3f4f6;
  --uc-gray-900: #f9fafb;

  --uc-profile-wash: radial-gradient(ellipse at top, rgba(225, 29, 72, 0.28), transparent 55%);
}

/* ── Flyer Stack (UC red on cream paper, poster stripes) ───────────────────── */
#page-profile[data-uc-profile-vibe="flyer-stack"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="flyer-stack"] {
  --uc-surface: #fff7ed;
  --uc-surface-soft: #fff1df;
  --uc-surface-muted: #fde9d2;
  --uc-surface-raised: #fffaf3;
  --uc-surface-sunken: #fbe7cf;
  --uc-border: #e8d5bd;
  --uc-divider: #ecdcc6;
  --uc-dna-card-surface: #fff7ed;
  --uc-dna-card-surface-soft: #fff1df;
  --uc-profile-wash: repeating-linear-gradient(
    -12deg,
    rgba(178, 34, 34, 0.08),
    rgba(178, 34, 34, 0.08) 12px,
    transparent 12px,
    transparent 24px
  );
}

/* ── Clean Cut (white + slate) ─────────────────────────────────────────────── */
#page-profile[data-uc-profile-vibe="clean-cut"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="clean-cut"] {
  --uc-surface-soft: #f8fafc;
  --uc-surface-muted: #f1f5f9;
  --uc-surface-sunken: #f1f5f9;
  --uc-text: #0f172a;
  --uc-text-secondary: #334155;
  --uc-text-muted: #64748b;
  --uc-border: #cbd5e1;
  --uc-divider: #e2e8f0;
  --uc-primary: #0f172a;
  --uc-primary-dark: #020617;
  --uc-primary-darker: #020617;
  --uc-primary-ink: #0f172a;
  --urban-red: #0f172a;
  --urban-dark-red: #020617;
  --urban-bg-red: #020617;
  --uc-focus-ring: #0f172a;
  --uc-primary-wash: rgba(15, 23, 42, 0.08);
  --uc-primary-wash-strong: rgba(15, 23, 42, 0.2);
  --uc-dna-header-red: #0f172a;
  --uc-dna-card-surface-soft: #f8fafc;
  --uc-profile-wash: linear-gradient(180deg, #f8fafc, transparent 180px);
}

/* ── Pink Porch ────────────────────────────────────────────────────────────── */
#page-profile[data-uc-profile-vibe="pink-porch"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="pink-porch"] {
  --uc-surface: #fff5f9;
  --uc-surface-soft: #ffeef5;
  --uc-surface-muted: #fce7f3;
  --uc-surface-raised: #fffafc;
  --uc-surface-sunken: #fce7f3;
  --uc-border: #f9c6dd;
  --uc-divider: #fbd5e6;
  --uc-primary: #db2777;
  --uc-primary-dark: #be185d;
  --uc-primary-darker: #9d174d;
  --uc-primary-ink: #9d174d;
  --urban-red: #db2777;
  --urban-dark-red: #be185d;
  --urban-bg-red: #831843;
  --uc-focus-ring: #db2777;
  --uc-primary-wash: rgba(219, 39, 119, 0.08);
  --uc-primary-wash-strong: rgba(219, 39, 119, 0.2);
  --uc-dna-header-red: #db2777;
  --uc-dna-card-surface: #fff5f9;
  --uc-dna-card-surface-soft: #ffeef5;
  --uc-profile-wash: linear-gradient(180deg, rgba(236, 72, 153, 0.18), transparent 160px);
}

/* ── Baby Blue (bright sky brand with dark on-brand ink) ───────────────────── */
#page-profile[data-uc-profile-vibe="baby-blue"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="baby-blue"] {
  --uc-surface: #f0f9ff;
  --uc-surface-soft: #e8f5fe;
  --uc-surface-muted: #e0f2fe;
  --uc-surface-raised: #f7fcff;
  --uc-surface-sunken: #e0f2fe;
  --uc-border: #bae6fd;
  --uc-divider: #cdeefe;
  --uc-text-on-primary: #082f49;
  --uc-primary: #38bdf8;
  --uc-primary-dark: #0ea5e9;
  --uc-primary-darker: #0369a1;
  --uc-primary-ink: #075985;
  --urban-red: #38bdf8;
  --urban-dark-red: #0ea5e9;
  --urban-bg-red: #0c4a6e;
  --uc-focus-ring: #0284c7;
  --uc-primary-wash: rgba(56, 189, 248, 0.12);
  --uc-primary-wash-strong: rgba(56, 189, 248, 0.28);
  --uc-dna-header-red: #38bdf8;
  --uc-dna-card-surface: #f0f9ff;
  --uc-dna-card-surface-soft: #e8f5fe;
  --uc-profile-wash: linear-gradient(180deg, rgba(125, 211, 252, 0.28), transparent 160px);
}

/* ── Park Green ────────────────────────────────────────────────────────────── */
#page-profile[data-uc-profile-vibe="park-green"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="park-green"] {
  --uc-surface: #f0fdf4;
  --uc-surface-soft: #e8fbef;
  --uc-surface-muted: #dcfce7;
  --uc-surface-raised: #f7fef9;
  --uc-surface-sunken: #dcfce7;
  --uc-border: #bbf7d0;
  --uc-divider: #ccf5da;
  --uc-primary: #15803d;
  --uc-primary-dark: #166534;
  --uc-primary-darker: #14532d;
  --uc-primary-ink: #14532d;
  --urban-red: #15803d;
  --urban-dark-red: #166534;
  --urban-bg-red: #14532d;
  --uc-focus-ring: #15803d;
  --uc-primary-wash: rgba(21, 128, 61, 0.08);
  --uc-primary-wash-strong: rgba(21, 128, 61, 0.2);
  --uc-dna-header-red: #15803d;
  --uc-dna-card-surface: #f0fdf4;
  --uc-dna-card-surface-soft: #e8fbef;
  --uc-profile-wash: linear-gradient(180deg, rgba(34, 197, 94, 0.16), transparent 160px);
}

/* ── Sunset Orange ─────────────────────────────────────────────────────────── */
#page-profile[data-uc-profile-vibe="sunset-orange"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sunset-orange"] {
  --uc-surface: #fff7ed;
  --uc-surface-soft: #fff1e2;
  --uc-surface-muted: #ffedd5;
  --uc-surface-raised: #fffaf5;
  --uc-surface-sunken: #ffedd5;
  --uc-border: #fed7aa;
  --uc-divider: #fee2c2;
  --uc-primary: #c2410c;
  --uc-primary-dark: #9a3412;
  --uc-primary-darker: #7c2d12;
  --uc-primary-ink: #9a3412;
  --urban-red: #c2410c;
  --urban-dark-red: #9a3412;
  --urban-bg-red: #7c2d12;
  --uc-focus-ring: #c2410c;
  --uc-primary-wash: rgba(194, 65, 12, 0.08);
  --uc-primary-wash-strong: rgba(194, 65, 12, 0.2);
  --uc-dna-header-red: #c2410c;
  --uc-dna-card-surface: #fff7ed;
  --uc-dna-card-surface-soft: #fff1e2;
  --uc-profile-wash: linear-gradient(180deg, rgba(249, 115, 22, 0.18), transparent 160px);
}

/* ── Sun Yellow (bright yellow brand with dark on-brand ink) ───────────────── */
#page-profile[data-uc-profile-vibe="sun-yellow"],
.uc-profile-layout-vibe-card__swatch[data-uc-vibe-swatch="sun-yellow"] {
  --uc-surface: #fefce8;
  --uc-surface-soft: #fef9d7;
  --uc-surface-muted: #fef9c3;
  --uc-surface-raised: #fffef5;
  --uc-surface-sunken: #fef9c3;
  --uc-border: #fde68a;
  --uc-divider: #fdeeb0;
  --uc-text-on-primary: #111111;
  --uc-primary: #eab308;
  --uc-primary-dark: #ca8a04;
  --uc-primary-darker: #a16207;
  --uc-primary-ink: #854d0e;
  --urban-red: #eab308;
  --urban-dark-red: #ca8a04;
  --urban-bg-red: #713f12;
  --uc-focus-ring: #a16207;
  --uc-primary-wash: rgba(234, 179, 8, 0.12);
  --uc-primary-wash-strong: rgba(234, 179, 8, 0.28);
  --uc-dna-header-red: #eab308;
  --uc-dna-card-surface: #fefce8;
  --uc-dna-card-surface-soft: #fef9d7;
  --uc-profile-wash: linear-gradient(180deg, rgba(250, 204, 21, 0.2), transparent 160px);
}

/* Theme root ink. body sets `color: var(--uc-text)` for site themes, and descendants inherit
   that already-resolved color — so a scoped theme must set its own root ink, or unclassed
   text inside the profile keeps the viewer's ink. */
#page-profile[data-uc-profile-vibe] {
  color: var(--uc-text);
}

/* Studio swatch: paints the vibe's real tokens (Match site theme paints the viewer's). */
.uc-profile-layout-vibe-card__swatch {
  background: linear-gradient(
    90deg,
    var(--uc-surface) 0 45%,
    var(--uc-primary) 45% 82%,
    var(--uc-gold) 82% 100%
  );
}