/* ============================================================
   Sistema Financeiro — Design Tokens (bundled for Django static)
   Concatenation of the token files needed to apply the design
   system to base.html (and, later, any other page). Copy this
   file into finance/static/finance/css/ and load it in base.html
   AFTER global.css so its values are available, then load
   sistema-financeiro-nav.css after this one.
   Do not hand-edit values — pull fresh from the design system if
   tokens change.
   ============================================================ */

/* ---- tokens/fonts.css ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---- tokens/colors.css ---- */
:root {
  /* Neutral (warm "paper" gray, hue 60) */
  --n-0:   oklch(99.4% 0.004 60);
  --n-25:  oklch(98.2% 0.006 60);
  --n-50:  oklch(96.6% 0.008 65);
  --n-100: oklch(94.0% 0.010 65);
  --n-150: oklch(90.5% 0.012 65);
  --n-200: oklch(86.0% 0.013 60);
  --n-300: oklch(77.5% 0.014 55);
  --n-400: oklch(65.0% 0.015 50);
  --n-500: oklch(53.0% 0.015 45);
  --n-600: oklch(43.0% 0.014 40);
  --n-700: oklch(34.0% 0.013 35);
  --n-800: oklch(25.0% 0.012 30);
  --n-900: oklch(17.0% 0.010 25);
  --n-950: oklch(11.5% 0.008 20);

  /* Primary — Violet */
  --violet-50:  oklch(96.0% 0.020 290);
  --violet-100: oklch(92.0% 0.045 288);
  --violet-200: oklch(86.0% 0.075 286);
  --violet-300: oklch(78.0% 0.105 285);
  --violet-400: oklch(70.0% 0.135 284);
  --violet-500: oklch(62.5% 0.170 283);
  --violet-600: oklch(54.0% 0.175 282);
  --violet-700: oklch(45.0% 0.160 282);
  --violet-800: oklch(36.0% 0.135 283);
  --violet-900: oklch(27.0% 0.100 284);

  /* Accent — Amber */
  --amber-50:  oklch(97.0% 0.030 85);
  --amber-100: oklch(93.5% 0.060 82);
  --amber-200: oklch(88.0% 0.095 78);
  --amber-300: oklch(82.0% 0.125 74);
  --amber-400: oklch(77.5% 0.145 70);
  --amber-500: oklch(73.0% 0.160 66);
  --amber-600: oklch(63.0% 0.150 55);
  --amber-700: oklch(52.0% 0.130 45);
  --amber-800: oklch(41.0% 0.100 40);
  --amber-900: oklch(30.0% 0.075 35);

  /* Semantic — Positive (green) */
  --green-50:  oklch(96.0% 0.030 155);
  --green-100: oklch(90.0% 0.060 155);
  --green-200: oklch(82.0% 0.090 155);
  --green-300: oklch(72.0% 0.110 155);
  --green-400: oklch(62.0% 0.120 155);
  --green-500: oklch(53.0% 0.115 155);
  --green-600: oklch(44.0% 0.100 155);
  --green-700: oklch(35.0% 0.085 155);

  /* Semantic — Negative (coral) */
  --coral-50:  oklch(96.0% 0.030 25);
  --coral-100: oklch(90.5% 0.065 25);
  --coral-200: oklch(83.0% 0.100 25);
  --coral-300: oklch(74.0% 0.130 25);
  --coral-400: oklch(66.0% 0.150 25);
  --coral-500: oklch(58.0% 0.165 24);
  --coral-600: oklch(49.0% 0.150 22);
  --coral-700: oklch(40.0% 0.130 20);

  /* Semantic — Info (blue) */
  --blue-50:  oklch(96.0% 0.020 235);
  --blue-100: oklch(90.0% 0.045 235);
  --blue-300: oklch(75.0% 0.095 235);
  --blue-500: oklch(56.0% 0.130 235);
  --blue-700: oklch(40.0% 0.110 235);

  /* Semantic aliases */
  --surface-canvas: var(--n-25);
  --surface-page: var(--n-0);
  --surface-card: #FFFFFF;
  --surface-card-sunken: var(--n-50);
  --surface-inverse: var(--n-900);
  --surface-primary: var(--violet-500);
  --surface-primary-hover: var(--violet-600);
  --surface-primary-press: var(--violet-700);
  --surface-accent: var(--amber-500);
  --surface-overlay: oklch(17% 0.01 25 / 0.45);

  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-400);
  --text-on-primary: #FFFFFF;
  --text-on-accent: var(--n-900);
  --text-link: var(--violet-600);
  --text-link-hover: var(--violet-700);
  --text-positive: var(--green-600);
  --text-negative: var(--coral-600);

  --border-subtle: var(--n-150);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --border-focus: var(--violet-500);
  --border-on-inverse: oklch(100% 0 0 / 0.14);

  --bg-positive: var(--green-50);
  --bg-negative: var(--coral-50);
  --bg-info: var(--blue-50);
  --bg-accent-soft: var(--amber-50);
  --bg-primary-soft: var(--violet-50);

  --fg-positive: var(--green-600);
  --fg-negative: var(--coral-600);
  --fg-info: var(--blue-700);
  --fg-accent: var(--amber-700);
  --fg-primary: var(--violet-600);

  --cat-1: var(--violet-500);
  --cat-2: var(--amber-500);
  --cat-3: var(--green-500);
  --cat-4: var(--blue-500);
  --cat-5: var(--coral-400);
  --cat-6: var(--n-400);
}

