/* ============================================================
   Design Tokens - Summit Palette — Hills, Skies, Blooms
   Light mode by default. Dark mode via html.dark class.
   Optimized for readability and WCAG AA contrast.
   ============================================================ */

:root {
  /* ── Named Palette ─────────────────────────────────────────── */
  --hills: #315C4D;         /* Primary — deep forest green */
  --skies: #569AAB;         /* Secondary — teal blue */
  --blooms: #F48020;        /* Accent — vibrant orange */
  --golden: #D2AB4E;        /* Highlight — warm gold */
  --mute-cream: #F9EED5;    /* Mute — warm cream */
  --dark: #181819;          /* Dark — near black */
  --medium: #595A5F;        /* Medium — neutral gray */
  --light: #F4F4F0;         /* Light — warm off-white */

  /* ── Typography ──────────────────────────────────────────── */
  --vp-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  --vp-font-family-mono: 'Fira Code', 'Fira Mono', ui-monospace,
    SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 0.95rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.19rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.19rem;

  /* ── Backgrounds ─────────────────────────────────────────── */
  --vp-c-bg: #F4F4F0;
  --vp-c-bg-soft: #ECECE8;
  --vp-c-bg-mute: #E2E2DE;

  /* ── Text (based on Dark #181819) ──────────────────────────── */
  --vp-c-text-1: rgba(24, 24, 25);
  --vp-c-text-2: rgba(24, 24, 25, 0.72);
  --vp-c-text-3: rgba(24, 24, 25, 0.50);

  /* ── Borders & Dividers ──────────────────────────────────── */
  --vp-c-divider: rgba(24, 24, 25, 0.12);
  --vp-c-border: rgba(24, 24, 25, 0.18);

  /* ── Brand / Accent (Hills green) ───────────────────────── */
  --vp-c-brand-1: #315C4D;
  --vp-c-brand-2: #274A3E;
  --vp-c-brand-3: #1F3D32;
  --vp-c-brand-soft: rgba(49, 92, 77, 0.14);

  /* ── Semantic: Tip ───────────────────────────────────────── */
  --vp-c-tip: #315C4D;
  --vp-c-tip-soft: rgba(49, 92, 77, 0.14);

  /* ── Semantic: Warning ───────────────────────────────────── */
  --vp-c-warning: #F48020;
  --vp-c-warning-soft: rgba(244, 128, 32, 0.14);

  /* ── Semantic: Danger ────────────────────────────────────── */
  --vp-c-danger-1: #e5484d;
  --vp-c-danger-2: #c93c41;
  --vp-c-danger-soft: rgba(229, 72, 77, 0.14);

  /* ── Semantic: Info ──────────────────────────────────────── */
  --vp-c-info: #569AAB;
  --vp-c-info-soft: rgba(86, 154, 171, 0.14);

  /* ── Semantic: Success (alias for tip) ─────────────────────── */
  --vp-c-success: var(--vp-c-tip);
  --vp-c-success-soft: var(--vp-c-tip-soft);

  /* ── Button Tokens ─────────────────────────────────────────── */
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-text: #ffffff;
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-bg: var(--vp-c-brand-3);

  --vp-button-alt-bg: var(--vp-c-bg-mute);
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: var(--vp-c-bg-mute);

  /* ── Shadows (cool-tinted) ───────────────────────────────── */
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.08);
  --vp-shadow-3: 0 8px 30px rgba(0, 0, 0, 0.12);
  --vp-shadow-4: 0 12px 40px rgba(0, 0, 0, 0.16);

  /* ── Code Block Background ─────────────────────────────────── */
  --vp-code-block-bg: #EAEAE5;

  /* ── Editor Bridge Variables ───────────────────────────────── */
  --editor-bg: var(--vp-c-bg);
  --editor-text: var(--vp-c-text-1);
  --editor-border: var(--vp-c-divider);
  --editor-code-bg: var(--vp-code-block-bg);

  /* ── Layout Dimensions ─────────────────────────────────────── */
  --card-border-radius: 12px;
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 60px;
  --sidebar-mobile-width: 280px;
  --header-height: 60px;

  /* ── Spacing System ──────────────────────────────────────── */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 11px;
  --spacing-lg: 19px;
  --spacing-xl: 27px;
  --spacing-2xl: 40px;
  --spacing-3xl: 56px;

  /* ── Touch Target Accessibility ──────────────────────────── */
  --touch-target-min: 44px;
  --touch-target-recommended: 48px;
  --touch-gap-min: 8px;

  /* ── Z-Index Layers ──────────────────────────────────────── */
  --z-background: -1;
  --z-content: 1;
  --z-sidebar: 90;
  --z-header: 100;
  --z-overlay: 998;
  --z-modal: 999;
  --z-tooltip: 1000;

  /* ── Transition Curves (Material Design) ─────────────────── */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Admin Chrome (dark sidebar/header) ─────────────────────── */
  --sg-chrome-bg:       #1A2332;
  --sg-chrome-bg-hover: #243040;
  --sg-chrome-text:     rgba(255, 255, 255, 0.80);
  --sg-chrome-text-dim: rgba(255, 255, 255, 0.50);
  --sg-chrome-border:   rgba(255, 255, 255, 0.10);
}

