/*
 * Custom design tokens for Bifrost Webmail.
 * Open Props provides spacing, sizing, easing, animation.
 * Colors are a custom neutral system — calm, deliberate, no vibrancy.
 */

:root {
  /* Color primitives */
  --gray-1: #f8f8f8;
  --gray-2: #f0f0f0;
  --gray-3: #e4e4e4;
  --gray-4: #d0d0d0;
  --gray-5: #a0a0a0;
  --gray-6: #787878;
  --gray-7: #585858;
  --gray-8: #404040;
  --gray-9: #2c2c2c;
  --gray-10: #222222;
  --gray-11: #1a1a1a;
  --gray-12: #141414;
  --gray-13: #0e0e0e;

  /* Semantic accent (muted blue — meaning, not decoration) */
  --accent: #5b9bd5;
  --accent-dim: #4a7fb0;
  --accent-bright: #6eb0e8;

  /* Status colors */
  --color-success: #5ba87c;
  --color-warning: #c9a237;
  --color-error: #c75050;
  --color-info: var(--accent);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;  /* 11px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;        /* 32px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;

  /* Sizing */
  --account-bar-width: 56px;
  --sidebar-width: 240px;
}

/* Dark theme (default) */
[data-theme="dark"] {
  --bg-app: var(--gray-13);
  --bg-surface: var(--gray-12);
  --bg-surface-raised: var(--gray-11);
  --bg-surface-hover: var(--gray-10);
  --bg-surface-active: var(--gray-9);

  --text-primary: var(--gray-1);
  --text-secondary: var(--gray-5);
  --text-tertiary: var(--gray-6);

  --border-subtle: var(--gray-10);
  --border-default: var(--gray-9);

  --bg-account-bar: var(--gray-12);
  --bg-sidebar: var(--gray-11);

  --bg-input: var(--gray-11);
  --border-input: var(--gray-8);
  --border-input-focus: var(--accent);

  --bg-btn-primary: var(--accent);
  --text-btn-primary: var(--gray-13);

  --bg-unread: var(--gray-11);
  --text-unread: var(--gray-1);
}

/* Light theme */
[data-theme="light"] {
  --bg-app: var(--gray-1);
  --bg-surface: #ffffff;
  --bg-surface-raised: var(--gray-2);
  --bg-surface-hover: var(--gray-3);
  --bg-surface-active: var(--gray-4);

  --text-primary: var(--gray-12);
  --text-secondary: var(--gray-7);
  --text-tertiary: var(--gray-6);

  --border-subtle: var(--gray-3);
  --border-default: var(--gray-4);

  --bg-account-bar: var(--gray-2);
  --bg-sidebar: var(--gray-1);

  --bg-input: #ffffff;
  --border-input: var(--gray-4);
  --border-input-focus: var(--accent);

  --bg-btn-primary: var(--accent-dim);
  --text-btn-primary: #ffffff;

  --bg-unread: #ffffff;
  --text-unread: var(--gray-12);
}