/* =========================================================================
   theme.css: Single source of truth for the visual design system.
   All color, radius, shadow, and motion tokens live here as CSS custom
   properties on :root. To re-skin the entire site, edit this file only.
   To add dark mode later, add a :root[data-theme="dark"] { ... } block.

   Color values are stored as space-separated RGB triplets (not hex) so
   they can be consumed by Tailwind's `rgb(var(--token) / <alpha-value>)`
   pattern. This is the recommended Tailwind theming approach and gives
   free opacity support (e.g. `bg-brand-500/50`).
   ========================================================================= */

:root {
  /* ---------- Brand palette: trustworthy mid-blue ---------- */
  --color-brand-50:  238 244 255;  /* #eef4ff */
  --color-brand-100: 217 230 255;  /* #d9e6ff */
  --color-brand-200: 183 207 255;  /* #b7cfff */
  --color-brand-300: 139 177 255;  /* #8bb1ff */
  --color-brand-400: 91 139 255;   /* #5b8bff */
  --color-brand-500: 47 107 240;   /* #2f6bf0  (primary) */
  --color-brand-600: 32 85 209;    /* #2055d1 */
  --color-brand-700: 26 67 168;    /* #1a43a8 */
  --color-brand-800: 22 55 132;    /* #163784 */
  --color-brand-900: 17 42 99;     /* #112a63 */

  /* ---------- Neutral palette: warm slate ---------- */
  --color-ink-50:  247 248 250;    /* #f7f8fa */
  --color-ink-100: 238 240 244;    /* #eef0f4 */
  --color-ink-200: 221 225 233;    /* #dde1e9 */
  --color-ink-300: 188 195 209;    /* #bcc3d1 */
  --color-ink-400: 139 148 166;    /* #8b94a6 */
  --color-ink-500: 91 100 120;     /* #5b6478 */
  --color-ink-600: 63 71 90;       /* #3f475a */
  --color-ink-700: 42 49 66;       /* #2a3142 */
  --color-ink-800: 26 32 48;       /* #1a2030 */
  --color-ink-900: 13 19 32;       /* #0d1320 */

  /* ---------- Semantic ---------- */
  --color-success: 22 163 74;      /* #16a34a */
  --color-warning: 217 119 6;      /* #d97706 */
  --color-danger:  220 38 38;      /* #dc2626 */
  --color-info:    2 132 199;      /* #0284c7 */

  /* ---------- Surfaces ----------
     These are also RGB triplets; the helper classes (bg-bg, text-text,
     border-border) all use them via rgb(var(--…) / <alpha-value>). */
  --color-bg:            255 255 255;   /* #ffffff */
  --color-bg-muted:      247 248 250;   /* alias of ink-50 */
  --color-bg-subtle:     238 240 244;   /* alias of ink-100 */
  --color-border:        221 225 233;   /* alias of ink-200 */
  --color-border-strong: 188 195 209;   /* alias of ink-300 */
  --color-text:          26 32 48;      /* alias of ink-800 */
  --color-text-muted:    91 100 120;    /* alias of ink-500 */
  --color-text-inverse:  255 255 255;   /* #ffffff */

  /* ---------- Focus ring ---------- */
  --color-focus: 47 107 240;            /* alias of brand-500 */

  /* ---------- Radii ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-pop:  0 10px 25px -10px rgba(15, 23, 42, 0.25);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
}