/**
 * Layer 2/3: Layout Variables (defaults) + Semantic Color Tokens
 * Overridden by layout inline with site config values.
 *
 * Token layers:
 *   1. Primitives  - raw hex, defined in _palette.css (--color-neutral-*, --color-success/warning/danger/info)
 *                    and brand defaults below (--primary-color, --secondary-color, gradient colors).
 *   2. Semantic    - --color-bg-*, --color-border*, --color-text*, --color-icon, --color-primary/accent/link below.
 *                    Components should consume ONLY these (plus brand vars for site-configurable colors).
 *   3. View-scoped - per-view _vars.css files may alias semantic tokens (e.g. --article-figma-border:
 *                    var(--color-border)) for naming continuity. New hex in view CSS is discouraged.
 *
 * Standardization decisions (legacy hex -> canonical semantic token):
 *   #e9ecef, #e2e8f0                         -> --color-border       (neutral-200)
 *   #f8f9fa, #f8fafc, #fafbfc                -> --color-bg-page / --color-bg-muted (neutral-50 / neutral-100)
 *   #212529, #1a202c, #1f2937, #1e293b, #0f172a -> --color-text       (neutral-900, canonical heading/body color)
 *   #6c757d, #4a5568, #495057, #718096       -> --color-text-secondary / --color-text-body / --color-icon (neutral-500 / neutral-600)
 *   #9ca3af, #adb5bd                         -> --color-text-muted    (neutral-400)
 *   #334155, #374151                         -> --color-neutral-700 / --color-text-body
 *   #22304D (legacy navy)                    -> --color-text (alias kept as --color-heading-legacy during migration)
 *   #ffffff                                  -> --color-bg-surface
 *
 * Backward-compat aliases (--color-text-primary, --color-bg, --color-surface, --color-border-*)
 * are kept pointing at the semantic tokens above so existing view CSS keeps working during migration.
 */
:root {
  /* Typography (universal) — Figma spec: Inter */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Size scale (de-duplicated from per-view duplicates in home-academy.css / conference _vars.css) */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-section-heading: 1.35rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Card / list-row anatomy — shared across featured cards and list rows */
  --font-size-card-title: 15px;   /* featured-card__title, conference-list-item__title */
  --font-size-card-meta:  13px;   /* cli-meta-row, conference-list-item__meta */
  --font-size-card-icon:  13px;   /* cli-chip__icon in card/list contexts */
  --font-size-card-badge: 12px;   /* badges/tags on cards (was 0.75rem), also .Tag-style/.Tag-style-1 */

  /* cli-meta-row middot (·) between date / location / stats segments */
  --cli-meta-sep-size: 13px;
  --cli-meta-sep-gap:  6px;       /* equal space before and after the dot */
  --cli-meta-sep-color: var(--color-text-muted);

  /* Article card anatomy (article_card.cfm) — title/meta */
  --font-size-article-title: 14px;  /* banner-card-title, horizontal-text */
  --font-size-article-meta:  11px;  /* conference-banner-card__meta, metadata-text, horizontal-author */

  /* cdp-chip pills — tags, media badges, stats (conference-detail.css)
     padding-y: 3px → total height = 1 border + 3 pad + 12 lh + 3 pad + 1 border = 20px */
  --cdp-chip-padding-y: 3px;
  --cdp-chip-padding-x: 7px;
  --cdp-chip-padding-x-icon: 5px;
  --cdp-chip-font-size: 10px;
  --cdp-chip-line-height: 12px;
  --cdp-chip-font-weight: 600;
  --cdp-chip-border-radius: 3px;
  --cdp-chip-inner-gap: 3px;

  /* Background */
  --color-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);

  /* Brand (defaults - overridden by layout) */
  --primary-color: #2563eb;
  --secondary-color: #2563eb;
  --app-background-color1: #2563eb;
  --app-background-color2: #2563eb;
  --text-color: #1e293b;
  --app-gradient-color1: #320270;
  --app-gradient-color2: #7420FF;
  --app-gradient-color3: #3B0F96;
  --brand-primary: var(--primary-color);
  --brand-darker: #061d47;

  /* ============================================================
     Semantic color tokens (layer 2) - consume these in component CSS
     ============================================================ */

  /* Backgrounds */
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: #ffffff;
  --color-bg-muted: var(--color-neutral-100);

  /* Borders */
  --color-border: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-300);

  /* Text */
  --color-text: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-muted: var(--color-neutral-400);
  --color-text-body: var(--color-neutral-600);
  --color-heading-legacy: var(--color-text); /* migration alias for legacy #22304D navy */

  /* Icons */
  --color-icon: var(--color-neutral-500);

  /* Brand (site-configurable colors stay in default.cfm; these are semantic aliases) */
  --color-primary: var(--primary-color);
  --color-accent: var(--secondary-color);
  --color-on-primary: #ffffff;
  --color-link: var(--primary-color);

  /* ============================================================
     Backward-compat aliases (existing per-view token names)
     ============================================================ */
  --color-text-primary: var(--color-text);
  --color-bg: var(--color-bg-surface);
  --color-surface: var(--color-bg-page);
}