/* ============================================================
   PEIXE DA CHICALA — DESIGN SYSTEM v2
   ============================================================ */

:root {
    --brand:            #FF3B30;
    --brand-deep:       #D62B20;
    --brand-soft:       rgba(255, 59, 48, .08);
    --brand-line:       rgba(255, 59, 48, .22);
    --brand-glow:       rgba(255, 59, 48, .35);

    --ember:            #FF6B1A;
    --ember-soft:       rgba(255, 107, 26, .12);

    --gold:             #E8B961;
    --gold-soft:        rgba(232, 185, 97, .10);
    --gold-line:        rgba(232, 185, 97, .25);

    --bg:               #FAFAF9;
    --bg-alt:           #F4F4F2;

    --surface:          #FFFFFF;
    --surface-2:        #FBFBF9;
    --surface-sunken:   #F0F0EE;
    --surface-hover:    #F6F6F4;
    --surface-glass:    rgba(255, 255, 255, .72);

    --side-bg:          #FFFFFF;
    --side-border:      #EBEBE8;
    --side-text:        #2A2A28;
    --side-mut:         #8A8A85;
    --side-hover:       #F6F6F4;
    --side-active:      rgba(255, 59, 48, .06);

    --top-bg:           rgba(255, 255, 255, .82);
    --top-border:       #EBEBE8;

    --ink:              #0A0A0B;
    --ink-soft:         #4A4A48;
    --ink-mut:          #8A8A85;
    --ink-faint:        #B5B5B0;

    --line:             #EBEBE8;
    --line-strong:      #D8D8D3;

    --ok:               #16A34A;
    --ok-bg:            #ECFDF3;
    --ok-line:          #A6E7C1;

    --warn:             #D97706;
    --warn-bg:          #FEF7E7;
    --warn-line:        #F0D9A0;

    --err:              #DC2626;
    --err-bg:           #FEECEC;
    --err-line:         #F4BFBF;

    --info:             #2563EB;
    --info-bg:          #EFF5FE;
    --info-line:        #B9D0F5;

    --r-xs:  3px;
    --r-sm:  5px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;
    --r-2xl: 22px;
    --r-full: 999px;

    --sh-xs: 0 1px 2px rgba(10, 10, 11, .04);
    --sh-sm: 0 1px 3px rgba(10, 10, 11, .06), 0 1px 2px rgba(10, 10, 11, .04);
    --sh-md: 0 4px 14px rgba(10, 10, 11, .06), 0 2px 4px rgba(10, 10, 11, .03);
    --sh-lg: 0 16px 40px rgba(10, 10, 11, .10), 0 6px 12px rgba(10, 10, 11, .04);
    --sh-glow: 0 0 0 1px var(--brand-line), 0 8px 24px var(--brand-glow);

    --font-sans:  "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Instrument Serif", "Georgia", serif;
    --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-2xs: 10px;
    --fs-xs:  11px;
    --fs-sm:  12px;
    --fs-base: 13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  19px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 40px;
    --fs-5xl: 52px;
    --fs-6xl: 64px;

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

    --track-tight: -0.03em;
    --track-snug:  -0.015em;
    --track-wide:   0.02em;
    --track-wider:  0.08em;
    --track-widest: 0.16em;

    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  28px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    --side-w:     248px;
    --side-w-min: 72px;
    --top-h:      64px;
    --content-max: 1480px;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 140ms var(--ease-out);
    --t-base: 240ms var(--ease-out);
    --t-slow: 420ms var(--ease-out);

    --z-base: 1;
    --z-side: 40;
    --z-top:  50;
    --z-drop: 60;
    --z-modal: 80;
    --z-toast: 90;

    color-scheme: light;
}

[data-theme="dark"] {
    --brand:            #FF4B42;
    --brand-deep:       #E5323F;
    --brand-soft:       rgba(255, 75, 66, .10);
    --brand-line:       rgba(255, 75, 66, .28);
    --brand-glow:       rgba(255, 75, 66, .28);

    --ember:            #FF7A2E;
    --ember-soft:       rgba(255, 122, 46, .14);

    --gold:             #E8B961;
    --gold-soft:        rgba(232, 185, 97, .12);
    --gold-line:        rgba(232, 185, 97, .28);

    --bg:               #09090A;
    --bg-alt:           #0D0D0E;

    --surface:          #0F0F11;
    --surface-2:        #141416;
    --surface-sunken:   #0B0B0C;
    --surface-hover:    #16161A;
    --surface-glass:    rgba(15, 15, 17, .72);

    --side-bg:          #0B0B0C;
    --side-border:      #1A1A1E;
    --side-text:        #C8C8C4;
    --side-mut:         #6A6A66;
    --side-hover:       #131316;
    --side-active:      rgba(255, 75, 66, .10);

    --top-bg:           rgba(9, 9, 10, .72);
    --top-border:       #1A1A1E;

    --ink:              #F2F2F0;
    --ink-soft:         #A8A8A4;
    --ink-mut:          #757572;
    --ink-faint:        #4A4A48;

    --line:             #1A1A1E;
    --line-strong:      #26262B;

    --ok:               #4ADE80;
    --ok-bg:            rgba(74, 222, 128, .10);
    --ok-line:          rgba(74, 222, 128, .28);

    --warn:             #FBBF24;
    --warn-bg:          rgba(251, 191, 36, .10);
    --warn-line:        rgba(251, 191, 36, .28);

    --err:              #F87171;
    --err-bg:           rgba(248, 113, 113, .10);
    --err-line:         rgba(248, 113, 113, .28);

    --info:             #60A5FA;
    --info-bg:          rgba(96, 165, 250, .10);
    --info-line:        rgba(96, 165, 250, .28);

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 4px 14px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .4);
    --sh-lg: 0 16px 40px rgba(0, 0, 0, .7), 0 6px 12px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    font-feature-settings: "cv11", "ss01";
    transition: background var(--t-base), color var(--t-base);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brand); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.t-mut { color: var(--ink-mut); }
.t-soft { color: var(--ink-soft); }
.t-faint { color: var(--ink-faint); }
.t-brand { color: var(--brand); }
.t-gold { color: var(--gold); }