/* ============================================================
   M E T S A V E N D  D E S I G N  S Y S T E M
   Shared tokens for color, type, spacing, rules and motion.
   ============================================================ */

:root {
  /* Color primitives */
  --ink: #14100C;
  --ink-80: #332C24;
  --ink-60: #5C5247;
  --ink-40: #8E8578;
  --ink-20: #C6BEB1;

  --paper: #EFE6D3;
  --paper-deep: #E3D5B7;
  --paper-soft: #F5EDD9;
  --paper-wash: #F8F1DD;

  --ember: #AD3B18;
  --ember-on-dark: #E58A62;
  --ember-deep: #8A2F12;
  --moss: #394832;

  /* Semantic color */
  --color-text: var(--ink);
  --color-text-soft: var(--ink-80);
  --color-text-muted: var(--ink-60);
  --color-text-faint: var(--ink-40);
  --color-surface: var(--paper);
  --color-surface-raised: var(--paper-soft);
  --color-surface-wash: var(--paper-wash);
  --color-accent: var(--ember);
  --color-accent-deep: var(--ember-deep);

  --hairline: rgba(20, 16, 12, 0.18);
  --hairline-strong: rgba(20, 16, 12, 0.42);
  --hairline-soft: rgba(20, 16, 12, 0.1);
  --surface-ink-wash: rgba(20, 16, 12, 0.02);

  --on-ink: var(--paper);
  --on-ink-strong: rgba(239, 230, 211, 0.7);
  --on-ink-body: rgba(239, 230, 211, 0.6);
  --on-ink-muted: rgba(239, 230, 211, 0.55);
  --on-ink-faint: rgba(239, 230, 211, 0.5);
  --on-ink-rule: rgba(239, 230, 211, 0.15);
  --on-ink-rule-soft: rgba(239, 230, 211, 0.12);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --text-body: 17px;
  --text-body-sm: 15px;
  --text-body-compact: 16px;
  --text-label-xs: 9.5px;
  --text-label-sm: 10px;
  --text-label: 10.5px;
  --text-label-lg: 11px;
  --text-label-xl: 12px;

  --leading-solid: 1;
  --leading-tight: 1.1;
  --leading-compact: 1.45;
  --leading-note: 1.5;
  --leading-body: 1.65;

  --tracking-tight: -0.01em;
  --tracking-display: -0.025em;
  --tracking-label-tight: 0.08em;
  --tracking-label: 0.18em;
  --tracking-label-wide: 0.2em;
  --tracking-label-wider: 0.22em;
  --tracking-label-max: 0.35em;

  /* Space */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-2xl: 36px;
  --space-3xl: 48px;

  --gutter: clamp(14px, 2vw, 28px);
  --margin-x: clamp(20px, 4.5vw, 72px);
  --section-y: clamp(80px, 12vw, 160px);
  --page-max-width: 1440px;

  /* Layout */
  --content-width: min(100%, var(--page-max-width));
  --grid-gap-page: clamp(18px, 3vw, 48px);
  --grid-gap-compact: clamp(14px, 2vw, 28px);

  /* Motion */
  --duration-fast: 220ms;
  --duration-base: 240ms;
  --duration-slow: 0.4s;
  --ease-standard: ease;
  --ease-organic: cubic-bezier(.2,.8,.2,1);
}

/* Shared scrollbars, using the existing paper and ember palette. */
@media (forced-colors: none) {
  :root {
    scrollbar-color: var(--ember) var(--paper-deep);
    scrollbar-width: thin;
  }

  /* Native sizing and rounded thumbs in Chromium and Safari. */
  @supports selector(::-webkit-scrollbar) {
    :root {
      scrollbar-color: auto;
      scrollbar-width: auto;
    }

    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    ::-webkit-scrollbar-track {
      background: var(--paper-deep);
    }

    ::-webkit-scrollbar-thumb {
      min-height: 40px;
      min-width: 40px;
      border: 3px solid var(--paper-deep);
      border-radius: 999px;
      background: var(--ember);
      background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background-color: var(--ink-80);
    }

    ::-webkit-scrollbar-corner {
      background: var(--paper-deep);
    }
  }
}