/* МедПапка — Design tokens
   Strict palette only: graphite, cream, white, pine green accent (use sparingly).
   Inter is the only typeface (Bold 700, Medium 500, Regular 400).
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── COLOR ──────────────────────────────────────────────── */
  --graphite:    #0F0F0F;   /* text, dark surface, mark */
  --cream:       #F2EBDC;   /* primary surface */
  --white:       #FFFFFF;   /* alternate surface, print */
  --pine:        #2C4A3E;   /* quiet accent, used sparingly */

  /* Light theme — cream surface, graphite ink */
  --bg:          var(--cream);
  --bg-alt:      var(--white);
  --bg-inset:    #ECE5D5;                       /* darker cream wash for inset/hover */
  --fg:          var(--graphite);
  --fg-muted:    rgba(15, 15, 15, 0.62);        /* secondary text */
  --fg-subtle:   rgba(15, 15, 15, 0.42);        /* tertiary text */
  --fg-caption:  rgba(15, 15, 15, 0.55);        /* captions/metadata (per brandbook) */

  /* Hairline borders (no shadows in the system) */
  --hairline:    rgba(15, 15, 15, 0.08);        /* default card / input border */
  --hairline-strong: rgba(15, 15, 15, 0.14);    /* dividers between sections */
  --hairline-hover:  rgba(15, 15, 15, 0.20);    /* focus & hover emphasis */

  /* Hover/press washes — derived only from graphite alpha */
  --hover-wash:  rgba(15, 15, 15, 0.04);
  --press-wash:  rgba(15, 15, 15, 0.08);

  /* Accent (pine) — quiet, used for confirmations, single-state highlights */
  --accent:        var(--pine);
  --accent-fg:     var(--cream);
  --accent-soft:   rgba(44, 74, 62, 0.10);
  --accent-hairline: rgba(44, 74, 62, 0.28);

  /* ── TYPE ───────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — pt-equivalent px on 16px base */
  --t-display:   44px;   /* hero, marketing landing */
  --t-h1:        32px;
  --t-h2:        24px;
  --t-h3:        20px;
  --t-h4:        17px;
  --t-body:      15px;
  --t-body-sm:   14px;
  --t-caption:   12px;
  --t-micro:     11px;

  --lh-tight:    1.10;
  --lh-snug:     1.25;
  --lh-body:     1.55;   /* per brandbook */
  --lh-loose:    1.70;

  --tr-display:  -0.022em;   /* −1 @ 44px ≈ −0.023em, normalized */
  --tr-h:        -0.018em;   /* headings */
  --tr-sub:     -0.006em;    /* subheads (~−0.3 @ ≥16px) */
  --tr-body:     0em;
  --tr-caption:  0em;

  /* ── SHAPE ──────────────────────────────────────────────── */
  --r-xs:   8px;
  --r-sm:  12px;    /* buttons (lower bound) */
  --r-md:  16px;    /* buttons (upper) / cards (lower) */
  --r-lg:  20px;    /* cards (upper) */
  --r-xl:  24px;    /* large surfaces, sheets */
  --r-pill: 999px;

  /* ── SPACE ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease-quiet:   cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-settle:  cubic-bezier(0.2, 0.7, 0.1, 1.0);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;

  /* ── ICON ───────────────────────────────────────────────── */
  --icon-stroke: 1.5;
  --icon-color:  var(--graphite);
}

/* Dark theme — graphite surface, cream ink (per brandbook night mode) */
[data-theme="dark"] {
  --bg:          var(--graphite);
  --bg-alt:      #1A1A1A;
  --bg-inset:    #1F1F1F;
  --fg:          var(--cream);
  --fg-muted:    rgba(242, 235, 220, 0.62);
  --fg-subtle:   rgba(242, 235, 220, 0.42);
  --fg-caption:  rgba(242, 235, 220, 0.55);
  --hairline:    rgba(242, 235, 220, 0.10);
  --hairline-strong: rgba(242, 235, 220, 0.16);
  --hairline-hover:  rgba(242, 235, 220, 0.22);
  --hover-wash:  rgba(242, 235, 220, 0.04);
  --press-wash:  rgba(242, 235, 220, 0.08);
  --accent-fg:     var(--cream);
  --accent-soft:   rgba(44, 74, 62, 0.22);
  --accent-hairline: rgba(44, 74, 62, 0.45);
  --icon-color:  var(--cream);
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── SEMANTIC TYPE ────────────────────────────────────────── */
.t-display {
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-h1, h1 {
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h);
}
.t-h2, h2 {
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h);
}
.t-h3, h3 {
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h);
}
.t-sub {
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-sub);
}
.t-body, p {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
}
.t-body-sm {
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}
.t-caption {
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.35;
  color: var(--fg-caption);
  letter-spacing: 0;
}
.t-micro {
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.3;
  color: var(--fg-caption);
  text-transform: none;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  letter-spacing: 0;
}

/* Helpers */
.mp-muted   { color: var(--fg-muted); }
.mp-subtle  { color: var(--fg-subtle); }
.mp-caption { color: var(--fg-caption); }
.mp-accent  { color: var(--accent); }