/* Titanium Design System — generated from DESIGN.md */

@font-face {
  font-family: "Exact Block";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ExactBlock-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Cash Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/CashSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Cash Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/CashSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Cash Sans Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/CashSansMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Square Sans Text";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/SquareSansText-VF.woff2") format("woff2");
}

@font-face {
  font-family: "Square Sans Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/SquareSansText-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Square Sans Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/SquareSansDisplay-VF.woff2") format("woff2");
}


/* Titanium Design Tokens */

:root {
  color-scheme: light;

  --font-heading: "Exact Block", system-ui, sans-serif;
  --font-display: "Square Sans Display", "Cash Sans", system-ui, sans-serif;
  --font-sans: "Cash Sans", "Square Sans Text", system-ui, sans-serif;
  --font-mono: "Cash Sans Mono", ui-monospace, monospace;

  --brand-secondary: #7c3aed;
  --brand-accent: #ff7a17;
  --accent-sunset: #ff7a17;
  --accent-sunset-soft: #ffc285;
  --accent-dusk: #7c3aed;
  --accent-twilight: #c4b5fd;
  --accent-breeze: #a0c3ec;
  --accent-midnight: #0d1726;

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;

  --charcoal: #2d2c2c;
  --charcoal-hover: #242323;
  --charcoal-rgb: 45, 44, 44;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --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;
  --space-24: 96px;
  --space-32: 128px;

  --duration-micro: 200ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-reveal: 500ms;
  --duration-medium: 320ms;
  --duration-hero: 16s;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-precision: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-reveal: cubic-bezier(0.25, 0.1, 0.25, 1);

  --container-max: 82rem;

  --z-depth-base: 0;
  --z-depth-section: 1;
  --z-depth-card: 2;
  --z-depth-glass: 3;
  --z-depth-premium: 4;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  --canvas: #fafaf7;
  --canvas-soft: #f3f3ef;
  --canvas-card: #ffffff;
  --canvas-mid: #e5e5e0;
  --hairline: #e8e8e4;

  --background-primary: var(--canvas);
  --background-secondary: var(--canvas-soft);
  --background-tertiary: var(--canvas-card);
  --surface: var(--canvas-card);

  --ink: var(--charcoal);
  --ink-hover: var(--charcoal-hover);
  --body-text: #4a4a4f;
  --body-mid: #7d8187;
  --section-heading-highlight: #7d8187;

  --text-primary: var(--ink);
  --text-secondary: var(--body-text);

  --brand-primary: var(--ink);
  --brand-primary-hover: var(--ink-hover);
  --brand-primary-active: var(--ink-hover);
  --brand-link-hover: var(--ink-hover);
  --brand-focus-ring: rgba(var(--charcoal-rgb), 0.2);

  --background: var(--canvas);
  --background-alt: var(--canvas-soft);

  --card: var(--canvas-card);
  --card-foreground: var(--ink);
  --foreground: var(--ink);
  --foreground-inverse: var(--canvas-card);
  --muted-foreground: var(--body-text);
  --disabled-foreground: var(--body-mid);

  --primary: var(--ink);
  --primary-foreground: #ffffff;
  --secondary: var(--canvas-soft);
  --secondary-foreground: var(--ink);
  --border: var(--hairline);
  --outline-pill: rgba(var(--charcoal-rgb), 0.12);
  --input: var(--canvas-card);
  --ring: var(--brand-focus-ring);

  --button-primary-bg: var(--ink);
  --button-primary-text: #ffffff;
  --button-primary-hover-bg: var(--ink-hover);
  --button-primary-active-bg: var(--ink-hover);
  --button-primary-alt-bg: transparent;
  --button-primary-alt-text: var(--ink);
  --button-primary-alt-hover-bg: rgba(var(--charcoal-rgb), 0.04);
  --button-primary-alt-hover-text: var(--ink-hover);
  --button-primary-alt-active-bg: rgba(var(--charcoal-rgb), 0.08);
  --button-primary-alt-active-text: var(--ink);
  --button-secondary-hover-bg: rgba(var(--charcoal-rgb), 0.04);
  --button-secondary-active-bg: rgba(var(--charcoal-rgb), 0.08);
  --button-brand-bg: var(--ink);
  --button-brand-hover-bg: var(--ink-hover);
  --button-brand-active-bg: var(--ink-hover);

  --overlay-backdrop: rgba(var(--charcoal-rgb), 0.24);

  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-border: var(--hairline);
  --glass-blur: 16px;
  --glass-shadow: 0 1px 24px rgba(var(--charcoal-rgb), 0.08);
  --glass-shadow-hover: 0 4px 28px rgba(var(--charcoal-rgb), 0.12);

  --material-card-bg: var(--canvas-card);
  --material-card-border: var(--hairline);
  --material-card-shadow: 0 1px 24px rgba(var(--charcoal-rgb), 0.06);
  --material-card-shadow-hover: 0 4px 28px rgba(var(--charcoal-rgb), 0.1);

  --shadow-card: 0 1px 24px rgba(var(--charcoal-rgb), 0.08);
  --shadow-card-hover: 0 4px 28px rgba(var(--charcoal-rgb), 0.12);
  --shadow-hover: 0 4px 28px rgba(var(--charcoal-rgb), 0.1);
  --shadow-header: 0 5px 13px rgba(var(--charcoal-rgb), 0.06);
}

