/* ============================================================
   FORTEPIANO.RU — Foundations: Color & Type
   An independent editorial blog on digital pianos, grand pianos
   & synthesizers. Direction: "Ebony, Ivory & Felt".
   ------------------------------------------------------------
   Fonts loaded from Google Fonts (Cyrillic + Latin). These are
   INTERPRETED matches to the logo wordmark (a rounded geometric
   sans) — see README "Font substitution". Swap for licensed
   originals if/when available.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&display=swap&subset=cyrillic,cyrillic-ext,latin');

:root {
  /* ---------- TYPE FAMILIES ----------
     Rounded-geometric system built to echo the logo wordmark.
     Comfortaa IS the logo's face → all headings & brand display.
     Nunito (warm rounded humanist sans) → everything else.
     No serifs; numerals use tabular-nums for spec alignment. */
  --font-display: 'Comfortaa', 'Trebuchet MS', system-ui, sans-serif;   /* headlines, titles, brand — the logo face */
  --font-serif:   'Nunito', -apple-system, system-ui, sans-serif;        /* reading / prose — sans, no serifs (alias kept for components) */
  --font-sans:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* UI, labels, body */
  --font-mono:    'Nunito', -apple-system, system-ui, sans-serif;        /* specs/numerals — Nunito + tabular-nums (see .fp-num) */

  /* ---------- INK (warm near-black, "ebony") ---------- */
  --ink-900: #1A1714;  /* primary text, the brand black */
  --ink-800: #2A251F;
  --ink-700: #3D372F;  /* strong secondary text */
  --ink-600: #574F44;
  --ink-500: #6E6457;  /* muted text / captions */
  --ink-400: #948876;  /* faint text, placeholders */
  --ink-300: #B7AD9C;  /* disabled */
  --ink-200: #D9D0C0;  /* subtle dividers on cream */

  /* ---------- PAPER (clean white — focus on content) ---------- */
  --paper:     #FFFFFF;  /* app background — pure white */
  --paper-2:   #F4F4F3;  /* subtle sunk panels, alt rows (neutral, not beige) */
  --surface:   #FFFFFF;  /* cards, sheets */
  --surface-2: #FBFBFA;  /* barely-raised */

  /* ---------- LINES ---------- */
  --line:        #EAEAE8;  /* hairline borders */
  --line-strong: #D9D8D5;  /* stronger borders, inputs */

  /* ---------- FELT (primary accent — the red strip under piano keys) ---------- */
  --felt-50:  #FAEDEA;
  --felt-100: #F4DAD4;
  --felt:     #A6332A;  /* primary action, links, brand accent */
  --felt-600: #8E2922;  /* hover */
  --felt-700: #72201B;  /* active / pressed */

  /* ---------- BRASS (secondary — pedals, hinges, premium/editor's choice) ---------- */
  --brass-50: #F5EDDA;
  --brass:    #A87C32;
  --brass-600:#8C6526;
  --gold:     #C79A3E;  /* rating stars */

  /* ---------- SEMANTIC ---------- */
  --success:  #2F7D57;  --success-tint: #E4F0E9;
  --warning:  #B07D1E;  --warning-tint: #F6ECD4;
  --danger:   #B23A2E;  --danger-tint:  #F7E6E3;
  --info:     #2E6C8C;  --info-tint:    #E3EEF3;

  /* ---------- ALIASES (semantic foreground / background) ---------- */
  --fg:        var(--ink-900);
  --fg-2:      var(--ink-700);
  --fg-muted:  var(--ink-500);
  --fg-faint:  var(--ink-400);
  --fg-onfelt: #FCF4F2;
  --bg:        var(--paper);
  --bg-card:   var(--surface);
  --border:    var(--line);
  --accent:    var(--felt);
  --link:      var(--felt-600);

  /* ---------- RADII ---------- */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---------- SPACING (4pt base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- SHADOWS (soft, warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(26,23,20,.06);
  --shadow-sm: 0 1px 2px rgba(26,23,20,.05), 0 2px 6px rgba(26,23,20,.05);
  --shadow-md: 0 2px 4px rgba(26,23,20,.04), 0 6px 16px rgba(26,23,20,.08);
  --shadow-lg: 0 4px 8px rgba(26,23,20,.05), 0 16px 40px rgba(26,23,20,.12);
  --shadow-xl: 0 24px 64px rgba(26,23,20,.18);
  --ring-felt: 0 0 0 3px rgba(166,51,42,.22);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);     /* gentle ease-out, default */
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 130ms; --dur: 200ms; --dur-slow: 320ms;

  /* ---------- LAYOUT ---------- */
  --maxw: 1200px;       /* site container */
  --maxw-prose: 720px;  /* article measure */
}

/* ============================================================
   SEMANTIC TYPE — utility classes (use var(--font-*) directly
   in component CSS, or apply these classes).
   ============================================================ */
.fp-display-1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; color: var(--fg); }
.fp-display-2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.018em; color: var(--fg); }
.fp-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.015em; color: var(--fg); }
.fp-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -.012em; color: var(--fg); }
.fp-h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.26; letter-spacing: -.01em; color: var(--fg); }
.fp-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.34; letter-spacing: -.008em; color: var(--fg); }
.fp-eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 12.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--felt); }
.fp-prose { font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1.7; color: var(--ink-800); }
.fp-lead { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.55; color: var(--ink-700); }
.fp-body { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.62; color: var(--ink-700); }
.fp-small { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; line-height: 1.45; color: var(--fg-muted); }
.fp-meta { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .02em; color: var(--fg-muted); }
.fp-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .01em; color: var(--ink-700); }

/* Optional base element defaults (scoped to .fp-scope to avoid
   clobbering the Design System tab chrome). Apply class="fp-scope"
   to your <body> in deliverables. */
.fp-scope { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.fp-scope a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; }
.fp-scope ::selection { background: var(--felt-100); color: var(--ink-900); }