/* =====================================================
   Admin v3 — Design tokens (Areia + Café + Terracotta + Magenta + Pix)
   Convertido de design_handoff_responsive/tokens.css.
   Namespace SEM prefixo (--bg-app, --text, --accent) para
   diferenciar do admin-v2 (que usa --admin-*) durante migração.
   ===================================================== */

:root {
    /* ============ Color primitives ============ */
    /* Sand / warm neutral (light backbone) */
    --sand-50:  #faf7f2;
    --sand-100: #f4efe6;
    --sand-200: #e9e1d2;
    --sand-300: #d8ccb6;
    --sand-400: #b8a78a;
    --sand-500: #8e7a5b;

    /* Café (deep neutral / dark backbone) */
    --cafe-100: #2a231b;
    --cafe-200: #221c15;
    --cafe-300: #1a1510;
    --cafe-400: #14100c;
    --cafe-500: #0e0b08;
    --cafe-text: #efe6d4;
    --cafe-muted: #b8a78a;
    --cafe-line: #3a2f24;

    /* Terracotta (warm secondary tone) */
    --terra-50:  #fbeee5;
    --terra-100: #f5d4be;
    --terra-200: #e9a988;
    --terra-300: #d97f56;
    --terra-400: #c25a31;
    --terra-500: #a3441f;
    --terra-600: #7e3013;

    /* Magenta Mimuss — ação primária, brand-link */
    --magenta-300: #ff5da3;
    --magenta-400: #ec2f87;
    --magenta-500: #d2186e;
    --magenta-600: #a30f54;

    /* Pix verde — primeira-classe, funcional */
    --pix-300: #4cc9a4;
    --pix-400: #00b481;
    --pix-500: #008c63;
    --pix-600: #006e4d;

    /* Status semaphore */
    --ok-300:    #8fc8a2;
    --ok-400:    #4d9d6c;
    --warn-300:  #efc366;
    --warn-400:  #d99a1f;
    --bad-300:   #e08778;
    --bad-400:   #c44a3a;
    --info-300:  #82b1cb;
    --info-400:  #3d7fa3;

    /* ============ Typography ============ */
    --font-display: "Sora", "Inter Tight", system-ui, sans-serif;
    --font-ui:      "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  13px;
    --text-md:  14px;
    --text-lg:  16px;
    --text-xl:  20px;
    --text-2xl: 26px;
    --text-3xl: 34px;
    --text-4xl: 44px;

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.5;

    --fw-regular:  420;
    --fw-medium:   520;
    --fw-semibold: 620;
    --fw-bold:     720;

    /* ============ Spacing (4px scale) ============ */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  32px;
    --s-8:  40px;
    --s-9:  56px;
    --s-10: 72px;

    /* ============ Radii ============ */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 999px;

    /* ============ Motion ============ */
    --ease-out:    cubic-bezier(.2,.7,.3,1);
    --ease-in-out: cubic-bezier(.6,.05,.4,.95);
    --t-instant: 80ms;
    --t-fast:    140ms;
    --t-base:    220ms;
    --t-slow:    360ms;

    /* ============ Density (default = comfortable) ============ */
    --row-h-comfortable: 44px;
    --row-h-compact:     32px;
    --row-h:             var(--row-h-comfortable);
    --pad-y-comfortable: 12px;
    --pad-y-compact:     6px;
    --pad-y:             var(--pad-y-comfortable);

    /* ============ Layout ============ */
    --sidebar-w-expanded: 240px;
    --sidebar-w-collapsed: 56px;
    --sidebar-w: var(--sidebar-w-expanded);
    --topbar-h: 56px;
    --bottomnav-h: 64px;
    --content-max: 1480px;

    /* ============ Z-index scale ============ */
    --z-base:    1;
    --z-sticky:  50;
    --z-overlay: 80;
    --z-modal:   100;
    --z-toast:   120;
}

