/* src/styles/theme.scss */
@use "./tokens";

:root {
  /* Semantic Colors - Theming Layer */
  --color-bg: #faf9f6;
  --color-bg-card: #ffffff;
  --color-surface-card: var(--color-bg-card);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-success: var(--color-success-100);
  --color-surface-warning: var(--color-warning-100);
  --color-surface-danger: var(--color-danger-100);
  --color-text: var(--color-neutral-900);
  --color-text-main: var(--color-text);
  --color-text-muted: var(--color-secondary-500);

  --color-brand: var(--color-primary-500);
  --color-brand-600: var(--color-primary-600);
  --color-brand-hover: var(--color-primary-600);

  --color-border: var(--color-neutral-200);

  --color-success: var(--color-success-500);
  --color-warning: var(--color-warning-500);
  --color-error: var(--color-danger-500);
  --focus-ring: 0 0 0 2px rgb(250 207 10 / 0.28);

  /* Font */
  --font-family-sans: "IBM Plex Sans", "Space Grotesk", sans-serif;
  --font-family-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
}
