/* ==========================================================================
 * Astryx Design System — Neutral Theme Dark Mode Tokens
 * Fonte: @astryxdesign/theme-neutral/src/neutralTheme.ts
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* ── Typography ── */
  --font-family-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-code: ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Scale: base=14, ratio=1.2 */
  --font-size-2xs: 0.694rem;
  --font-size-xs: 0.833rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.44rem;
  --font-size-2xl: 1.728rem;
  --font-size-3xl: 2.074rem;
  --font-size-4xl: 2.488rem;
  --font-size-5xl: 2.986rem;

  /* ── Spacing (4px base) ── */
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* ── Radius ── */
  --radius-none: 0.25rem;
  --radius-inner: 0.375rem;
  --radius-element: 0.625rem;
  --radius-container: 0.75rem;
  --radius-page: 1.75rem;
  --radius-full: 9999px;

  /* ── Element Sizes ── */
  --size-element-sm: 28px;
  --size-element-md: 32px;
  --size-element-lg: 36px;

  /* ── Backgrounds (Dark Mode) ── */
  --color-background-body: #1b1b1b;
  --color-background-surface: #262626;
  --color-background-card: #1b1b1b;
  --color-background-popover: #1b1b1b;
  --color-background-muted: #1b1b1b;

  /* ── Accent ── */
  --color-accent: #ebebeb;
  --color-accent-muted: #262626;
  --color-on-accent: #171717;

  /* ── Text ── */
  --color-text-primary: #fafafa;
  --color-text-secondary: #a3a3a3;
  --color-text-disabled: #525252;
  --color-text-accent: #ebebeb;

  /* ── Icon ── */
  --color-icon-primary: #fafafa;
  --color-icon-secondary: #a3a3a3;
  --color-icon-disabled: #525252;
  --color-icon-accent: #ebebeb;

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-emphasized: #525252;

  /* ── Status ── */
  --color-success: #9fe59b;
  --color-error: #ffc6c1;
  --color-warning: #fdcf4f;
  --color-success-muted: rgba(132, 201, 128, 0.24);
  --color-error-muted: rgba(255, 158, 151, 0.24);
  --color-warning-muted: rgba(222, 180, 51, 0.24);
  --color-on-success: #171717;
  --color-on-error: #171717;
  --color-on-warning: #171717;

  /* ── Categorical: Blue ── */
  --color-background-blue: rgba(158, 183, 255, 0.24);
  --color-border-blue: #6d9cfe;
  --color-icon-blue: #9eb7ff;
  --color-text-blue: #c7d3ff;

  /* ── Categorical: Green ── */
  --color-background-green: rgba(132, 201, 128, 0.24);
  --color-border-green: #69ad67;
  --color-icon-green: #84c980;
  --color-text-green: #9fe59b;

  /* ── Categorical: Purple ── */
  --color-background-purple: rgba(242, 151, 255, 0.24);
  --color-border-purple: #dd74f0;
  --color-icon-purple: #f297ff;
  --color-text-purple: #fac1ff;

  /* ── Categorical: Teal ── */
  --color-background-teal: rgba(126, 198, 184, 0.24);
  --color-border-teal: #63ab9d;
  --color-icon-teal: #7ec6b8;
  --color-text-teal: #99e2d3;

  /* ── Categorical: Red ── */
  --color-background-red: rgba(255, 158, 151, 0.24);
  --color-border-red: #ff6f6c;
  --color-icon-red: #ff9e97;
  --color-text-red: #ffc6c1;

  /* ── Categorical: Orange ── */
  --color-background-orange: rgba(255, 162, 88, 0.24);
  --color-border-orange: #e2883e;
  --color-icon-orange: #ffa258;
  --color-text-orange: #ffc9a2;

  /* ── Categorical: Gray ── */
  --color-background-gray: rgba(255, 255, 255, 0.1);
  --color-border-gray: #262626;
  --color-icon-gray: #a3a3a3;
  --color-text-gray: #e5e5e5;

  /* ── Shadows ── */
  --shadow-low:
    0 2px 4px oklch(0 0 0 / 25%),
    0 4px 8px oklch(0 0 0 / 40%),
    inset 0 0 0 1px oklch(1 0 0 / 8%);
  --shadow-med:
    0 2px 4px oklch(0 0 0 / 35%),
    0 4px 12px oklch(0 0 0 / 50%),
    inset 0 0 0 1px oklch(1 0 0 / 12%);
  --shadow-high:
    0 4px 6px oklch(0 0 0 / 50%),
    0 12px 24px oklch(0 0 0 / 70%),
    inset 0 0 0 1px oklch(1 0 0 / 15%);

  /* ── Effects ── */
  --color-skeleton: #525252;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-overlay-hover: rgba(255, 255, 255, 0.05);
  --color-overlay-pressed: rgba(255, 255, 255, 0.1);
  --color-neutral: rgba(255, 255, 255, 0.1);
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.43;
  background: var(--color-background-body);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: rgba(163, 163, 163, 0.4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: rgba(163, 163, 163, 0.4); }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(163, 163, 163, 0.7); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Utility Classes ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-0-5 { gap: var(--spacing-0-5); }
.gap-1 { gap: var(--spacing-1); }
.gap-1-5 { gap: var(--spacing-1-5); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.hidden { display: none; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-full { width: 100%; }

/* ── Text ── */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled { color: var(--color-text-disabled); }
.text-accent { color: var(--color-text-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-blue { color: var(--color-text-blue); }
.text-green { color: var(--color-text-green); }
.text-purple { color: var(--color-text-purple); }
.text-teal { color: var(--color-text-teal); }
.text-brand { color: var(--color-text-blue); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.leading-tight { line-height: 1.33; }
.leading-normal { line-height: 1.43; }
.leading-relaxed { line-height: 1.67; }

/* ── Background ── */
.bg-body { background-color: var(--color-background-body); }
.bg-surface { background-color: var(--color-background-surface); }
.bg-card { background-color: var(--color-background-card); }
.bg-muted { background-color: var(--color-background-muted); }
.bg-blue { background-color: var(--color-background-blue); }
.bg-green { background-color: var(--color-background-green); }
.bg-purple { background-color: var(--color-background-purple); }
.bg-teal { background-color: var(--color-background-teal); }
.bg-red { background-color: var(--color-background-red); }
.bg-orange { background-color: var(--color-background-orange); }
.bg-accent-muted { background-color: var(--color-accent-muted); }
.bg-success-muted { background-color: var(--color-success-muted); }
.bg-error-muted { background-color: var(--color-error-muted); }

/* ── Border ── */
.border { border: 1px solid var(--color-border); }
.border-emphasized { border: 1px solid var(--color-border-emphasized); }
.border-blue { border: 1px solid var(--color-border-blue); }
.border-success { border: 1px solid var(--color-success); }
.border-error { border: 1px solid var(--color-error); }
.border-dashed { border-style: dashed; }

.rounded-none { border-radius: var(--radius-none); }
.rounded-inner { border-radius: var(--radius-inner); }
.rounded-element { border-radius: var(--radius-element); }
.rounded-container { border-radius: var(--radius-container); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Spacing ── */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }

/* ── Shadows ── */
.shadow-low { box-shadow: var(--shadow-low); }
.shadow-med { box-shadow: var(--shadow-med); }
.shadow-high { box-shadow: var(--shadow-high); }

/* ── Interactive ── */
.cursor-pointer { cursor: pointer; }
.transition { transition: all 0.15s ease; }
.opacity-60 { opacity: 0.6; }

/* ── Line Clamp ── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }