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

:root {
  /* ── Named Palette ─────────────────────────────────────────── */
  --hills: #1F5E4B;         /* Primary — deep forest green */
  --skies: #569AAB;         /* Secondary — teal blue */
  --blooms: #F3781F;        /* Accent — vibrant orange */
  --golden: #D6A834;        /* Highlight — warm gold */
  --mute-cream: #F8EBD0;    /* Mute — warm cream */
  --dark: #141614;          /* Dark — near black */
  --medium: #5A5B60;        /* Medium — neutral gray */
  --light: #FDF6E9;         /* Light — warm off-white */

  /* ── Typography ──────────────────────────────────────────── */
  --vp-font-family-base: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  --vp-font-family-serif: Newsreader, Georgia, 'Times New Roman', 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: #FDF6E9;
  --vp-c-bg-soft: #FBF0DC;
  --vp-c-bg-mute: #F8EBD0;

  /* ── Text (based on Dark #181819) ──────────────────────────── */
  --vp-c-text-1: #141614;
  --vp-c-text-2: #5A5B60;
  --vp-c-text-3: rgba(20, 22, 20, 0.60);

  /* ── Borders & Dividers ──────────────────────────────────── */
  --vp-c-divider: #C3BEB4;
  --vp-c-border: #141614;

  /* ── Brand / Accent (Hills green) ───────────────────────── */
  --vp-c-brand-1: #1F5E4B;
  --vp-c-brand-2: #123A2E;
  --vp-c-brand-3: #0C2A21;
  --vp-c-brand-soft: rgba(31, 94, 75, 0.12);

  /* ── Semantic: Tip ───────────────────────────────────────── */
  --vp-c-tip: #1F5E4B;
  --vp-c-tip-soft: rgba(31, 94, 75, 0.12);

  /* ── Semantic: Warning ───────────────────────────────────── */
  --vp-c-warning: #B8410A;
  --vp-c-warning-soft: rgba(214, 168, 52, 0.22);

  /* ── 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: none;
  --vp-shadow-2: none;
  --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: #F8EBD0;

  /* ── 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: 2px;
  --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);
}

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

html.dark {
  color-scheme: dark;
  /* Backgrounds — based on Dark #181819 */
  --vp-c-bg: #141614;
  --vp-c-bg-soft: #1B1D1B;
  --vp-c-bg-mute: #222321;

  /* Text — based on Light #F4F4F0 */
  --vp-c-text-1: #FDF6E9;
  --vp-c-text-2: #9B9890;
  --vp-c-text-3: rgba(253, 246, 233, 0.50);

  /* Borders — based on Medium #595A5F */
  --vp-c-divider: #474743;
  --vp-c-border: #FDF6E9;

  /* Brand — lightened Hills for dark mode */
  --vp-c-brand-1: #53AC91;
  --vp-c-brand-2: #6BBFA4;
  --vp-c-brand-3: #84CCB4;
  --vp-c-brand-soft: rgba(83, 172, 145, 0.16);

  /* Tip — lightened Hills */
  --vp-c-tip: #53AC91;
  --vp-c-tip-soft: rgba(83, 172, 145, 0.16);

  /* Warning — lightened Blooms */
  --vp-c-warning: #F3781F;
  --vp-c-warning-soft: rgba(74, 63, 29, 0.9);

  /* 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-text: #141614;
  --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: #2C2D2B;

  /* Shadows */
  --vp-shadow-1: none;
  --vp-shadow-2: none;
  --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: #222321;
}