/* =============================================================
   ORIZEN DESIGN SYSTEM — Custom Properties
   Fonte: design-system-orizen.pages.dev (auditado abr/2026)
   Dark mode only. Não introduzir light mode.
   ============================================================= */

:root {
  /* Backgrounds e superfícies */
  --color-bg-root: #000000;
  --color-bg-void: #000000;
  --color-surface-00: #000000;
  --color-surface-01: #0A0A0A;
  --color-surface-02: #111111;
  --color-surface-03: #161616;
  --color-surface-04: #1A1A1A;
  --color-surface-05: #222222;
  --color-surface-06: #2A2A2A;

  /* Bordas */
  --color-border-subtle:  rgba(255,255,255,0.07);
  --color-border-default: rgba(255,255,255,0.12);
  --color-border-strong:  rgba(255,255,255,0.22);
  --color-border-solid:   #2E2E2E;

  /* Textos */
  --color-text-primary:   #FFFFFF;
  --color-text-heading:   #FFFFFF;
  --color-text-sub:       #E8E8E8;
  --color-text-secondary: #9E9E9E;
  --color-text-tertiary:  rgba(255,255,255,0.45);
  --color-text-support:   rgba(255,255,255,0.65);
  --color-text-disabled:  rgba(255,255,255,0.28);
  --color-text-inverse:   #000000;

  /* Interativos */
  --color-interactive:       #FFFFFF;
  --color-interactive-dim:   rgba(255,255,255,0.08);
  --color-interactive-hover: rgba(255,255,255,0.12);
  --color-interactive-press: rgba(255,255,255,0.06);

  /* Semânticas */
  --color-semantic-positive:        #4CAF7D;
  --color-semantic-positive-dim:    rgba(76,175,125,0.12);
  --color-semantic-positive-border: rgba(76,175,125,0.25);
  --color-semantic-positive-text:   #6FCF97;
  --color-semantic-negative:        #D95F5F;
  --color-semantic-negative-dim:    rgba(217,95,95,0.12);
  --color-semantic-negative-border: rgba(217,95,95,0.25);
  --color-semantic-negative-text:   #E07070;
  --color-semantic-warning:         #C9A84C;
  --color-semantic-warning-dim:     rgba(201,168,76,0.12);
  --color-semantic-warning-border:  rgba(201,168,76,0.25);
  --color-semantic-warning-text:    #E2C97E;
  --color-semantic-info:            #4A90B8;
  --color-semantic-info-dim:        rgba(74,144,184,0.12);
  --color-semantic-info-border:     rgba(74,144,184,0.25);
  --color-semantic-info-text:       #7EB4C9;

  /* Aliases */
  --color-state-success: #6FCF97;
  --color-state-warning: #E2C97E;
  --color-state-error:   #E07070;
  --color-state-info:    #7EB4C9;

  /* Tipografia */
  --font-family-base: 'Archivo', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-size-2xs: 10px;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-base:15px;
  --font-size-md:  17px;
  --font-size-lg:  20px;
  --font-size-xl:  24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 38px;
  --font-size-4xl: 48px;
  --font-size-5xl: 62px;
  --font-size-6xl: 80px;
  --font-size-hero:96px;
  --font-weight-thin:      100;
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:      1.08;
  --line-height-snug:       1.22;
  --line-height-base:       1.5;
  --line-height-relaxed:    1.68;
  --line-height-loose:      1.85;
  --line-height-hero-title: 1.06;
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.14em;
  --tracking-label:     0.10em;

  /* Espaçamento (escala 4px) */
  --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-9: 36px;
  --space-10: 40px;  --space-11: 44px;  --space-12: 48px;
  --space-14: 56px;  --space-16: 64px;  --space-18: 72px;
  --space-20: 80px;  --space-24: 96px;  --space-28: 112px;
  --space-32: 128px; --space-36: 144px; --space-40: 160px;
  --space-48: 192px;

  /* Grid e layout */
  --grid-cols:    12;
  --grid-gutter:  24px;
  --grid-max:     1440px;
  --content-max:  960px;
  --narrow-max:   640px;

  /* Border radius */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-none: none;
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.6);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.7);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.9);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.8);

  /* Transições */
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;
  --duration-enter:   480ms;

  /* Z-index */
  --z-below:  -1;
  --z-base:    0;
  --z-raised: 10;
  --z-overlay:50;
  --z-header:100;
  --z-modal: 200;
  --z-toast: 300;
  --z-max:   999;

  /* Layout responsivo (sobrescrito por breakpoint no app.css) */
  --page-margin:         20px;
  --header-height:       56px;
  --grid-gutter-current: 16px;
}

/* Reset mínimo + base */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-root);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}