[data-theme="dark"] {
  color-scheme: dark;

  --canvas: var(--charcoal);
  --canvas-soft: #383737;
  --canvas-card: #333232;
  --canvas-mid: #454444;
  --hairline: #454444;

  --background-primary: var(--canvas);
  --background-secondary: var(--canvas);
  --background-tertiary: var(--canvas-soft);
  --surface: var(--canvas-card);

  --ink: #ffffff;
  --ink-hover: #fafaf7;
  --body-text: #dadbdf;
  --body-mid: #7d8187;

  --text-primary: var(--ink);
  --text-secondary: var(--body-text);

  --brand-primary: var(--ink);
  --brand-primary-hover: var(--ink-hover);
  --brand-link-hover: var(--ink-hover);
  --brand-focus-ring: rgba(255, 255, 255, 0.35);

  --background: var(--canvas);
  --background-alt: var(--canvas);
  --card: var(--canvas-card);
  --card-foreground: var(--ink);
  --foreground: var(--ink);
  --foreground-inverse: var(--canvas);
  --muted-foreground: var(--body-text);
  --disabled-foreground: var(--body-mid);

  --primary: var(--ink);
  --primary-foreground: var(--canvas);
  --secondary: var(--canvas-soft);
  --secondary-foreground: var(--ink);
  --border: var(--hairline);
  --outline-pill: rgba(255, 255, 255, 0.25);
  --input: var(--canvas-soft);
  --ring: var(--brand-focus-ring);

  --button-primary-bg: var(--ink);
  --button-primary-text: var(--canvas);
  --button-primary-hover-bg: var(--ink-hover);
  --button-primary-active-bg: var(--ink-hover);
  --button-primary-alt-hover-bg: rgba(255, 255, 255, 0.06);
  --button-primary-alt-active-bg: rgba(255, 255, 255, 0.1);
  --button-secondary-hover-bg: rgba(255, 255, 255, 0.04);
  --button-secondary-active-bg: rgba(255, 255, 255, 0.08);
  --button-brand-bg: var(--ink);
  --button-brand-hover-bg: var(--ink-hover);

  --overlay-backdrop: rgba(var(--charcoal-rgb), 0.24);

  --glass-bg: var(--canvas-card);
  --glass-border: var(--outline-pill);
  --glass-blur: 0px;
  --glass-shadow: none;
  --glass-shadow-hover: none;

  --material-card-bg: var(--canvas-card);
  --material-card-border: var(--hairline);
  --material-card-shadow: none;
  --material-card-shadow-hover: none;

  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-hover: none;
  --shadow-header: none;
}


