/* ============================================================
   YUCHAT · COLORS
   Monochrome-first system. Surfaces are neutral near-black / white.
   The brand spectrum survives only as the signature gradient —
   use it VERY sparingly (a single hero accent, never as UI chrome).
   Default :root = LIGHT.  [data-theme="dark"] = DARK.
   ============================================================ */

:root {
  /* --- Brand spectrum (fixed hues, theme-independent) --- */
  --yu-coral:   #F46F45;
  --yu-pink:    #ED5DAD;
  --yu-purple:  #D054C4;
  --yu-violet:  #8952F3;
  --yu-blue:    #4A55D8;

  /* Tints (lighter, for occasional washes) */
  --yu-coral-100:  #FDE6DD;
  --yu-pink-100:   #FCE6F3;
  --yu-violet-100: #EDE6FE;
  --yu-blue-100:   #E4E6FA;

  /* Shades */
  --yu-violet-700: #5B32B8;
  --yu-blue-700:   #2E37A8;

  /* --- Signature gradient — soft mesh: violet + orange lead, a hint of
     pink between them. Wide, low-contrast radial falloffs = gentle blend.
     Reserve for hero moments. --- */
  --yu-gradient:
      radial-gradient(150% 150% at 14% 20%, var(--yu-coral) 0%, rgba(244,111,69,0) 58%),
      radial-gradient(150% 150% at 58% 56%, var(--yu-pink) 0%, rgba(237,93,173,0) 44%),
      radial-gradient(165% 165% at 90% 86%, var(--yu-violet) 0%, rgba(137,82,243,0) 74%),
      linear-gradient(125deg, var(--yu-coral) 0%, var(--yu-violet) 100%);
  --yu-gradient-soft:
      radial-gradient(150% 150% at 14% 20%, rgba(244,111,69,0.16) 0%, rgba(244,111,69,0) 58%),
      radial-gradient(150% 150% at 58% 56%, rgba(237,93,173,0.08) 0%, rgba(237,93,173,0) 44%),
      radial-gradient(165% 165% at 90% 86%, rgba(137,82,243,0.16) 0%, rgba(137,82,243,0) 74%); /* @kind color */
  /* Radial blobs (only behind an explicit gradient field) */
  --yu-blob-a: radial-gradient(circle at 50% 50%, var(--yu-pink), transparent 62%);
  --yu-blob-b: radial-gradient(circle at 50% 50%, var(--yu-violet), transparent 62%);
  --yu-blob-c: radial-gradient(circle at 50% 50%, var(--yu-blue), transparent 62%);
  --yu-blob-d: radial-gradient(circle at 50% 50%, var(--yu-coral), transparent 62%);

  /* --- Glow-card fields — violet/orange bloom over near-black.
     Layer OVER a #0b0b0d base with an inset hairline. --- */
  /* Top bloom (e.g. a highlighted "Business" tier card) */
  --yu-glow-top:
      radial-gradient(90% 70% at 50% -8%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 40%),
      radial-gradient(120% 90% at 30% 0%, rgba(137,82,243,0.85) 0%, rgba(137,82,243,0) 55%),
      radial-gradient(120% 100% at 78% 6%, rgba(237,93,173,0.45) 0%, rgba(237,93,173,0) 50%),
      radial-gradient(140% 120% at 60% 120%, rgba(244,111,69,0.30) 0%, rgba(244,111,69,0) 60%); /* @kind color */
  /* Bottom bloom (e.g. a "Pro" squircle glowing from below) */
  --yu-glow-bottom:
      radial-gradient(80% 55% at 50% 112%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 42%),
      radial-gradient(120% 90% at 50% 118%, rgba(137,82,243,0.80) 0%, rgba(137,82,243,0) 58%),
      radial-gradient(120% 90% at 24% 108%, rgba(244,111,69,0.34) 0%, rgba(244,111,69,0) 52%),
      radial-gradient(110% 90% at 82% 112%, rgba(237,93,173,0.30) 0%, rgba(237,93,173,0) 50%); /* @kind color */
  /* Corner bloom rising from bottom (e.g. a feature/content card) */
  --yu-glow-corner:
      radial-gradient(90% 70% at 78% 118%, rgba(137,82,243,0.70) 0%, rgba(137,82,243,0) 55%),
      radial-gradient(90% 80% at 30% 122%, rgba(244,111,69,0.34) 0%, rgba(244,111,69,0) 52%),
      radial-gradient(70% 60% at 60% 128%, rgba(237,93,173,0.28) 0%, rgba(237,93,173,0) 48%);
  --yu-card-base: #0B0B0D; /* @kind color */

  /* ---------------- LIGHT THEME semantics ---------------- */
  /* Neutral whites — the near-black ramp from the dark theme, inverted. */
  color-scheme: light;

  --bg-base:      #FFFFFF;   /* page background */
  --bg-deep:      #F2F2F2;   /* recessed areas */
  --surface-1:    #FFFFFF;   /* solid card */
  --surface-2:    #F5F5F5;   /* subtle raised */
  --surface-sunken:#EBEBEB;

  --text-primary:   #090909;
  --text-secondary: #3D3D3D;
  --text-muted:     #7A7A7A;
  --text-inverse:   #FFFFFF;
  --text-on-accent: #FFFFFF;

  --border-subtle: rgba(9,9,9,0.10);
  --border-strong: rgba(9,9,9,0.20);
  --border-focus:  #090909;

  /* Interactive accent = solid dark. Dark buttons on the light canvas. */
  --accent:        #141414;
  --accent-hover:  #262626;
  --accent-press:  #000000;
  --accent-quiet:  #EBEBEB;

  /* Brand highlight — coral. For sparing accents: active tabs, links,
     badges, focus glows. NOT the default button fill. */
  --brand:        var(--yu-coral);
  --brand-hover:  #E85B30;
  --brand-press:  #D64D24;
  --brand-quiet:  var(--yu-coral-100);
  --brand-on:     #FFFFFF;

  /* Semantic status (kept muted, monochrome-friendly) */
  --success: #1F8F5F;
  --warning: #F59E0B;
  --danger:  #C93B3F;
  --info:    #3D3D3D;

  /* --- Glass (light) --- */
  --glass-bg:      rgba(255,255,255,0.62);
  --glass-bg-2:    rgba(255,255,255,0.42);
  --glass-border:  rgba(9,9,9,0.08);
  --glass-hilite:  rgba(255,255,255,0.9);
  --glass-blur:    18px;
  --glass-shadow:  0 8px 32px rgba(9,9,9,0.10), 0 2px 8px rgba(9,9,9,0.06);

  /* Ambient field brightness behind glass */
  --field-opacity: 0.4; /* @kind other */
}

