/* Clara design tokens — fonte única para temas, escala e motion. */
:root {
  color-scheme: light;

  /* Brand and neutrals */
  --color-primary: #0f766e;
  --color-primary-hover: #0c655f;
  --color-primary-active: #0a5752;
  --color-deep-green: #103c36;
  --color-forest-green: #0b302c;
  --color-dark-green: #081d1a;
  --color-mint: #ddf4ed;
  --color-soft-mint: #f1faf7;
  --color-sage: #6f817d;
  --color-off-white: #f7f9f7;
  --color-warm-accent: #f2a36f;
  --color-coral: #ea7660;

  /* Semantic colors */
  --color-success: #137f70;
  --color-success-surface: #e5f6f1;
  --color-warning: #9a5c1c;
  --color-warning-surface: #fff3df;
  --color-danger: #b54837;
  --color-danger-surface: #ffede8;
  --color-info: #2f7188;
  --color-info-surface: #e9f4f8;

  /* Theme roles */
  --color-background: var(--color-off-white);
  --color-surface: #ffffff;
  --color-surface-subtle: var(--color-soft-mint);
  --color-surface-raised: #ffffff;
  --color-text-primary: #16322f;
  --color-text-secondary: #5f726e;
  --color-text-inverse: #ffffff;
  --color-border: #dce7e3;
  --color-border-strong: #c6d8d3;
  --color-focus: rgba(15, 118, 110, .28);
  --color-overlay: rgba(8, 29, 26, .48);

  /* Typography */
  --font-family-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Manrope', var(--font-family-body);
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.5rem;
  --font-size-display: clamp(3rem, 5vw, 4.5rem);
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.55;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Shape and elevation */
  --radius-xs: .375rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 60, 54, .04);
  --shadow-sm: 0 3px 10px rgba(16, 60, 54, .06);
  --shadow-md: 0 12px 32px rgba(16, 60, 54, .09);
  --shadow-lg: 0 24px 60px rgba(8, 29, 26, .16);

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 280ms;
  --motion-ease-standard: cubic-bezier(.2, .7, .25, 1);
  --motion-ease-emphasized: cubic-bezier(.2, .8, .2, 1);

  /* Compatibility aliases used by the current product. */
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --green: var(--color-primary);
  --green2: var(--color-success);
  --mint: var(--color-mint);
  --cream: var(--color-background);
  --coral: var(--color-coral);
  --line: var(--color-border);
  --white: var(--color-surface);
  --soft: var(--color-surface-subtle);
  --shadow: var(--shadow-md);
}

.theme-dark {
  color-scheme: dark;
  --color-primary: #2aa99c;
  --color-primary-hover: #3bbbad;
  --color-primary-active: #218f84;
  --color-mint: #173c36;
  --color-soft-mint: #102a26;
  --color-sage: #9aada8;
  --color-background: #081d1a;
  --color-surface: #102824;
  --color-surface-subtle: #0c2420;
  --color-surface-raised: #15312c;
  --color-text-primary: #edf5f3;
  --color-text-secondary: #afc0bc;
  --color-border: #29443e;
  --color-border-strong: #3a5a53;
  --color-focus: rgba(58, 187, 173, .34);
  --color-overlay: rgba(2, 12, 10, .72);
  --color-success: #48b6a8;
  --color-success-surface: #163a34;
  --color-warning: #efb46d;
  --color-warning-surface: #382a1d;
  --color-danger: #f08b76;
  --color-danger-surface: #40251f;
  --color-info: #75b8cf;
  --color-info-surface: #17313a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .2);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, .28);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .38);
}

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