/* Confia — generated from tokens.json */
:root, [data-theme="light"] { --verde: #4dc345; --lima: #acf583; --menta: #3ad67f; --creme: #effdd8; --violeta: #462be5; --cinza: #b0b4b6; --grafite: #353c43; --marinho: #0d1a28; --surface: var(--creme); --surface-raised: #ffffff; --surface-feature: var(--marinho); --on-feature: var(--creme); --surface-brand: var(--verde); --on-brand: var(--marinho); --ink: var(--marinho); --ink-muted: var(--grafite); --ink-subtle: #5a636c; --ink-disabled: var(--cinza); --line: var(--cinza); --line-strong: #6b747c; --primary: var(--verde); --primary-hover: #43b23b; --on-primary: var(--marinho); --primary-text: #1f6e1b; --primary-soft: var(--lima); --accent: var(--violeta); --accent-soft: #e8e4ff; --on-accent: #ffffff; --link: var(--accent); --focus: var(--violeta); --success: var(--primary-text); --success-soft: var(--primary-soft); --warning: #8a5300; --warning-soft: #ffefc2; --danger: #a32019; --danger-soft: #fde4e1; --on-danger: #ffffff; --info: var(--accent); --info-soft: var(--accent-soft); --scrim: rgba(13, 26, 40, 0.56); --shadow-sm: 0 1px 2px #0d1a280f, 0 2px 8px #0d1a280d; --shadow-lg: 0 12px 32px -4px #0d1a2833; --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #462be5; }
[data-theme="dark"] { --surface: var(--marinho); --surface-raised: #162638; --surface-feature: #1c2f45; --ink: var(--creme); --ink-muted: #c9d1c0; --ink-subtle: #a9b2bb; --ink-disabled: #5b6878; --line: #2a3b50; --line-strong: #7d8a99; --primary-hover: #5fd157; --primary-text: var(--verde); --primary-soft: #1a3320; --accent: #9d8fff; --accent-soft: #221a54; --on-accent: var(--marinho); --focus: var(--lima); --warning: #ffc857; --warning-soft: #3a2c08; --danger: #ff8a80; --danger-soft: #3d1414; --on-danger: var(--marinho); --shadow-sm: 0 1px 2px #00000066; --shadow-lg: 0 16px 40px -4px #000000b3; --focus-ring: 0 0 0 2px #0d1a28, 0 0 0 4px #acf583; }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 9999px; --control-sm: 36px; --control-md: 44px; --control-lg: 52px; --header-height: 64px; --tabbar-height: 64px; --logo-min: 80px; --simbolo-min: 30px; --content-max: 1200px; --app-max: 480px; --font-display: "NextF Games", "Archivo", system-ui, sans-serif; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 60px; font-weight: 900; letter-spacing: 0.01em; }
.display-lg { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 900; letter-spacing: 0.01em; }
.display-md { font-family: var(--font-display); font-size: 28px; line-height: 30px; font-weight: 900; letter-spacing: 0.02em; }
.heading-xl { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.01em; }
.heading-lg { font-family: var(--font-sans); font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -0.01em; }
.heading-md { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 600; }
.heading-sm { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label-lg { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.24em; }
.amount-xl { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.amount { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }