/* ============================================================
   AEX DESIGN SYSTEM - LAYER 1: DESIGN TOKENS
   Sursa unica de adevar pentru culoare, tipografie, spatiu,
   raza, umbra si miscare. Nicio valoare "magica" in componente.
   ============================================================ */

:root {
  /* ---------- PALETA PRIMITIVA ---------- */
  /* Brand - verde Excel, rafinat pe 10 trepte */
  --aex-brand-50:  #ecfdf3;
  --aex-brand-100: #d1fadf;
  --aex-brand-200: #a6f4c5;
  --aex-brand-300: #6ce9a6;
  --aex-brand-400: #32d583;
  --aex-brand-500: #12b76a;
  --aex-brand-600: #039855;
  --aex-brand-700: #027a48;
  --aex-brand-800: #05603a;
  --aex-brand-900: #054f31;

  /* Accent - violet "AI", pentru tot ce tine de inteligenta artificiala */
  --aex-accent-50:  #f4f3ff;
  --aex-accent-100: #ebe9fe;
  --aex-accent-200: #d9d6fe;
  --aex-accent-300: #bdb4fe;
  --aex-accent-400: #9b8afb;
  --aex-accent-500: #7a5af8;
  --aex-accent-600: #6938ef;
  --aex-accent-700: #5925dc;
  --aex-accent-800: #4a1fb8;
  --aex-accent-900: #3e1c96;

  /* Neutre - bleumarin rece, nu gri mort */
  --aex-n-0:   #ffffff;
  --aex-n-25:  #fcfcfd;
  --aex-n-50:  #f8fafc;
  --aex-n-100: #f1f5f9;
  --aex-n-200: #e2e8f0;
  --aex-n-300: #cbd5e1;
  --aex-n-400: #94a3b8;
  --aex-n-500: #64748b;
  --aex-n-600: #475569;
  --aex-n-700: #334155;
  --aex-n-800: #1e293b;
  --aex-n-900: #0f172a;
  --aex-n-950: #080f1f;

  /* Semantice */
  --aex-warn: #f79009;
  --aex-danger: #d92d20;
  --aex-info: #2e90fa;

  /* ---------- TOKENS SEMANTICE (tema deschisa) ---------- */
  --aex-bg:            var(--aex-n-0);
  --aex-bg-subtle:     var(--aex-n-50);
  --aex-bg-muted:      var(--aex-n-100);
  --aex-bg-inverse:    var(--aex-n-950);
  --aex-surface:       var(--aex-n-0);
  --aex-surface-raised: var(--aex-n-0);
  --aex-surface-sunken: var(--aex-n-50);

  --aex-text:          var(--aex-n-900);
  --aex-text-muted:    var(--aex-n-600);
  --aex-text-subtle:   var(--aex-n-500);
  --aex-text-inverse:  var(--aex-n-0);
  --aex-text-brand:    var(--aex-brand-700);

  --aex-border:        var(--aex-n-200);
  --aex-border-strong: var(--aex-n-300);
  --aex-border-brand:  var(--aex-brand-300);

  --aex-primary:       var(--aex-brand-600);
  --aex-primary-hover: var(--aex-brand-700);
  --aex-primary-soft:  var(--aex-brand-50);
  --aex-on-primary:    #ffffff;

  --aex-accent:        var(--aex-accent-600);
  --aex-accent-soft:   var(--aex-accent-50);

  --aex-ring: rgba(18, 183, 106, .45);

  /* Gradiente de brand */
  --aex-grad-brand: linear-gradient(135deg, var(--aex-brand-600) 0%, var(--aex-brand-400) 100%);
  --aex-grad-ai:    linear-gradient(135deg, var(--aex-accent-600) 0%, var(--aex-brand-500) 100%);
  --aex-grad-ink:   linear-gradient(160deg, var(--aex-n-950) 0%, #0d2038 55%, #0a3b2c 100%);
  --aex-grad-glow:  radial-gradient(60% 60% at 50% 0%, rgba(50, 213, 131, .22) 0%, transparent 100%);

  /* ---------- TIPOGRAFIE ---------- */
  --aex-font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --aex-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
                   Menlo, Consolas, "Liberation Mono", monospace;

  /* Scara fluida - clamp(min, preferat, max) */
  --aex-fs-2xs:     0.75rem;
  --aex-fs-xs:      0.8125rem;
  --aex-fs-sm:      0.875rem;
  --aex-fs-base:    1rem;
  --aex-fs-md:      clamp(1.0625rem, 0.99rem + 0.31vw, 1.125rem);
  --aex-fs-lg:      clamp(1.125rem, 1.03rem + 0.47vw, 1.375rem);
  --aex-fs-xl:      clamp(1.375rem, 1.22rem + 0.78vw, 1.75rem);
  --aex-fs-2xl:     clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  --aex-fs-3xl:     clamp(2rem, 1.55rem + 2.25vw, 3rem);
  --aex-fs-4xl:     clamp(2.375rem, 1.65rem + 3.6vw, 3.9rem);
  --aex-fs-display: clamp(2.75rem, 1.7rem + 5.2vw, 5rem);

  --aex-lh-tight:   1.08;
  --aex-lh-snug:    1.22;
  --aex-lh-normal:  1.5;
  --aex-lh-relaxed: 1.72;

  --aex-fw-regular: 400;
  --aex-fw-medium:  500;
  --aex-fw-semi:    600;
  --aex-fw-bold:    700;
  --aex-fw-black:   800;

  --aex-tracking-tight: -0.022em;
  --aex-tracking-snug:  -0.012em;
  --aex-tracking-wide:  0.08em;

  /* ---------- SPATIU (baza 4px) ---------- */
  --aex-sp-1:  0.25rem;
  --aex-sp-2:  0.5rem;
  --aex-sp-3:  0.75rem;
  --aex-sp-4:  1rem;
  --aex-sp-5:  1.25rem;
  --aex-sp-6:  1.5rem;
  --aex-sp-8:  2rem;
  --aex-sp-10: 2.5rem;
  --aex-sp-12: 3rem;
  --aex-sp-16: 4rem;
  --aex-sp-20: 5rem;
  --aex-sp-24: 6rem;
  --aex-sp-32: 8rem;

  /* Ritm vertical de sectiune, fluid */
  --aex-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --aex-gutter:    clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);
  --aex-container: 1200px;
  --aex-container-narrow: 780px;
  --aex-container-wide: 1400px;

  /* ---------- RAZE ---------- */
  --aex-r-xs:  6px;
  --aex-r-sm:  10px;
  --aex-r-md:  14px;
  --aex-r-lg:  20px;
  --aex-r-xl:  28px;
  --aex-r-2xl: 36px;
  --aex-r-full: 999px;

  /* ---------- UMBRE (elevatie stratificata) ---------- */
  --aex-sh-xs: 0 1px 2px rgba(15,23,42,.06);
  --aex-sh-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --aex-sh-md: 0 4px 12px -2px rgba(15,23,42,.08), 0 2px 6px -2px rgba(15,23,42,.05);
  --aex-sh-lg: 0 12px 28px -6px rgba(15,23,42,.12), 0 4px 10px -4px rgba(15,23,42,.06);
  --aex-sh-xl: 0 26px 56px -12px rgba(15,23,42,.18), 0 8px 20px -8px rgba(15,23,42,.08);
  --aex-sh-brand: 0 14px 32px -10px rgba(3, 152, 85, .45);

  /* ---------- MISCARE ---------- */
  --aex-ease:        cubic-bezier(.4, 0, .2, 1);
  --aex-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --aex-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --aex-dur-fast:  .16s;
  --aex-dur:       .28s;
  --aex-dur-slow:  .55s;

  /* ---------- Z-INDEX ---------- */
  --aex-z-base: 1;
  --aex-z-sticky: 100;
  --aex-z-header: 200;
  --aex-z-drawer: 300;
  --aex-z-modal: 400;
}

