/* TBrWeb Design System - v1.0.0
 * Fonte cromatica digital: arquivos SVG oficiais da marca (2026).
 * Barlow e a familia tipografica oficial definida no brandbook.
 */

:root {
  color-scheme: light;

  /* Brand primitives */
  --tbr-brand-navy: #00355b;
  --tbr-brand-green: #87b037;
  --tbr-brand-yellow: #f0ce00;
  --tbr-brand-blue: #1782b5;
  --tbr-brand-ink: #211915;
  --tbr-brand-white: #ffffff;

  /* Navy scale */
  --tbr-navy-50: #e6ebef;
  --tbr-navy-100: #ccd7de;
  --tbr-navy-200: #99aebb;
  --tbr-navy-300: #668699;
  --tbr-navy-400: #335e78;
  --tbr-navy-500: #00355b;
  --tbr-navy-600: #003052;
  --tbr-navy-700: #002a49;
  --tbr-navy-800: #002540;
  --tbr-navy-900: #001d32;
  --tbr-navy-950: #00121f;

  /* Green scale */
  --tbr-green-50: #f3f7eb;
  --tbr-green-100: #e7efda;
  --tbr-green-200: #cfdcae;
  --tbr-green-300: #b7ca87;
  --tbr-green-400: #9fb95f;
  --tbr-green-500: #87b037;
  --tbr-green-600: #7a9e32;
  --tbr-green-700: #6c8d2c;
  --tbr-green-800: #5f7b27;
  --tbr-green-900: #4a611e;
  --tbr-green-950: #304014;

  /* Yellow scale */
  --tbr-yellow-50: #fffbea;
  --tbr-yellow-100: #fff6cc;
  --tbr-yellow-200: #ffed99;
  --tbr-yellow-300: #fce466;
  --tbr-yellow-400: #f7d833;
  --tbr-yellow-500: #f0ce00;
  --tbr-yellow-600: #d8b900;
  --tbr-yellow-700: #b49b00;
  --tbr-yellow-800: #907c00;
  --tbr-yellow-900: #685a00;
  --tbr-yellow-950: #3d3500;

  /* Blue scale */
  --tbr-blue-50: #e8f3f8;
  --tbr-blue-100: #d1e6f0;
  --tbr-blue-200: #a2cde1;
  --tbr-blue-300: #74b4d3;
  --tbr-blue-400: #459bc4;
  --tbr-blue-500: #1782b5;
  --tbr-blue-600: #1575a3;
  --tbr-blue-700: #126891;
  --tbr-blue-800: #0f5b7f;
  --tbr-blue-900: #0c4663;
  --tbr-blue-950: #072d40;

  /* Neutrals */
  --tbr-neutral-0: #ffffff;
  --tbr-neutral-50: #f6f8f9;
  --tbr-neutral-100: #edf1f3;
  --tbr-neutral-200: #d8e1e6;
  --tbr-neutral-300: #bac9d1;
  --tbr-neutral-400: #8ca1ad;
  --tbr-neutral-500: #647b88;
  --tbr-neutral-600: #485f6c;
  --tbr-neutral-700: #324955;
  --tbr-neutral-800: #1c3543;
  --tbr-neutral-900: #0b2433;
  --tbr-neutral-950: #061721;

  /* Semantic colors - light */
  --tbr-color-canvas: var(--tbr-neutral-50);
  --tbr-color-surface: var(--tbr-neutral-0);
  --tbr-color-surface-subtle: var(--tbr-neutral-100);
  --tbr-color-surface-strong: var(--tbr-navy-500);
  --tbr-color-text: var(--tbr-neutral-900);
  --tbr-color-text-muted: var(--tbr-neutral-600);
  --tbr-color-text-inverse: var(--tbr-neutral-0);
  --tbr-color-border: var(--tbr-neutral-200);
  --tbr-color-border-strong: var(--tbr-neutral-300);
  --tbr-color-primary: var(--tbr-navy-500);
  --tbr-color-primary-hover: var(--tbr-navy-700);
  --tbr-color-primary-pressed: var(--tbr-navy-800);
  --tbr-color-on-primary: var(--tbr-neutral-0);
  --tbr-color-accent: var(--tbr-green-500);
  --tbr-color-accent-hover: var(--tbr-green-600);
  --tbr-color-on-accent: var(--tbr-navy-500);
  --tbr-color-focus: var(--tbr-yellow-500);
  --tbr-color-link: var(--tbr-blue-800);
  --tbr-color-link-hover: var(--tbr-navy-500);
  --tbr-color-info: var(--tbr-blue-800);
  --tbr-color-info-subtle: var(--tbr-blue-50);
  --tbr-color-success: #4f711a;
  --tbr-color-success-subtle: #eef5df;
  --tbr-color-warning: #765f00;
  --tbr-color-warning-subtle: var(--tbr-yellow-50);
  --tbr-color-danger: #b42318;
  --tbr-color-danger-hover: #8f1c14;
  --tbr-color-danger-subtle: #fff1f0;
  --tbr-color-disabled-bg: var(--tbr-neutral-200);
  --tbr-color-disabled-text: var(--tbr-neutral-500);
  --tbr-color-overlay: rgb(0 18 31 / 68%);

  /* Typography */
  --tbr-font-sans: "Barlow", "Arial Narrow", sans-serif;
  --tbr-font-mono: "IBM Plex Mono", "Cascadia Code", monospace;
  --tbr-font-weight-regular: 400;
  --tbr-font-weight-medium: 500;
  --tbr-font-weight-semibold: 600;
  --tbr-font-weight-bold: 700;
  --tbr-font-size-100: 0.75rem;
  --tbr-font-size-200: 0.875rem;
  --tbr-font-size-300: 1rem;
  --tbr-font-size-400: 1.125rem;
  --tbr-font-size-500: 1.25rem;
  --tbr-font-size-600: 1.5rem;
  --tbr-font-size-700: 2rem;
  --tbr-font-size-800: 2.75rem;
  --tbr-font-size-900: 3.75rem;
  --tbr-line-height-tight: 1.08;
  --tbr-line-height-heading: 1.2;
  --tbr-line-height-body: 1.55;
  --tbr-line-height-relaxed: 1.7;
  --tbr-letter-spacing-tight: -0.025em;
  --tbr-letter-spacing-label: 0.06em;

  /* 4px spacing system */
  --tbr-space-0: 0;
  --tbr-space-1: 0.25rem;
  --tbr-space-2: 0.5rem;
  --tbr-space-3: 0.75rem;
  --tbr-space-4: 1rem;
  --tbr-space-5: 1.25rem;
  --tbr-space-6: 1.5rem;
  --tbr-space-8: 2rem;
  --tbr-space-10: 2.5rem;
  --tbr-space-12: 3rem;
  --tbr-space-16: 4rem;
  --tbr-space-20: 5rem;
  --tbr-space-24: 6rem;
  --tbr-space-32: 8rem;

  /* Shape */
  --tbr-radius-none: 0;
  --tbr-radius-sm: 0.375rem;
  --tbr-radius-md: 0.625rem;
  --tbr-radius-lg: 1rem;
  --tbr-radius-xl: 1.5rem;
  --tbr-radius-pill: 999px;

  /* Elevation */
  --tbr-shadow-sm: 0 1px 2px rgb(0 29 50 / 8%);
  --tbr-shadow-md: 0 8px 24px rgb(0 29 50 / 10%);
  --tbr-shadow-lg: 0 20px 48px rgb(0 29 50 / 16%);
  --tbr-shadow-focus: 0 0 0 3px rgb(240 206 0 / 55%);

  /* Motion */
  --tbr-duration-fast: 120ms;
  --tbr-duration-base: 200ms;
  --tbr-duration-slow: 320ms;
  --tbr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tbr-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --tbr-container: 76rem;
  --tbr-content-measure: 68ch;
  --tbr-control-height-sm: 2.25rem;
  --tbr-control-height-md: 2.75rem;
  --tbr-control-height-lg: 3.25rem;
  --tbr-z-sticky: 20;
  --tbr-z-overlay: 80;
  --tbr-z-modal: 100;
  --tbr-z-toast: 120;
}

