/* FlixPay: tokens do sistema de design, com a paleta da marca. Gerado em 29/10/2026. */

:root {
  --ink-900: #000000;
  --ink-800: #0B0B0C;
  --ink-700: #171719;
  --ink-600: #26262A;
  --ink-500: #4A4A52;
  --ink-400: #6E6E78;
  --ink-350: #8A8A94;
  --ink-300: #9A9AA4;
  --ink-200: #C7C7CE;
  --ink-100: #E4E4EA;
  --paper-100: #FFFFFF;
  --paper-200: #F5F5F8;
  --paper-300: #EDEDF2;
  --lime-500: #D7FE03;
  --olive-050: #EFF6E1;
  --olive-400: #9CC455;
  --olive-500: #83AF3B;
  --olive-700: #4F7020;
  --olive-deep: #1F2A12;
  --red-050: #FDEDEB;
  --red-200: #EFA79F;
  --red-500: #E14434;
  --red-600: #C9382A;
  --red-700: #B23124;
  --red-deep: #33140F;
  --amber-050: #FCF2E2;
  --amber-200: #F3D9A6;
  --amber-500: #E39B22;
  --amber-800: #8A5A0F;
  --amber-deep: #2E2210;
  --font-family: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --type-display-size: 64px;
  --type-display-weight: 400;
  --type-display-lh: 1.02;
  --type-display-tracking: -0.03em;
  --type-h1-size: 46px;
  --type-h1-weight: 400;
  --type-h1-lh: 1.04;
  --type-h1-tracking: -0.025em;
  --type-h2-size: 22px;
  --type-h2-weight: 500;
  --type-h2-lh: 1.18;
  --type-h2-tracking: -0.015em;
  --type-h3-size: 18px;
  --type-h3-weight: 500;
  --type-h3-lh: 1.3;
  --type-h3-tracking: 0;
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-lh: 1.45;
  --type-body-tracking: -0.005em;
  --type-label-size: 14px;
  --type-label-weight: 500;
  --type-label-lh: 1.4;
  --type-label-tracking: 0;
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-lh: 1.4;
  --type-caption-tracking: 0;
  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-lh: 1.2;
  --type-eyebrow-tracking: 0.08em;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --gap-grid: 16px;
  --gap-stack: 12px;
  --pad-card: 20px;
  --pad-screen: 16px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --control-h-xl: 56px;
  --touch-min: 44px;
  --content-max: 1440px;
  --radius-card: 24px;
  --radius-card-inner: 16px;
  --radius-field: 16px;
  --radius-sheet: 28px;
  --radius-control: 999px;
  --radius-checkbox: 6px;
  --shadow-card: 0 8px 24px -12px rgb(0 0 0 / 0.18);
  --shadow-raised: 0 12px 32px -8px rgb(0 0 0 / 0.24);
  --shadow-sheet: 0 -16px 48px -12px rgb(0 0 0 / 0.28);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-sheet: 420ms;
  --dur-reduced: 100ms;
  --dur-pulse: 1600ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-accent: #4FB59A;
  --brand-accent-hover: #36957D;
  --brand-accent-press: #2A826C;
  --brand-secondary: #0E4446;
  --brand-accent-outline-light: #000000;
  --brand-accent-outline-dark: transparent;
  --brand-secondary-outline-light: transparent;
  --brand-secondary-outline-dark: #FFFFFF;
  --brand-accent-50: #D3EEE5;
  --brand-secondary-50: #C8D7D7;
  --brand-accent-100: #BBE2D5;
  --brand-secondary-100: #A2B7B8;
  --brand-accent-200: #A2D7C6;
  --brand-secondary-200: #7D999A;
  --brand-accent-300: #89CCB7;
  --brand-secondary-300: #5A7C7D;
  --brand-accent-400: #6EC0A8;
  --brand-secondary-400: #365F61;
  --brand-accent-500: #4FB59A;
  --brand-secondary-500: #0E4446;
  --brand-accent-600: #36957D;
  --brand-secondary-600: #0B3C3E;
  --brand-accent-700: #1C7762;
  --brand-secondary-700: #083537;
  --brand-accent-800: #005947;
  --brand-secondary-800: #052E2F;
  --brand-accent-900: #003C2F;
  --brand-secondary-900: #042628;
}

