/* ============================================================
   YUV.AI — COLOR SYSTEM
   Brand = the phoenix. A full vibrant spectrum (cyan → magenta →
   ember) on either Apple-clean light or deep studio-ink dark.
   Base palette values are sampled from the YUV.AI logo.
   ============================================================ */

:root {
  /* ---- Phoenix brand spectrum (raw) ---- */
  --phoenix-cyan:    #16D6E8;  /* "LET'S FLY HIGH" */
  --phoenix-blue:    #2E9BF0;
  --phoenix-purple:  #A64BE0;
  --phoenix-magenta: #FF2EA0;  /* the YUV.AI wordmark — primary brand */
  --phoenix-coral:   #FF5A6A;
  --phoenix-orange:  #FF9E3D;
  --phoenix-yellow:  #FFD15C;

  /* ---- Primary (magenta) ramp ---- */
  --magenta-50:  #FFE9F4;
  --magenta-100: #FFC9E5;
  --magenta-200: #FF9BD0;
  --magenta-300: #FF6ABA;
  --magenta-400: #FF459F;
  --magenta-500: #FF2EA0;
  --magenta-600: #E60E83;
  --magenta-700: #B80A68;
  --magenta-800: #8A0A4F;
  --magenta-900: #5C0935;

  /* ---- Cyan ramp ---- */
  --cyan-50:  #E2FBFD;
  --cyan-100: #B8F4F9;
  --cyan-200: #82E9F1;
  --cyan-300: #44DCEA;
  --cyan-400: #16D6E8;
  --cyan-500: #06BBCE;
  --cyan-600: #0697A6;
  --cyan-700: #0B7280;
  --cyan-800: #0E5560;
  --cyan-900: #0B3B42;

  /* ---- Hero gradients (the phoenix in motion) ---- */
  --gradient-phoenix: linear-gradient(115deg, #16D6E8 0%, #2E9BF0 22%, #A64BE0 44%, #FF2EA0 64%, #FF5A6A 82%, #FF9E3D 100%); /* @kind other */
  --gradient-fly:     linear-gradient(90deg, #16D6E8 0%, #FF2EA0 100%); /* @kind other */
  --gradient-ember:   linear-gradient(135deg, #FF9E3D 0%, #FF5A6A 48%, #FF2EA0 100%); /* @kind other */
  --gradient-aurora:  linear-gradient(135deg, #16D6E8 0%, #A64BE0 55%, #FF2EA0 100%); /* @kind other */
  --gradient-ink:     linear-gradient(180deg, #15151F 0%, #0B0B12 100%); /* @kind other */

  /* ---- Glow color (used in shadows / neon) ---- */
  --glow-magenta: 255, 46, 160; /* @kind other */
  --glow-cyan:    22, 214, 232; /* @kind other */

  /* ---- Apple system accents (kept for UI parity, sampled from kit) ---- */
  --accent-blue:   #0088FF;
  --accent-green:  #34C759;
  --accent-orange: #FF8D28;
  --accent-red:    #FF383C;
  --accent-yellow: #FFCC00;
  --accent-purple: #CB30E0;
}

/* ============================================================
   LIGHT THEME (default) — Apple-clean canvas
   ============================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --brand-primary: var(--magenta-500);
  --brand-secondary: var(--cyan-400);
  --brand-on-primary: #FFFFFF;

  /* Surfaces */
  --bg-base:        #FFFFFF;
  --bg-subtle:      #F5F5F7;   /* Apple grouped grey */
  --bg-muted:       #ECECEF;
  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2F2F7;

  /* Text */
  --text-primary:   #0A0A0F;
  --text-secondary: rgba(60,60,67,0.66);
  --text-tertiary:  rgba(60,60,67,0.34);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--magenta-600);

  /* Lines & fills */
  --border-subtle:  rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.16);
  --separator:      rgba(60,60,67,0.18);
  --fill-secondary: rgba(120,120,128,0.16);
  --fill-tertiary:  rgba(118,118,128,0.12);

  /* Glass (Apple "liquid glass", YUV-tinted) */
  --glass-fill:     rgba(255,255,255,0.55);
  --glass-stroke:   rgba(255,255,255,0.7);
  --glass-tint:     rgba(255,46,160,0.04);
  --glass-blur:     22px;
  --glass-saturate: 180%;
}

/* ============================================================
   DARK THEME — studio ink + neon (the signature YUV.AI vibe)
   ============================================================ */
:root[data-theme="dark"],
.dark {
  color-scheme: dark;

  --brand-primary: var(--magenta-500);
  --brand-secondary: var(--cyan-400);
  --brand-on-primary: #FFFFFF;

  --bg-base:        #08080D;
  --bg-subtle:      #101019;
  --bg-muted:       #181824;
  --surface-card:   #14141E;
  --surface-raised: #1C1C28;
  --surface-sunken: #0B0B12;

  --text-primary:   #F7F7FB;
  --text-secondary: rgba(235,235,245,0.62);
  --text-tertiary:  rgba(235,235,245,0.32);
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--cyan-300);

  --border-subtle:  rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.20);
  --separator:      rgba(235,235,245,0.16);
  --fill-secondary: rgba(120,120,128,0.32);
  --fill-tertiary:  rgba(118,118,128,0.24);

  --glass-fill:     rgba(28,28,40,0.52);
  --glass-stroke:   rgba(255,255,255,0.14);
  --glass-tint:     rgba(255,46,160,0.07);
  --glass-blur:     24px;
  --glass-saturate: 160%;
}