/* ==========================================================================
   HailGeeks Blog — design tokens
   Extracted from the approved design package (blog-pages-export/).
   ========================================================================== */

:root {
  /* Brand color */
  --color-navy: #0b2e4e;
  --color-blue: #1277e1;
  --color-blue-hover: #0c5cb8;
  --color-blue-soft: #eaf2fd;
  --color-blue-soft-border: #d3e4fa;

  /* Surfaces */
  --color-page: #f4f5f6;
  --color-page-home: #f6f8fb;
  --color-surface: #ffffff;
  --color-pale-blue: #f5f8fc;
  --color-chip-bg: #f1f4f8;
  --color-footer-bg: #06162a;

  /* Text */
  --color-ink: #1a2230;
  --color-heading: #0b2e4e;
  --color-body: #46566a;
  --color-body-strong: #33404f;
  --color-muted: #5a6472;
  --color-meta: #6c7a8a;
  --color-home-body: #516070;

  /* Borders */
  --color-border: #e8e8ed;
  --color-border-soft: #eef1f5;
  --color-border-blue: #bcd4ee;
  --color-border-chip: #e3e9f1;
  --color-border-input: #d3ddea;
  --color-divider: #ebedf0;
  --color-disabled: #c2c8d0;

  /* Status */
  --color-success: #1f8a5b;
  --color-warning: #c2410c;
  --color-warning-deep: #9a3412;
  --color-warning-text: #7a4a1e;
  --color-warning-bg: #fff7ed;
  --color-warning-border: #f6d9b8;
  --color-error-500: #b5451f;

  /* Category accents (controlled set — referenced by category.accent_class) */
  --cat-color-blue: #1277e1;   --cat-soft-blue: #eaf2fd;
  --cat-color-orange: #c2410c; --cat-soft-orange: #fbe9e2;
  --cat-color-green: #1f8a5b;  --cat-soft-green: #e9f6ee;
  --cat-color-purple: #7c5cd6; --cat-soft-purple: #efe9fb;
  --cat-color-gold: #b7791f;   --cat-soft-gold: #fbf1dd;
  --cat-color-teal: #0e7490;   --cat-soft-teal: #e0f2f6;

  /* Typography */
  --font-sans: 'Public Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-body: 17.5px;
  --lh-body: 1.75;

  /* Layout */
  --container-lg: 1180px;
  --container-home: 1160px;
  --container-md: 1080px;
  --reading-col: 748px;
  --reading-col-max: 820px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card-hover: 0 14px 30px rgba(18, 119, 225, .12);
  --shadow-card-hover-lg: 0 18px 40px rgba(15, 40, 75, .12);
  --shadow-search: 0 8px 24px rgba(15, 40, 75, .06);
  --shadow-menu: 0 12px 24px rgba(11, 46, 78, .08);
  --shadow-banner: 0 24px 54px rgba(11, 46, 78, .2);

  /* Z-index */
  --z-skip-link: 60;
  --z-sticky-bar: 5;

  /* Motion */
  --ease-lift: transform .14s, box-shadow .14s, border-color .14s, background .14s, color .14s;

  /* Focus */
  --focus-ring: 3px solid #1277e1;
  --focus-offset: 2px;

  /* Media ratios */
  --ratio-card: 16 / 9;
  --ratio-hero: 21 / 9;
}