/* Origina - tokens de marca (generado desde tokens.json) */

:root,
[data-theme="light"] {
  --surface-100: #f6f5f1;
  --surface-200: #eceae4;
  --line: #d3d0c7;
  --line-strong: #6f7e80;
  --ink: #14262b;
  --ink-muted: #4d5f64;
  --brand: #17454d;
  --on-brand: #f6f5f1;
  --brand-deep: #0f2a30;
  --on-deep: #f6f5f1;
  --accent: #b58b4c;
  --on-accent: #14262b;
  --sage: #8da79f;
  --positive: #1e6a87;
  --negative: #b3402a;
  --focus: var(--brand);
  --shadow-raised: 0 1px 2px 0 #14262b1f, 0 4px 12px 0 #14262b0f;
}

[data-theme="dark"] {
  --surface-100: #0e1b1f;
  --surface-200: #16282d;
  --line: #2c4147;
  --line-strong: #7f9396;
  --ink: #eef0ec;
  --ink-muted: #a5b5b7;
  --brand: #7db5bb;
  --on-brand: #0e1b1f;
  --brand-deep: #1c3f47;
  --on-deep: #eef0ec;
  --accent: #d4ac6c;
  --on-accent: #0e1b1f;
  --sage: #8faea5;
  --positive: #7dbbd6;
  --negative: #e58b73;
  --focus: var(--brand);
  --shadow-raised: 0 1px 2px 0 #00000066;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #0e1b1f;
    --surface-200: #16282d;
    --line: #2c4147;
    --line-strong: #7f9396;
    --ink: #eef0ec;
    --ink-muted: #a5b5b7;
    --brand: #7db5bb;
    --on-brand: #0e1b1f;
    --brand-deep: #1c3f47;
    --on-deep: #eef0ec;
    --accent: #d4ac6c;
    --on-accent: #0e1b1f;
    --sage: #8faea5;
    --positive: #7dbbd6;
    --negative: #e58b73;
    --focus: var(--brand);
    --shadow-raised: 0 1px 2px 0 #00000066;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-display: "Manrope", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
}

.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; }
.overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.figure-lg { font-family: var(--font-mono); font-size: 32px; line-height: 36px; font-weight: 500; }
.figure { font-family: var(--font-mono); font-size: 16px; line-height: 24px; font-weight: 400; }