/* base.css
   Core design tokens + component styles for the theme.
   Components only reference CSS variables so skins can override them.
*/

/* ---------------------------
   Design tokens (defaults)
   --------------------------- */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-muted: #6b7280; /* gray-500 */
  --color-text: #111827; /* gray-900 */
  --color-primary: #0b66d1;
  --color-primary-strong: #084fa8;
  --color-accent: #ff8a00;
  --color-success: #059669;
  --color-danger: #dc2626;
  --color-link: var(--color-primary);

  /* Inverse / on-color */
  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  /* Footer backgrounds (subtle, cooler neutrals by default) */
  --color-footer-bg: #0f172a; /* slate-900 */
  --color-footer-bg-2: #1e293b; /* slate-800 */
  --color-footer-surface: rgba(255, 255, 255, 0.06); /* cards/chips on footer */

  /* Footer content */
  --color-on-footer: #ffffff; /* text/icons on footer */
  --color-footer-muted: #94a3b8; /* slate-400 for secondary text */
  --color-footer-link: #e2e8f0; /* slate-200 (links on dark) */
  --color-footer-link-hover: var(--color-accent); /* highlight on hover */

  /* Footer accents and borders */
  --color-footer-accent: var(--color-accent);
  --color-footer-border: rgba(255, 255, 255, 0.12);
  --color-footer-overlay: rgba(17, 24, 39, 0.35); /* subtle dark glaze */

  /* Gradient stops (use in backgrounds) */
  --gradient-footer-start: var(--color-footer-bg);
  --gradient-footer-end: var(--color-footer-bg-2);

  /* Type */
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --type-base: 1rem; /* 16px */
  --leading: 1.45;
  --scale-ratio: 1.25;

  /* Type sizes (rem) - small but explicit for clarity */
  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-md: 1rem;      /* 16px */
  --fs-lg: 1.125rem;  /* 18px */
  --fs-xl: 1.375rem;  /* 22px */
  --fs-2xl: 1.75rem;  /* 28px */
  --fs-3xl: 2.25rem; /* 36px */
  --fs-4xl: 2.75rem; /* 44px */
  --fs-5xl: 3.25rem; /* 52px */
  --fs-6xl: 3.75rem; /* 60px */
  --fs-7xl: 4.5rem;  /* 72px */
  --fs-8xl: 5.5rem;  /* 88px */
  --fs-9xl: 6.5rem;  /* 104px */

  /* Spacing scale (rem) */
  --space-0: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* Radii & shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-none: none;
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 6px 18px rgba(17, 24, 39, 0.08);

  /* Layout */
  --container-max: 100%;
  --gutter: var(--space-3);

  /* Transition */
  --ease-fast: 180ms;
  --ease: 280ms;

  /* Breakpoints (use raw px in media queries below) */
  --bp-sm: 640px;
  --bp-md: 880px;
  --bp-lg: 1100px;
}