/* ═══════════════════════════════════════════════════════════════════
   VALORY DESIGN TOKENS — theme.css
   Single source of truth for all colors, gradients, and visual tokens.
   Dark mode  = :root  (default — preserves existing dark theme)
   Light mode = [data-theme="light"]
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ══════════════════════════════════════════════════════════════════
     RAW PALETTE — Color Scale (hex)
     Named after Tailwind CSS equivalents for consistency.
     ══════════════════════════════════════════════════════════════════ */

  /* --- White & Black --- */
  --white: #ffffff;

  /* --- Slate (cool neutral) --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* --- Gray --- */
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;

  /* --- Purple --- */
  --purple-50:  #faf5ff;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-950: #3b0764;

  /* --- Violet --- */
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-900: #4c1d95;

  /* --- Fuchsia --- */
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;

  /* --- Indigo --- */
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4338ca;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  /* --- Blue --- */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* --- Sky --- */
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;

  /* --- Cyan --- */
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;

  /* --- Teal --- */
  --teal-500: #14b8a6;
  --teal-900: #134e4a;

  /* --- Emerald --- */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-800: #065f46;

  /* --- Green --- */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* --- Amber --- */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-800: #92400e;
  --amber-900: #78350f;

  /* --- Yellow --- */
  --yellow-400: #facc15;

  /* --- Orange --- */
  --orange-200: #fed7aa;
  --orange-500: #f97316;
  --orange-800: #9a3412;

  /* --- Red --- */
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* --- Rose --- */
  --rose-200: #fecdd3;

  /* --- Pink --- */
  --pink-400: #f472b6;
  --pink-500: #ec4899;

  /* --- Tier / Badge custom colors --- */
  --bronze:      #b87333;
  --bronze-dk:   #8c5a2b;
  --bronze-deep: #4a2f19;
  --bronze-lt:   #cd7f32;
  --bronze-gold: #ffd27f;
  --tier-1-fg:   #ffe9f7;
  --tier-2-fg:   #e6fffa;
  --tier-3-fg:   #fff7e6;

  /* --- Custom one-off colors used in the project --- */
  --text-light-blue:   #e8edf8;   /* calendar heading text */
  --text-blue-white:   #f8fbff;   /* auth/button near-white */
  --text-blue-tint:    #eef3ff;   /* auth text */
  --text-violet-soft:  #f0edff;   /* calendar active, light violet */
  --text-study:        #f0f4ff;   /* study session text */
  --text-indigo-light: #cbd5f5;   /* chat / search text variant */
  --text-violet-wash:  #e0d9ff;   /* study session hover text */
  --text-cool-blue:    #eef6ff;   /* auth button text */
  --text-indigo-white: #eef2ff;   /* avatar cropper dialog text */
  --text-ss-btn:       #eef0ff;   /* study session button text */
  --text-mint:         #f0fff4;   /* study session complete text */
  --text-deep-navy:    #0b1224;   /* parent avatar dark text */
  --text-deep-teal:    #04101b;   /* edit toggle dark text */
  --text-soft-blue:    #e7f3ff;   /* file upload text */
  --text-ice-blue:     #dbe4ff;   /* role secondary text */
  --text-pale-blue:    #e0e7ff;   /* step text, same as indigo-100 */
  --bg-diary:          #1c1c2e;   /* diary page bg */
  --bg-threads:        #232149;   /* threads list bg */
  --purple-diary:      #8a2be2;   /* diary accent */
  --badge-fallback-bg: #222;      /* .mn-badge default bg */
  --badge-fallback-fg: #eee;      /* .mn-badge default fg */


  /* ══════════════════════════════════════════════════════════════════
     RGB TRIPLETS — For rgba() composition
     Usage: rgba(var(--violet-500-rgb), 0.12)
     ══════════════════════════════════════════════════════════════════ */

  --white-rgb:       255, 255, 255;
  --black-rgb:       0, 0, 0;

  /* Slate */
  --slate-200-rgb:   226, 232, 240;
  --slate-300-rgb:   203, 213, 225;
  --slate-400-rgb:   148, 163, 184;
  --slate-800-rgb:   30, 41, 59;
  --slate-900-rgb:   15, 23, 42;

  /* Gray */
  --gray-800-rgb:    31, 41, 55;

  /* Violet / Purple */
  --violet-300-rgb:  196, 181, 253;
  --violet-400-rgb:  167, 139, 250;
  --violet-500-rgb:  139, 92, 246;
  --violet-600-rgb:  124, 58, 237;

  /* Indigo */
  --indigo-200-rgb:  199, 210, 254;
  --indigo-400-rgb:  129, 140, 248;
  --indigo-500-rgb:  99, 102, 241;

  /* Blue */
  --blue-200-rgb:    191, 219, 254;
  --blue-300-rgb:    147, 197, 253;
  --blue-400-rgb:    96, 165, 250;
  --blue-500-rgb:    59, 130, 246;
  --blue-600-rgb:    37, 99, 235;
  --blue-800-rgb:    30, 64, 175;

  /* Sky */
  --sky-200-rgb:     186, 230, 253;
  --sky-300-rgb:     125, 211, 252;
  --sky-400-rgb:     56, 189, 248;
  --sky-500-rgb:     14, 165, 233;

  /* Cyan */
  --cyan-400-rgb:    34, 211, 238;

  /* Emerald / Green */
  --emerald-300-rgb: 110, 231, 183;
  --emerald-500-rgb: 16, 185, 129;
  --green-500-rgb:   34, 197, 94;
  --green-600-rgb:   22, 163, 74;

  /* Amber / Yellow */
  --amber-400-rgb:   251, 191, 36;
  --amber-500-rgb:   245, 158, 11;
  --yellow-400-rgb:  250, 204, 21;

  /* Red */
  --red-400-rgb:     248, 113, 113;
  --red-500-rgb:     239, 68, 68;
  --red-800-rgb:     153, 27, 27;

  /* Pink */
  --pink-500-rgb:    236, 72, 153;

  /* Misc */
  --bronze-rgb:      205, 127, 50;
  --bronze-gold-rgb: 255, 210, 127;
  --dark-overlay-rgb:    2, 6, 23;
  --app-surface-rgb:     12, 18, 30;    /* mobile app topbar surface */
  --deep-navy-rgb:       3, 7, 18;      /* mobile app shadow tone */
  --cropper-bg-1-rgb:    12, 20, 43;    /* avatar cropper dialog bg */
  --cropper-bg-2-rgb:    11, 30, 58;    /* avatar cropper dialog bg alt */
  --cropper-backdrop-rgb: 1, 7, 19;     /* avatar cropper backdrop */
  --cropper-shadow-rgb:  2, 8, 23;      /* avatar cropper drop shadow */

  /* Calendar-specific dark palette */
  --cal-bg-0-rgb:        8, 10, 24;     /* calendar surface base */
  --cal-bg-1-rgb:        12, 16, 34;    /* calendar surface layer 1 */
  --cal-bg-2-rgb:        16, 20, 42;    /* calendar surface layer 2 */
  --cal-bg-header-rgb:   14, 18, 38;    /* calendar header bg */
  --cal-bg-btn-rgb:      15, 18, 36;    /* calendar button group */
  --cal-bg-deep-rgb:     8, 12, 26;     /* calendar scrollgrid bottom */
  --cal-bg-hover-rgb:    20, 24, 50;    /* calendar day hover */
  --cal-bg-axis-rgb:     10, 14, 28;    /* calendar timegrid axis */
  --cal-bg-col-rgb:      10, 14, 30;    /* calendar timegrid col */
  --cal-bg-col-hover-rgb: 18, 22, 46;   /* calendar col hover top */

  /* Study session (ss-*) custom RGB triplets */
  --ss-surface-rgb:       16, 24, 44;    /* ss card/surface base */
  --ss-surface-strong-rgb: 12, 21, 42;   /* ss card/surface strong */
  --ss-card-bg1-rgb:      30, 27, 60;    /* ss card gradient stop 1 */
  --ss-card-bg2-rgb:      14, 22, 42;    /* ss card gradient stop 2 */
  --ss-input-bg-rgb:       8, 13, 28;    /* ss input bg */
  --ss-shell-bg1-rgb:     22, 18, 52;    /* ss session shell stop 1 */
  --ss-shell-bg2-rgb:     10, 16, 34;    /* ss session shell stop 2 */
  --ss-resources-bg-rgb:  28, 24, 56;    /* ss resources panel stop */
  --ss-quote-bg-rgb:       8, 14, 30;    /* ss quote/reflection bg */
  --ss-cta-break-bg-rgb:   9, 16, 36;    /* ss cta-break padding layer */

  /* Onboarding tour custom RGB triplets */
  --tour-completion-bg-rgb: 7, 32, 18;   /* onboarding completion card bg */

  /* Auth page surface / input RGB triplets */
  --auth-input-bg-rgb:      8, 16, 32;   /* auth input field bg */
  --auth-surface-a-rgb:    12, 22, 44;   /* auth wash surface a */
  --auth-surface-b-rgb:    10, 18, 36;   /* auth wash surface b */
  --auth-surface-wash-rgb: 22, 32, 58;   /* auth hover wash */
  --auth-hero-b-rgb:       20, 30, 60;   /* parent-hero gradient stop b */
  --auth-edit-shadow-rgb:   4,  7, 20;   /* edit card shadow */
  --text-blue-white-rgb: 248, 251, 255;  /* --text-blue-white as triplet */

  --lm-purple-rgb:   91, 81, 121;   /* light-mode purple-gray base */


  /* ══════════════════════════════════════════════════════════════════
     SEMANTIC DESIGN TOKENS
     ══════════════════════════════════════════════════════════════════ */

  /* ── Backgrounds ── */
  --bg-base:        #0f172a;
  --bg-surface:     #1e293b;
  --bg-card:        #1e1b4b;
  --bg-card-alt:    #111827;
  --bg-input:       #0b1220;
  --bg-hover:       rgba(var(--white-rgb), 0.04);
  --bg-active:      rgba(var(--white-rgb), 0.07);

  /* ── Borders ── */
  --border-subtle:  rgba(var(--white-rgb), 0.06);
  --border-default: rgba(var(--white-rgb), 0.10);
  --border-strong:  rgba(var(--white-rgb), 0.18);

  /* ── Text ── */
  --text-primary:   #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted:     #94a3b8;

  /* ── Brand Accent ── */
  --accent-purple:     #8b5cf6;
  --accent-purple-dk:  #7c3aed;
  --accent-purple-dkr: #6d28d9;
  --accent-purple-lt:  #a78bfa;
  --accent-blue:       #3b82f6;
  --accent-blue-dk:    #2563eb;
  --accent-blue-lt:    rgba(var(--blue-500-rgb), 0.15);
  --accent-sky:        #38bdf8;
  --accent-cyan:       #22d3ee;
  --accent-indigo:     #6366f1;

  /* ── Semantic Status Colors ── */
  --color-success:     #22c55e;
  --color-success-alt: #10b981;
  --color-warning:     #f59e0b;
  --color-danger:      #ef4444;
  --color-danger-dk:   #dc2626;
  --color-info:        #0ea5e9;

  /* ── Gradients ── */
  --grad-body:    linear-gradient(135deg, #0f172a, #1e1b4b, #3b0764);
  --grad-cta:     linear-gradient(90deg, #6d28d9, #8b5cf6);
  --grad-accent:  linear-gradient(90deg, #8b5cf6, #0ea5e9);
  --grad-hero:    linear-gradient(135deg, #2563eb, #8b5cf6, #38bdf8);

  /* ── Tier badge gradients ── */
  --grad-tier-1: linear-gradient(135deg, #6d28d9, #a21caf, #ec4899);
  --grad-tier-2: linear-gradient(135deg, #064e3b, #059669, #22c55e);
  --grad-tier-3: linear-gradient(135deg, #4a2f19, #b87333, #ffd27f);
  --grad-name-t1: linear-gradient(45deg, #7c3aed 0%, #c026d3 40%, #ec4899 70%, #f472b6 100%);
  --grad-name-t2: linear-gradient(45deg, #10b981 0%, #22c55e 60%, #34d399 100%);
  --grad-name-t3: linear-gradient(45deg, #8c5a2b 0%, #cd7f32 35%, #b87333 70%, #ffd27f 100%);

  /* ── Auth Page Tokens ── */
  --auth-surface:        rgba(12, 23, 44, 0.62);
  --auth-surface-strong: rgba(14, 26, 52, 0.7);
  --auth-surface-soft:   rgba(10, 18, 36, 0.52);
  --auth-border:         rgba(var(--slate-400-rgb), 0.28);
  --auth-border-soft:    rgba(var(--slate-400-rgb), 0.18);
  --auth-text:           #eef3ff;
  --auth-text-muted:     rgba(214, 224, 242, 0.82);
  --auth-text-subtle:    rgba(179, 196, 222, 0.74);
  --auth-accent:         var(--accent-sky);
  --auth-accent-strong:  var(--accent-blue-dk);
  --auth-accent-2:       var(--accent-purple);
  --auth-success:        var(--emerald-400);
  --auth-warning:        var(--amber-400);
  --auth-danger:         var(--red-400);
  --auth-shadow:         0 18px 38px rgba(var(--dark-overlay-rgb), 0.38);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  /* ── Sidebar ── */
  --sidebar-width: 64px;

  /* ── Shadows ── */
  --shadow-card: none;
}


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Token Overrides
   Activated by: <html data-theme="light">
   Palette: lavender mist / violet-tinted — never pure white
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {

  /* Page layers (outermost -> innermost) */
  --bg-base:        #EDEAF6;
  --bg-surface:     #E3DFF0;
  --bg-card:        #F6F4FB;
  --bg-card-alt:    #FDFCFE;
  --bg-input:       #FDFCFE;
  --bg-hover:       rgba(var(--lm-purple-rgb), 0.04);
  --bg-active:      rgba(var(--lm-purple-rgb), 0.07);

  /* Borders — purple/violet-tinted translucent, never plain gray */
  --border-subtle:  rgba(var(--lm-purple-rgb), 0.08);
  --border-default: rgba(var(--lm-purple-rgb), 0.12);
  --border-strong:  rgba(var(--lm-purple-rgb), 0.18);

  /* Text — deep purple-black, never pure #000 */
  --text-primary:   #1A1533;
  --text-secondary: #5B5179;
  --text-muted:     #8E85A8;

  /* Body gradient -> flat lavender */
  --grad-body:      #EDEAF6;

  /* Shadows — purple-tinted, never gray */
  --shadow-card:    0 1px 3px rgba(var(--lm-purple-rgb), 0.08),
                    0 1px 2px rgba(var(--lm-purple-rgb), 0.05);

  /* TODO: Add light-mode overrides for remaining palette colors as needed */
}