/* ============ Light theme — Areia ============ */
:root,
:root[data-theme="light"] {
    --bg-app:     #f4efe6;          /* sand-100 */
    --bg-surface: #faf7f2;          /* sand-50  */
    --bg-raised:  #ffffff;
    --bg-sunken:  #ece5d8;
    --bg-hover:   rgba(42, 35, 27, 0.045);
    --bg-active:  rgba(42, 35, 27, 0.08);
    --bg-sidebar: #ede5d4;
    --bg-topbar:  rgba(244, 239, 230, 0.85);

    --line:        #e0d6c4;
    --line-strong: #c9bba2;

    --text:           #2a231b;        /* cafe-100 */
    --text-mute:      #6e6253;
    --text-faint:     #9c8e7a;
    --text-on-accent: #ffffff;

    --accent:       var(--magenta-500);
    --accent-hover: var(--magenta-600);
    --accent-soft:  rgba(210, 24, 110, 0.10);
    --accent-fg:    #ffffff;

    --terra:      var(--terra-400);
    --terra-soft: var(--terra-50);

    --pix:      var(--pix-500);
    --pix-soft: #d8f0e6;

    --ok:        var(--ok-400);
    --ok-soft:   #dceee2;
    --warn:      var(--warn-400);
    --warn-soft: #f7e9c8;
    --bad:       var(--bad-400);
    --bad-soft:  #f4dad4;
    --info:      var(--info-400);
    --info-soft: #d8e6ee;

    --shadow-sm:  0 1px 2px rgba(60, 40, 20, 0.05), 0 1px 1px rgba(60, 40, 20, 0.03);
    --shadow-md:  0 4px 14px rgba(60, 40, 20, 0.08), 0 1px 2px rgba(60, 40, 20, 0.04);
    --shadow-lg:  0 16px 36px rgba(60, 40, 20, 0.14), 0 4px 8px rgba(60, 40, 20, 0.06);
    --shadow-pop: 0 24px 60px rgba(60, 40, 20, 0.18);

    --grid-line: rgba(42, 35, 27, 0.06);
}

/* ============ Dark theme — Café ============ */
:root[data-theme="dark"] {
    --bg-app:     #1a1510;          /* cafe-300 */
    --bg-surface: #221c15;          /* cafe-200 */
    --bg-raised:  #2a231b;          /* cafe-100 */
    --bg-sunken:  #14100c;
    --bg-hover:   rgba(239, 230, 212, 0.05);
    --bg-active:  rgba(239, 230, 212, 0.09);
    --bg-sidebar: #15110c;
    --bg-topbar:  rgba(26, 21, 16, 0.82);

    --line:        #3a2f24;
    --line-strong: #52432f;

    --text:           #efe6d4;
    --text-mute:      #b8a78a;
    --text-faint:     #806e54;
    --text-on-accent: #ffffff;

    --accent:       var(--magenta-400);
    --accent-hover: var(--magenta-300);
    --accent-soft:  rgba(236, 47, 135, 0.16);
    --accent-fg:    #1a1510;

    --terra:      var(--terra-300);
    --terra-soft: rgba(217, 127, 86, 0.14);

    --pix:      var(--pix-400);
    --pix-soft: rgba(0, 180, 129, 0.14);

    --ok:        #6dba87;
    --ok-soft:   rgba(77, 157, 108, 0.18);
    --warn:      #efc366;
    --warn-soft: rgba(217, 154, 31, 0.18);
    --bad:       #e57e6b;
    --bad-soft:  rgba(196, 74, 58, 0.20);
    --info:      #82b1cb;
    --info-soft: rgba(61, 127, 163, 0.18);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 28px 60px rgba(0, 0, 0, 0.65);

    --grid-line: rgba(239, 230, 212, 0.04);
}

/* ============ Density: compact (desktop only — mobile força comfortable abaixo) ============ */
:root[data-density="compact"] {
    --row-h: var(--row-h-compact);
    --pad-y: var(--pad-y-compact);
}

/* ============ Mobile: força comfortable independente do data-density ============ */
@media (max-width: 767px) {
    :root,
    :root[data-density="compact"] {
        --row-h: var(--row-h-comfortable);
        --pad-y: var(--pad-y-comfortable);
    }
}