/* ---- tokens/typography.css ---- */
:root {
  --font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", monospace;

  --text-display-xl: 3.5rem;
  --text-display-lg: 2.75rem;
  --text-display-md: 2.125rem;
  --text-display-sm: 1.625rem;
  --text-title:       1.25rem;
  --text-body-lg:     1.0625rem;
  --text-body:        0.9375rem;
  --text-body-sm:      0.8125rem;
  --text-micro:        0.6875rem;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

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

  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.03em;
}

.num-tabular {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gap-tight: var(--space-2);
  --gap-default: var(--space-4);
  --gap-section: var(--space-12);
  --page-margin-mobile: var(--space-5);
  --page-margin-desktop: var(--space-16);
  /* Densidade alinhada ao Planejamento do REF (22px 24px), um pouco mais baixa que 24px uniforme */
  --card-padding: 22px 24px;
  --card-padding-sm: 12px 16px;
}

/* ---- tokens/radii.css ---- */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --radius-button: var(--radius-full);
  --radius-input: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-card-lg: var(--radius-xl);
  --radius-chip: var(--radius-full);
  --radius-dialog: var(--radius-xl);
}

/* ---- tokens/shadows.css ---- */
:root {
  --shadow-color: 25 15% 20%;

  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.05);
  --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.06),
               0 1px 2px hsl(var(--shadow-color) / 0.04);
  --shadow-md: 0 4px 10px hsl(var(--shadow-color) / 0.07),
               0 2px 4px hsl(var(--shadow-color) / 0.05);
  --shadow-lg: 0 12px 24px hsl(var(--shadow-color) / 0.10),
               0 4px 8px hsl(var(--shadow-color) / 0.05);
  --shadow-xl: 0 24px 48px hsl(var(--shadow-color) / 0.14),
               0 8px 16px hsl(var(--shadow-color) / 0.06);

  --shadow-focus-ring: 0 0 0 3px var(--violet-100);
  --shadow-inner-sunken: inset 0 1px 3px hsl(var(--shadow-color) / 0.08);

  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-dialog: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-lg);
}

/* ---- tokens/motion.css ---- */
:root {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-default: 220ms;
  --duration-slow: 360ms;
  --duration-chart: 700ms;

  --transition-default: var(--duration-default) var(--ease-standard);
  --transition-hover: var(--duration-fast) var(--ease-out);
}