@import "./fonts.css";

:root {
  --font-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: monospace;

  --niien-color-blue: #1789c3;
  --niien-color-blue-text: #0b6b96;
  --niien-color-green: #2f7d4a;
  --niien-color-warning: #ffa600;
  --niien-color-error: #ff5a48;
  --niien-color-menu: #f7f7f7;
  --niien-color-background-light: #ffffff;
  --niien-color-surface-subtle: #f5f5f5;
  --niien-color-footer: var(--niien-color-surface-subtle);
  --niien-color-background-dark: #323232;
  --niien-color-border-subtle: #d9d9d9;
  --niien-color-border-light: rgb(140,140,140);
  --niien-color-border-dark: #f7f7f7;
  --niien-color-text-light: #000000;
  --niien-color-text-dark: #f7f7f7;

  --niien-brand-primary: var(--niien-color-blue-text);
  --niien-brand-primary-surface: var(--niien-color-blue);
  --niien-brand-accent: var(--niien-color-green);

  --surface-page: var(--niien-color-background-light);
  --surface-card: #ffffff;
  --surface-menu: var(--niien-color-menu);
  --surface-subtle: var(--niien-color-surface-subtle);
  --surface-footer: var(--niien-color-footer);
  --surface-accent: #ededed;
  --text-primary: var(--niien-color-text-light);
  --text-muted: #454545;
  --text-inverse: var(--niien-color-text-dark);
  --action-primary: #111111;
  --action-primary-hover: #2a2a2a;
  --action-primary-foreground: #ffffff;
  --brand-primary: var(--niien-brand-primary);
  --brand-primary-hover: #0b5f85;
  --brand-primary-foreground: #ffffff;
  --brand-primary-surface: var(--niien-brand-primary-surface);
  --brand-primary-surface-hover: #0d7ec0;
  --action-brand: var(--brand-primary);
  --action-brand-hover: var(--brand-primary-hover);
  --action-brand-foreground: var(--brand-primary-foreground);
  --state-success: var(--niien-color-green);
  --state-success-surface: #eaf5ed;
  --state-success-text: #205b35;
  --state-success-border: #77a887;
  --state-warning: var(--niien-color-warning);
  --state-warning-surface: #fff3d1;
  --state-warning-text: #633c00;
  --state-warning-border: #d98e00;
  --state-error: #c43b2e;
  --state-error-hover: #a93226;
  --state-error-surface: #fff0ee;
  --state-error-text: #922b20;
  --state-error-border: #f4a098;
  --border-subtle: var(--niien-color-border-subtle);
  --border-strong: var(--niien-color-border-light);
  --focus-ring: #111111;

  --color-bg: var(--surface-page);
  --color-surface: var(--surface-card);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-border: var(--border-subtle);
  --color-border-strong: var(--border-strong);
  --color-brand: var(--brand-primary);
  --color-brand-contrast: var(--brand-primary-foreground);
  --color-action: var(--action-primary);
  --color-action-contrast: var(--action-primary-foreground);
  --color-success: var(--state-success);
  --color-warning: var(--state-warning);
  --color-error: var(--state-error);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-16: 4rem;

  --type-size-compact: 0.875rem;
  --type-size-regular: 1rem;
  --type-line-height-regular: 1.5;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-media: var(--radius-md);
  --radius-feature: 0.75rem;
}