/* ============================================================
 *  THEME.CSS  �  SINGLE SOURCE OF COLOR TRUTH
 *  CRITICAL RULE: no other file may use a literal color value.
 *  Always reference these CSS custom properties.
 * ============================================================ */

:root {
  /* Type scale & radii (theme-agnostic) */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Poppins", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px var(--color-shadow);
  --shadow-md: 0 10px 30px var(--color-shadow);
  --shadow-lg: 0 20px 60px var(--color-shadow);

  --container: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Motion + atmosphere tokens (composed ONLY from the color vars below,
     so every theme inherits the effects automatically). */
  --font-script: "Great Vibes", "Segoe Script", cursive;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .35s;
  --dur-med: .7s;
  --dur-slow: 1.1s;
  --grad-accent: linear-gradient(120deg, var(--color-primary), var(--color-accent), var(--color-link));
  --grad-soft: linear-gradient(160deg,
      color-mix(in srgb, var(--color-primary) 14%, transparent),
      color-mix(in srgb, var(--color-accent) 10%, transparent));
  --glass-bg: color-mix(in srgb, var(--color-surface) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--color-border) 60%, transparent);
  --grain-opacity: .05;

  /* Decorative line–diamond–line flourish (shape only; tinted by the accent
     gradient wherever it's used as a mask). Theme-agnostic. */
  --flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 16'%3E%3Cpath d='M14 8H58' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M74 8h44' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M66 2l5 6-5 6-5-6z' fill='%23000'/%3E%3Ccircle cx='10' cy='8' r='2.2' fill='%23000'/%3E%3Ccircle cx='122' cy='8' r='2.2' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- LIGHT: Rose Gold (default) ---------- */
:root,
[data-theme="rose-gold"] {
  --color-bg:           #fdf6f1;
  --color-surface:      #ffffff;
  --color-surface-2:    #fbe9e0;
  --color-text:         #3a2a2a;
  --color-text-muted:   #7a5a5a;
  --color-primary:      #b76e79;
  --color-primary-hover:#a05864;
  --color-on-primary:   #ffffff;
  --color-accent:       #d4a373;
  --color-border:       #ecd5cb;
  --color-overlay:      rgba(58, 42, 42, 0.55);
  --color-shadow:       rgba(183, 110, 121, 0.18);
  --color-danger:       #b3261e;
  --color-success:      #2e7d32;
  --color-link:         #8e3a4a;
}

/* ---------- LIGHT: Pastel Bloom ---------- */
[data-theme="pastel"] {
  --color-bg:           #fef7fb;
  --color-surface:      #ffffff;
  --color-surface-2:    #f3eaff;
  --color-text:         #2e2a3a;
  --color-text-muted:   #6c6480;
  --color-primary:      #a78bfa;
  --color-primary-hover:#8a6bea;
  --color-on-primary:   #ffffff;
  --color-accent:       #fbb6ce;
  --color-border:       #ece1f5;
  --color-overlay:      rgba(46, 42, 58, 0.5);
  --color-shadow:       rgba(167, 139, 250, 0.18);
  --color-danger:       #c62828;
  --color-success:      #2e7d32;
  --color-link:         #6d28d9;
}

/* ---------- LIGHT: Emerald Mehndi ---------- */
[data-theme="emerald"] {
  --color-bg:           #f3faf5;
  --color-surface:      #ffffff;
  --color-surface-2:    #dff3e4;
  --color-text:         #1f2d24;
  --color-text-muted:   #547062;
  --color-primary:      #2f8f5b;
  --color-primary-hover:#23703f;
  --color-on-primary:   #ffffff;
  --color-accent:       #d4af37;
  --color-border:       #cfe6d6;
  --color-overlay:      rgba(31, 45, 36, 0.55);
  --color-shadow:       rgba(47, 143, 91, 0.18);
  --color-danger:       #b3261e;
  --color-success:      #1b5e20;
  --color-link:         #1f6b46;
}

/* ---------- DARK: Royal Maroon ---------- */
[data-theme="royal-maroon"] {
  --color-bg:           #1a0a0e;
  --color-surface:      #2a1218;
  --color-surface-2:    #3a1922;
  --color-text:         #f6e8df;
  --color-text-muted:   #c9a89d;
  --color-primary:      #c9a45a;
  --color-primary-hover:#e0b96b;
  --color-on-primary:   #1a0a0e;
  --color-accent:       #e85a71;
  --color-border:       #4a242e;
  --color-overlay:      rgba(0, 0, 0, 0.65);
  --color-shadow:       rgba(0, 0, 0, 0.5);
  --color-danger:       #ff6b6b;
  --color-success:      #6bcf85;
  --color-link:         #f1c87a;
}

/* ---------- DARK: Midnight Sapphire ---------- */
[data-theme="midnight"] {
  --color-bg:           #0b1020;
  --color-surface:      #131a32;
  --color-surface-2:    #1c2547;
  --color-text:         #e6ecff;
  --color-text-muted:   #9aa6c9;
  --color-primary:      #6c8cff;
  --color-primary-hover:#8aa4ff;
  --color-on-primary:   #0b1020;
  --color-accent:       #c084fc;
  --color-border:       #25305a;
  --color-overlay:      rgba(0, 0, 0, 0.6);
  --color-shadow:       rgba(0, 0, 0, 0.55);
  --color-danger:       #ff7676;
  --color-success:      #7bd88f;
  --color-link:         #9ab2ff;
}

/* ---------- DARK: Noir Gold ---------- */
[data-theme="noir"] {
  --color-bg:           #0d0d0d;
  --color-surface:      #1a1a1a;
  --color-surface-2:    #232323;
  --color-text:         #f3ead0;
  --color-text-muted:   #b3a684;
  --color-primary:      #d4af37;
  --color-primary-hover:#e8c452;
  --color-on-primary:   #0d0d0d;
  --color-accent:       #f5e1a4;
  --color-border:       #3a3a3a;
  --color-overlay:      rgba(0, 0, 0, 0.7);
  --color-shadow:       rgba(0, 0, 0, 0.6);
  --color-danger:       #ff6b6b;
  --color-success:      #8fd09a;
  --color-link:         #e8c452;
}