/* ============================================================
   KMARERO ADMIN · Design Tokens  (suite Athenia / tema Kamikaze)
   Vanilla, self-contained — system fonts, no CDNs.
   ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────── */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-cjk: "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "MS Mincho", serif;

  --w-400: 400; --w-500: 500; --w-600: 600; --w-700: 700; --w-800: 800;

  --t-xs:   0.6875rem;   /* 11 */
  --t-sm:   0.8125rem;   /* 13 */
  --t-base: 0.9375rem;   /* 15 */
  --t-md:   1.0625rem;   /* 17 */
  --t-lg:   1.25rem;     /* 20 */
  --t-xl:   1.5rem;      /* 24 */
  --t-2xl:  2rem;        /* 32 */
  --t-3xl:  2.75rem;     /* 44 */
  --t-4xl:  3.5rem;      /* 56 */

  /* ── Spacing ────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --d-1: 160ms; --d-2: 280ms; --d-3: 480ms;

  /* ── Brand constants (theme-independent) ────────────────── */
  --accent:        #E0142F;   /* bermellón */
  --accent-bright: #FF2D40;   /* neón */
  --accent-press:  #B00F24;
  --accent-soft:   rgba(224,20,47,.14);
  --accent-glow:   rgba(255,45,64,.35);
  --on-accent:     #FFFFFF;
  --success:       #3DD68C;
  --warning:       #FFB020;
  --gold:          #C9A227;   /* oro Athenia */

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
}

/* ── DARK (default Kamikaze) ──────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-deep:     #070708;
  --bg-base:     #0C0D10;
  --bg-surface:  #141519;
  --bg-elevated: #1B1C22;
  --bg-raised:   #23242B;
  --bg-overlay:  rgba(7,7,8,.72);

  --text-1: #F7F5F3;
  --text-2: #A8A39E;
  --text-3: #67635F;

  --border:    #26262C;
  --border-2:  #32323A;
  --hairline:  rgba(255,255,255,.07);

  --veil: linear-gradient(180deg, rgba(7,7,8,0) 28%, rgba(7,7,8,.55) 72%, rgba(7,7,8,.86) 100%);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 28px rgba(0,0,0,.5);
  --shadow-3: 0 24px 64px rgba(0,0,0,.62);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.7);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── LIGHT (warm, coherent) ───────────────────────────────── */
[data-theme="light"] {
  --bg-deep:     #ECE7E1;
  --bg-base:     #F4F1ED;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-raised:   #F4F1ED;
  --bg-overlay:  rgba(40,36,33,.42);

  --text-1: #16151A;
  --text-2: #6B6661;
  --text-3: #A29C95;

  --border:    #E5DFD8;
  --border-2:  #D8D1C8;
  --hairline:  rgba(0,0,0,.07);

  --veil: linear-gradient(180deg, rgba(20,16,12,0) 30%, rgba(20,16,12,.4) 74%, rgba(20,16,12,.72) 100%);
  --shadow-1: 0 1px 2px rgba(60,50,40,.08);
  --shadow-2: 0 10px 30px rgba(70,55,40,.12);
  --shadow-3: 0 24px 60px rgba(70,55,40,.16);
  --shadow-pop: 0 24px 64px rgba(60,45,35,.22);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.6);
}