/* ============================================================
 * File        : base.css
 * Scope       : global foundation (variables, fonts, background, layout)
 * ============================================================ */

:root{
  /* Palettes */
  --hero-ink:#0B0B2A;
  --hero-overlay:#1A1240;
  --magenta:#E11D79;
  --violet:#7C3AED;

  /* Neutres & UI */
  --ink:#F8FAFC;
  --muted:#CBD5E1;
  --ring:#60A5FA;
  --focus:#2563EB;

  /* Glass */
  --glass-bg:#FFFFFF15;
  --glass-border:#FFFFFF33;
  --glass-blur:16px;

  /* Layout */
  --container:1040px;
  --radius:16px;

  /* Ombres */
  --shadow-lg:0 6px 40px #0008;
  --shadow-md:0 2px 16px #0005;
}

/* Base */
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font:14px/1.6 "Open Sans", Arial, sans-serif;
  font-weight:300;

  /* Fond (dark) avec halos */
  background: var(--hero-ink);
  background-image:
    radial-gradient(60vmax 60vmax at 80% 18%, #E11D7926 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 12% 10%, #7C3AED26 0%, transparent 55%),
    radial-gradient(44vmax 44vmax at 70% 78%, #22D3EE22 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-overlay) 0%, var(--hero-ink) 60%, #090918 100%);
}

a{ color:#A78BFA; text-decoration:none }
a:hover{ text-decoration:underline }
a:focus{ outline:2px solid var(--focus); outline-offset:2px }

.container{ max-width:var(--container); margin:0 auto; padding:0 16px }

/* Light mode overrides (minimum utile) */
html[data-theme="light"] body{
  color:#0F172A;
  background:#F8FAFC;
  background-image:
    radial-gradient(60vmax 60vmax at 80% 18%, #F0ABFC33 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 12% 10%, #DDD6FE33 0%, transparent 55%),
    radial-gradient(44vmax 44vmax at 70% 78%, #BAE6FD33 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%);
}

/* RTL corrections basiques */
[dir="rtl"] .icon{ margin-right:0; margin-left:8px }