/* ==========================================================================
   light-mode.css
   --------------------------------------------------------------------------
   Full light-mode override layer. Shipped as a static asset so it loads
   without a Vite rebuild. Works by:

   1) Re-mapping the `--color-dark-*` CSS custom properties inside `.light`.
      Tailwind v4 compiles utility classes like `bg-dark-900` as
      `background-color: var(--color-dark-900)`, so redefining the variables
      automatically inverts hundreds of utility usages across the app.

   2) Re-mapping the default Tailwind `--color-gray-*` ramp for the same
      reason — dark mode relies heavily on `text-gray-200`, `text-gray-400`
      etc. as the default text color.

   3) Overriding a set of hand-written component rules (hero-section,
      navbar-glass, luxury-card, scrollbar, article-prose, stat-card,
      luxury-table) that were hard-coded for dark theme.

   Load order: this file must come AFTER app.css (the Vite build) so the
   overrides win when `html.light` is applied.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Token remap — the heart of the system
   -------------------------------------------------------------------------- */
html.light {
    /* Dark ramp inverted for light backgrounds / borders. The naming still
     * reads "dark" (from Tailwind theme) but the values are bright. */
    --color-dark-50:  #0a0a0a;   /* deepest text on light canvas      */
    --color-dark-100: #171717;
    --color-dark-200: #212121;
    --color-dark-300: #303030;
    --color-dark-400: #424242;
    --color-dark-500: #616161;
    --color-dark-600: #bdbdbd;   /* light borders                      */
    --color-dark-700: #e2e2e2;   /* card borders                       */
    --color-dark-800: #eef1f4;   /* card backgrounds (subtle fill)     */
    --color-dark-900: #ffffff;   /* card / surface                     */
    --color-dark-950: #f5f7fa;   /* page background                    */

    /* Gray ramp — used heavily for text on dark. Invert. */
    --color-gray-50:  #0f172a;
    --color-gray-100: #111827;
    --color-gray-200: #1f2937;
    --color-gray-300: #334155;
    --color-gray-400: #475569;
    --color-gray-500: #64748b;
    --color-gray-600: #94a3b8;
    --color-gray-700: #cbd5e1;
    --color-gray-800: #e2e8f0;
    --color-gray-900: #f1f5f9;
    --color-gray-950: #f8fafc;

    /* Gold stays — we still want the gold accent. Nudge a couple tones so
     * buttons keep legible contrast on white. */
    --color-gold-50:  #fffbeb;
    --color-gold-300: #c79c2a;  /* a touch darker for readability      */

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2) Body + global surface on light mode
   -------------------------------------------------------------------------- */
html.light body {
    background-color: #f5f7fa !important;
    color: #1f2937 !important;
}