/* ---------------- DARK THEME semantics ---------------- */
/* The photo palette: Canvas #090909 · Surface 1 #141414 ·
   Surface 2 #1c1c1c · Hairline #262626 · Pure White #ffffff. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:      #090909;   /* Canvas */
  --bg-deep:      #050505;
  --surface-1:    #141414;   /* Surface 1 */
  --surface-2:    #1C1C1C;   /* Surface 2 */
  --surface-sunken:#0E0E0E;

  --text-primary:   #FFFFFF;   /* Pure White */
  --text-secondary: #B5B5B5;
  --text-muted:     #7A7A7A;
  --text-inverse:   #090909;
  --text-on-accent: #090909;

  --border-subtle: #1F1F1F;
  --border-strong: #262626;   /* Hairline */
  --border-focus:  #FFFFFF;

  /* Interactive accent = pure white. Light buttons on the dark canvas. */
  --accent:        #FFFFFF;
  --accent-hover:  #EDEDED;
  --accent-press:  #D6D6D6;
  --accent-quiet:  #1C1C1C;

  /* Brand highlight — coral, lifted for the dark canvas. */
  --brand:        #F9835E;
  --brand-hover:  #FB9678;
  --brand-press:  #EE6A43;
  --brand-quiet:  rgba(244,111,69,0.20);
  --brand-on:     #141414;

  --success: #34C77F;
  --warning: #FBBF24;
  --danger:  #F0555A;
  --info:    #B5B5B5;

  /* --- Glass (dark) --- */
  --glass-bg:      rgba(20,20,20,0.55);
  --glass-bg-2:    rgba(20,20,20,0.35);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-hilite:  rgba(255,255,255,0.14);
  --glass-blur:    20px;
  --glass-shadow:  0 12px 40px rgba(0,0,0,0.6), 0 2px 10px rgba(0,0,0,0.5);

  --field-opacity: 0.5; /* @kind other */
}