/* ── Dark Mode Overrides ─────────────────────────────────────
   Applied when <html class="dark"> is set.
   ──────────────────────────────────────────────────────────── */

html.dark {
  /* Backgrounds — based on Dark #181819 */
  --vp-c-bg: #181819;
  --vp-c-bg-soft: #222224;
  --vp-c-bg-mute: #2E2E30;

  /* Text — based on Light #F4F4F0 */
  --vp-c-text-1: rgba(244, 244, 240, 0.90);
  --vp-c-text-2: rgba(244, 244, 240, 0.65);
  --vp-c-text-3: rgba(244, 244, 240, 0.40);

  /* Borders — based on Medium #595A5F */
  --vp-c-divider: rgba(89, 90, 95, 0.32);
  --vp-c-border: rgba(89, 90, 95, 0.48);

  /* Brand — lightened Hills for dark mode */
  --vp-c-brand-1: #5CB899;
  --vp-c-brand-2: #4D9E82;
  --vp-c-brand-3: #408A70;
  --vp-c-brand-soft: rgba(92, 184, 153, 0.14);

  /* Tip — lightened Hills */
  --vp-c-tip: #5CB899;
  --vp-c-tip-soft: rgba(92, 184, 153, 0.14);

  /* Warning — lightened Blooms */
  --vp-c-warning: #F9A050;
  --vp-c-warning-soft: rgba(249, 160, 80, 0.14);

  /* Danger */
  --vp-c-danger-1: #f87171;
  --vp-c-danger-2: #ef4444;
  --vp-c-danger-soft: rgba(248, 113, 113, 0.14);

  /* Info — lightened Skies */
  --vp-c-info: #7DC5D4;
  --vp-c-info-soft: rgba(125, 197, 212, 0.14);

  /* Buttons */
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-bg: var(--vp-c-brand-3);
  --vp-button-alt-bg: var(--vp-c-bg-mute);
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: #3A3A3E;

  /* Shadows */
  --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.16);
  --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.24);
  --vp-shadow-3: 0 8px 30px rgba(0, 0, 0, 0.32);
  --vp-shadow-4: 0 12px 40px rgba(0, 0, 0, 0.40);

  /* Code block */
  --vp-code-block-bg: #252528;

  /* Chrome (dark mode) */
  --sg-chrome-bg:       #111318;
  --sg-chrome-bg-hover: #1A1E28;
  --sg-chrome-text:     rgba(255, 255, 255, 0.85);
  --sg-chrome-text-dim: rgba(255, 255, 255, 0.45);
  --sg-chrome-border:   rgba(255, 255, 255, 0.08);
}