[data-theme="dark"] {
  color-scheme: dark;
  --tbr-color-canvas: #061721;
  --tbr-color-surface: #0b2433;
  --tbr-color-surface-subtle: #102f40;
  --tbr-color-surface-strong: #001d32;
  --tbr-color-text: #f6f8f9;
  --tbr-color-text-muted: #bac9d1;
  --tbr-color-text-inverse: #061721;
  --tbr-color-border: #254758;
  --tbr-color-border-strong: #3a6073;
  --tbr-color-primary: var(--tbr-green-500);
  --tbr-color-primary-hover: #9fbd60;
  --tbr-color-primary-pressed: #b0c979;
  --tbr-color-on-primary: var(--tbr-navy-500);
  --tbr-color-accent: var(--tbr-yellow-500);
  --tbr-color-accent-hover: #f5d92d;
  --tbr-color-on-accent: var(--tbr-navy-500);
  --tbr-color-link: #74b4d3;
  --tbr-color-link-hover: #a2cde1;
  --tbr-color-info: #74b4d3;
  --tbr-color-info-subtle: #0b3044;
  --tbr-color-success: #b7ca87;
  --tbr-color-success-subtle: #1e3515;
  --tbr-color-warning: #ffed99;
  --tbr-color-warning-subtle: #3d3500;
  --tbr-color-danger: #ffaaa4;
  --tbr-color-danger-hover: #ffc2be;
  --tbr-color-danger-subtle: #461b18;
  --tbr-color-disabled-bg: #254758;
  --tbr-color-disabled-text: #8ca1ad;
  --tbr-shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
  --tbr-shadow-md: 0 8px 24px rgb(0 0 0 / 24%);
  --tbr-shadow-lg: 0 20px 48px rgb(0 0 0 / 34%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tbr-duration-fast: 0ms;
    --tbr-duration-base: 0ms;
    --tbr-duration-slow: 0ms;
  }
}