html.light .bg-dark-950 { background-color: #f5f7fa !important; }
html.light .bg-dark-900 { background-color: #ffffff !important; }
html.light .bg-dark-800 { background-color: #eef1f4 !important; }
html.light .border-dark-700 { border-color: #e2e8f0 !important; }
html.light .border-dark-800 { border-color: #edeff3 !important; }
html.light .border-dark-600 { border-color: #cbd5e1 !important; }

/* Text anchors */
html.light .text-gray-100 { color: #0f172a !important; }
html.light .text-gray-200 { color: #111827 !important; }
html.light .text-gray-300 { color: #1f2937 !important; }
html.light .text-gray-400 { color: #475569 !important; }
html.light .text-gray-500 { color: #64748b !important; }
html.light .text-gray-600 { color: #94a3b8 !important; }

/* --------------------------------------------------------------------------
   3) Component overrides — things that used raw hex in hand-written CSS
   -------------------------------------------------------------------------- */

/* Hero section */
html.light .hero-section {
    background: linear-gradient(135deg, #f8fafc 0%, #eef1f4 50%, #fffbeb 100%);
}
html.light .hero-section::before {
    background: radial-gradient(ellipse at 30% 50%, rgba(184, 134, 11, 0.12) 0%, transparent 70%);
}
html.light .hero-particles span {
    background: rgba(184, 134, 11, 0.35);
}

/* Navbar glass */
html.light .navbar-glass {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(184, 134, 11, 0.18);
    color: #1f2937;
}
html.light .navbar-glass.scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

/* Luxury card */
html.light .luxury-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(184, 134, 11, 0.2);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
html.light .luxury-card:hover {
    border-color: rgba(184, 134, 11, 0.45);
    box-shadow: 0 8px 32px rgba(184, 134, 11, 0.12);
}

/* Form input */
html.light .form-input-luxury {
    background: #ffffff;
    border-color: rgba(184, 134, 11, 0.35);
    color: #111827;
}
html.light .form-input-luxury:focus {
    background: #ffffff;
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}
html.light .form-input-luxury::placeholder {
    color: rgba(15, 23, 42, 0.4);
}

/* Scrollbar */
html.light ::-webkit-scrollbar-track { background: #eef1f4; }

/* Stat card */
html.light .stat-card {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.04), rgba(184, 134, 11, 0.08));
    border-color: rgba(184, 134, 11, 0.2);
}

/* Luxury table */
html.light .luxury-table thead th {
    background: rgba(184, 134, 11, 0.08);
    color: #7c5908;
    border-bottom: 2px solid rgba(184, 134, 11, 0.25);
}
html.light .luxury-table tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #1f2937;
}
html.light .luxury-table tbody tr:hover {
    background: rgba(184, 134, 11, 0.06);
}

/* Article prose (publication bodies) */
html.light .article-prose {
    color: #1f2937;
}
html.light .article-prose h1,
html.light .article-prose h2,
html.light .article-prose h3,
html.light .article-prose h4,
html.light .article-prose h5,
html.light .article-prose h6 {
    color: #0f172a;
}
html.light .article-prose h2 {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
html.light .article-prose strong { color: #0f172a; }
html.light .article-prose em     { color: #334155; }
html.light .article-prose a {
    color: #9a6f09;
    border-bottom-color: rgba(154, 111, 9, 0.4);
}
html.light .article-prose a:hover {
    color: #b8860b;
    border-bottom-color: #b8860b;
}
html.light .article-prose code {
    color: #7c5908;
    background: rgba(184, 134, 11, 0.08);
}
html.light .article-prose pre {
    background: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.15);
}
html.light .article-prose pre code {
    color: #e5e7eb;
}
html.light .article-prose blockquote {
    background: rgba(184, 134, 11, 0.08);
    border-left-color: #b8860b;
    color: #334155;
}
html.light .article-prose img,
html.light .article-prose figure img {
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light .article-prose table {
    border: 1px solid rgba(15, 23, 42, 0.08);
}
html.light .article-prose thead {
    background: rgba(184, 134, 11, 0.06);
}
html.light .article-prose th,
html.light .article-prose td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html.light .article-prose th {
    color: #0f172a;
}

/* Selectable card */
html.light .selectable-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(184, 134, 11, 0.3);
    color: #1f2937;
}
html.light .selectable-card:hover {
    background: rgba(184, 134, 11, 0.06);
    border-color: rgba(184, 134, 11, 0.55);
}
html.light .selectable-card.is-selected {
    background: rgba(184, 134, 11, 0.14);
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

/* Admin buttons — secondary/neutral */
html.light .btn-admin-secondary {
    background: #ffffff;
    color: #1f2937;
    border-color: rgba(184, 134, 11, 0.35);
}
html.light .btn-admin-secondary:hover {
    background: #fffbeb;
    border-color: rgba(184, 134, 11, 0.55);
    color: #7c5908;
}

/* --------------------------------------------------------------------------
   4) Shadow adjustments on common dark shadows
   -------------------------------------------------------------------------- */
html.light [class*="shadow-"] {
    --tw-shadow-color: rgba(15, 23, 42, 0.08);
}

/* --------------------------------------------------------------------------
   5) Gradient classes used with "from-dark-*" / "to-dark-*" — keep subtle
   -------------------------------------------------------------------------- */
html.light .from-dark-800 { --tw-gradient-from: #eef1f4; }
html.light .from-dark-900 { --tw-gradient-from: #ffffff; }
html.light .to-dark-800   { --tw-gradient-to:   #eef1f4; }
html.light .to-dark-900   { --tw-gradient-to:   #ffffff; }
html.light .via-dark-800  { --tw-gradient-via:  #eef1f4; }

/* --------------------------------------------------------------------------
   6) Hover states that use dark-800 / dark-700 in markup
   -------------------------------------------------------------------------- */
html.light .hover\:bg-dark-700:hover,
html.light .hover\:bg-dark-800:hover {
    background-color: rgba(184, 134, 11, 0.08) !important;
}

/* --------------------------------------------------------------------------
   7) Focus ring — keep gold accent visible on light
   -------------------------------------------------------------------------- */
html.light :focus-visible {
    outline: 2px solid #b8860b;
    outline-offset: 2px;
}