/* ---------- TEMA INTUNECATA (aleasa explicit) ---------- */
:root[data-aex-theme="dark"] {
  --aex-bg:            var(--aex-n-950);
  --aex-bg-subtle:     #0c1526;
  --aex-bg-muted:      #111d33;
  --aex-bg-inverse:    var(--aex-n-0);
  --aex-surface:       #0d182b;
  --aex-surface-raised: #122135;
  --aex-surface-sunken: #0a1120;

  --aex-text:          #e8eef7;
  --aex-text-muted:    #9fb0c6;
  --aex-text-subtle:   #7f92ab;
  --aex-text-inverse:  var(--aex-n-950);
  --aex-text-brand:    var(--aex-brand-300);

  --aex-border:        #1e304b;
  --aex-border-strong: #2b4162;
  --aex-border-brand:  var(--aex-brand-700);

  --aex-primary:       var(--aex-brand-500);
  --aex-primary-hover: var(--aex-brand-400);
  --aex-primary-soft:  rgba(18,183,106,.12);
  --aex-on-primary:    #04150d;

  --aex-accent:        var(--aex-accent-400);
  --aex-accent-soft:   rgba(122,90,248,.14);

  --aex-sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --aex-sh-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --aex-sh-md: 0 4px 14px -2px rgba(0,0,0,.5);
  --aex-sh-lg: 0 14px 32px -8px rgba(0,0,0,.6);
  --aex-sh-xl: 0 28px 60px -14px rgba(0,0,0,.7);

  --aex-grad-ink: linear-gradient(160deg, #060d1a 0%, #0a1a2c 55%, #072620 100%);
  color-scheme: dark;
}

/* ---------- TEMA INTUNECATA (preferinta sistemului) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-aex-theme="light"]) {
    --aex-bg:            var(--aex-n-950);
    --aex-bg-subtle:     #0c1526;
    --aex-bg-muted:      #111d33;
    --aex-bg-inverse:    var(--aex-n-0);
    --aex-surface:       #0d182b;
    --aex-surface-raised: #122135;
    --aex-surface-sunken: #0a1120;
    --aex-text:          #e8eef7;
    --aex-text-muted:    #9fb0c6;
    --aex-text-subtle:   #7f92ab;
    --aex-text-inverse:  var(--aex-n-950);
    --aex-text-brand:    var(--aex-brand-300);
    --aex-border:        #1e304b;
    --aex-border-strong: #2b4162;
    --aex-border-brand:  var(--aex-brand-700);
    --aex-primary:       var(--aex-brand-500);
    --aex-primary-hover: var(--aex-brand-400);
    --aex-primary-soft:  rgba(18,183,106,.12);
    --aex-on-primary:    #04150d;
    --aex-accent:        var(--aex-accent-400);
    --aex-accent-soft:   rgba(122,90,248,.14);
    --aex-sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --aex-sh-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --aex-sh-md: 0 4px 14px -2px rgba(0,0,0,.5);
    --aex-sh-lg: 0 14px 32px -8px rgba(0,0,0,.6);
    --aex-sh-xl: 0 28px 60px -14px rgba(0,0,0,.7);
    --aex-grad-ink: linear-gradient(160deg, #060d1a 0%, #0a1a2c 55%, #072620 100%);
    color-scheme: dark;
  }
}