/* Base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tipografia utilitária */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.text-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.text-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.125;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.text-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.text-small {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.text-caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Botões */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--duration-micro) var(--easing-precision),
    color var(--duration-micro) var(--easing-precision),
    border-color var(--duration-micro) var(--easing-precision);
}

.btn-base:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

.btn-base:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid var(--ink);
}

.btn-primary:hover {
  background-color: var(--button-primary-hover-bg);
}

.btn-primary:active {
  background-color: var(--button-primary-active-bg);
}

.btn-primary-alt {
  background-color: var(--button-primary-alt-bg);
  color: var(--button-primary-alt-text);
}

.btn-primary-alt:hover {
  background-color: var(--button-primary-alt-hover-bg);
  color: var(--button-primary-alt-hover-text);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--outline-pill);
}

.btn-secondary:hover {
  color: var(--ink-hover);
  background-color: var(--button-secondary-hover-bg);
}

.btn-secondary:active {
  background-color: var(--button-secondary-active-bg);
}

.btn-destructive {
  background-color: transparent;
  color: var(--destructive);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.btn-destructive:hover {
  background-color: rgba(220, 38, 38, 0.08);
}

.card-cta-filled {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--charcoal);
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--easing-precision);
}

.card-cta-filled:hover {
  background: var(--charcoal-hover);
  border-color: var(--charcoal-hover);
}

/* Cards */
.material-card {
  background: var(--material-card-bg);
  border: 1px solid var(--material-card-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--material-card-shadow);
  transition: border-color var(--duration-micro) var(--easing-precision);
}

.material-card:hover {
  border-color: var(--outline-pill);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

/* Formulários */
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--body-mid);
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--background);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--foreground);
  transition: border-color var(--duration-base) var(--easing-standard);
}

.form-input::placeholder {
  color: var(--muted-foreground);
}

.form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

.form-input:disabled {
  background-color: var(--canvas-soft);
  opacity: 0.7;
  cursor: not-allowed;
}

.form-input--error {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-helper {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--body-mid);
}

.form-helper--error {
  color: var(--destructive);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-grid-2 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tabs */
.tabs-nav {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.tab {
  margin-bottom: -1px;
  padding: 0 0 1rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard);
}

.tab:hover {
  color: var(--foreground);
}

.tab--active {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

.badge--neutral {
  background: var(--canvas-mid);
  color: var(--body-mid);
}

.badge--success {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.badge--warning {
  background: rgba(255, 122, 23, 0.12);
  color: #c2410c;
}

.badge--error {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.badge--info {
  background: rgba(160, 195, 236, 0.2);
  color: #1e40af;
}

/* Modal (produto) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--overlay-backdrop);
}

.modal {
  position: fixed;
  z-index: 110;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  max-width: 40rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--canvas-card);
  box-shadow: 0 12px 40px rgba(45, 44, 44, 0.12);
}

@media (min-width: 768px) {
  .modal {
    padding: 2rem;
  }
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}

/* Toast (produto) */
.toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 120;
  min-width: 20rem;
  max-width: 26.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--canvas-card);
  box-shadow: var(--shadow-card);
  font-size: 0.875rem;
}

.toast--success { border-left: 3px solid #16a34a; }
.toast--error { border-left: 3px solid var(--destructive); }
.toast--warning { border-left: 3px solid var(--brand-accent); }
.toast--info { border-left: 3px solid var(--accent-breeze); }

/* Tabela (produto) */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--canvas-card);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  padding: 0.75rem 1rem;
  background: var(--canvas-soft);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--body-mid);
}

.table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--hairline);
  color: var(--foreground);
}

.table tbody tr:hover {
  background: rgba(var(--charcoal-rgb), 0.02);
}

.table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Links */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-micro) var(--easing-precision);
}

.link:hover {
  color: var(--ink-hover);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}