:root,
[data-scheme="light"] {
  --surface-app: #F5F5F8;
  --surface-card: #FFFFFF;
  --surface-sunken: #EDEDF2;
  --surface-strong: #000000;
  --text-strong: #000000;
  --text-body: #171719;
  --text-muted: #6E6E78;
  --text-muted-sunken: #4A4A52;
  --text-disabled: #9A9AA4;
  --text-on-strong: #FFFFFF;
  --text-on-accent: #000000;
  --text-on-danger: #FFFFFF;
  --border-hairline: #EDEDF2;
  --border-field: #8A8A94;
  --focus-ring: #000000;
  --value-up: #4F7020;
  --value-down: #C9382A;
  --status-pending-text: #8A5A0F;
  --status-success-bg: #EFF6E1;
  --status-danger-bg: #FDEDEB;
  --status-pending-bg: #FCF2E2;
  --status-neutral-bg: #EDEDF2;
  --status-danger-fill: #C9382A;
  --status-danger-dot: #E14434;
  --status-pending-dot: #E39B22;
  --chart-track: #EDEDF2;
  --scrim: rgb(0 0 0 / 0.48);
  --scrollbar-thumb: rgb(0 0 0 / 0.16);
  --scrollbar-thumb-hover: rgb(0 0 0 / 0.36);
  color-scheme: light;
}

[data-scheme="dark"] {
  --surface-app: #0B0B0C;
  --surface-card: #171719;
  --surface-sunken: #26262A;
  --surface-strong: #FFFFFF;
  --text-strong: #FFFFFF;
  --text-body: #E4E4EA;
  --text-muted: #C7C7CE;
  --text-muted-sunken: #C7C7CE;
  --text-disabled: #6E6E78;
  --text-on-strong: #000000;
  --text-on-accent: #000000;
  --text-on-danger: #FFFFFF;
  --border-hairline: #26262A;
  --border-field: #8A8A94;
  --focus-ring: #FFFFFF;
  --value-up: #9CC455;
  --value-down: #EFA79F;
  --status-pending-text: #F3D9A6;
  --status-success-bg: #1F2A12;
  --status-danger-bg: #33140F;
  --status-pending-bg: #2E2210;
  --status-neutral-bg: #26262A;
  --status-danger-fill: #C9382A;
  --status-danger-dot: #E14434;
  --status-pending-dot: #E39B22;
  --chart-track: #26262A;
  --scrim: rgb(0 0 0 / 0.64);
  --scrollbar-thumb: rgb(255 255 255 / 0.16);
  --scrollbar-thumb-hover: rgb(255 255 255 / 0.36);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-scheme="system"] {
    --surface-app: #0B0B0C;
    --surface-card: #171719;
    --surface-sunken: #26262A;
    --surface-strong: #FFFFFF;
    --text-strong: #FFFFFF;
    --text-body: #E4E4EA;
    --text-muted: #C7C7CE;
    --text-muted-sunken: #C7C7CE;
    --text-disabled: #6E6E78;
    --text-on-strong: #000000;
    --text-on-accent: #000000;
    --text-on-danger: #FFFFFF;
    --border-hairline: #26262A;
    --border-field: #8A8A94;
    --focus-ring: #FFFFFF;
    --value-up: #9CC455;
    --value-down: #EFA79F;
    --status-pending-text: #F3D9A6;
    --status-success-bg: #1F2A12;
    --status-danger-bg: #33140F;
    --status-pending-bg: #2E2210;
    --status-neutral-bg: #26262A;
    --status-danger-fill: #C9382A;
    --status-danger-dot: #E14434;
    --status-pending-dot: #E39B22;
    --chart-track: #26262A;
    --scrim: rgb(0 0 0 / 0.64);
    --scrollbar-thumb: rgb(255 255 255 / 0.16);
    --scrollbar-thumb-hover: rgb(255 255 255 / 0.36);
    color-scheme: dark;
  }
}

@media (max-width: 767px) {
  :root {
    --type-h1-size: 32px;
  }
}

@media (min-width: 768px) {
  :root {
    --pad-screen: 24px;
  }
}