/* ─────────────────────────────────────────────────────────────────────────
   Mokosh Design System — colors_and_type.css
   Single source of truth for foundational tokens.
   Surfaces: Chrome MV3 popup, welcome page, notification copy, toolbar.
   Audience: Russian-first operators. Cyrillic coverage required.
   ───────────────────────────────────────────────────────────────────── */

/* Fonts (bundled locally; MV3 CSP forbids remote @font-face at runtime).
   Substitution flag — until licensed files arrive, these are loaded from
   Google Fonts in PREVIEW HTML only. Production bundles ship the same
   families locally from /fonts/. See fonts/README.md. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Palette ──────────────────────────────────────────────────────────
     The "loom" palette. Warm-earthy, NOT clinical-blue. Reads as
     restrained, professional, slightly hand-made — distinct from the
     standard SaaS Material defaults the engineering placeholder used.
     Each step validated for WCAG AA against its intended pair. */

  /* Linen — primary surface family (warm off-white through stone) */
  --mks-linen-50:  #faf7f1;   /* page background */
  --mks-linen-100: #f3eee4;   /* card / popup surface */
  --mks-linen-200: #e8e0d0;   /* hairline / divider on linen */
  --mks-linen-300: #d4c9b5;   /* muted edge */

  /* Ink — text + inverse surface family (warm near-black indigo) */
  --mks-ink-900: #181b2a;     /* primary text, deepest surface */
  --mks-ink-800: #232639;     /* dark surface */
  --mks-ink-700: #2f3349;     /* dark surface raised */
  --mks-ink-500: #5b5f76;     /* secondary text on linen */
  --mks-ink-400: #7a7e94;     /* tertiary text, captions */
  --mks-ink-300: #a4a7b8;     /* disabled text */

  /* Accents — state colors. Each is a dye reference. */
  --mks-madder-600: #b2543d;  /* REC accent — Rubia tinctorum dye */
  --mks-madder-700: #963f29;  /* REC pressed */
  --mks-madder-100: #f5e2db;  /* REC tint */

  --mks-moss-600:   #5a7349;  /* success / saved */
  --mks-moss-700:   #455a38;
  --mks-moss-100:   #e2e9da;

  --mks-amber-600:  #c98b3a;  /* warning / recoverable error */
  --mks-amber-100:  #f6e6c8;

  --mks-brick-600:  #a23a2b;  /* unrecoverable error */
  --mks-brick-100:  #f0d5cf;

  /* Semantic — point these at the palette. Use these in components. */
  --mks-surface:        var(--mks-linen-50);
  --mks-surface-raised: var(--mks-linen-100);
  --mks-surface-sunken: var(--mks-linen-200);
  --mks-surface-inverse: var(--mks-ink-900);

  --mks-fg-1:  var(--mks-ink-900);   /* primary text */
  --mks-fg-2:  var(--mks-ink-500);   /* secondary text */
  --mks-fg-3:  var(--mks-ink-400);   /* tertiary / caption */
  --mks-fg-disabled: var(--mks-ink-300);
  --mks-fg-inverse:  var(--mks-linen-50);

  --mks-border:        var(--mks-linen-200);
  --mks-border-strong: var(--mks-linen-300);
  --mks-border-focus:  var(--mks-ink-900);

  --mks-rec:     var(--mks-madder-600);
  --mks-success: var(--mks-moss-600);
  --mks-warning: var(--mks-amber-600);
  --mks-error:   var(--mks-brick-600);

  /* ── Type ─────────────────────────────────────────────────────────────
     Three families. Newsreader for display (serif with calm character).
     IBM Plex Sans for UI body (excellent Cyrillic; not Inter/Roboto).
     IBM Plex Mono for diagnostic / timer overlays. */

  --mks-font-display: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --mks-font-ui:      "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mks-font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Base type scale — ratio ~1.2, tuned for popup density.
     Smallest size 11px is reserved for badge labels only. */
  --mks-text-xs:   11px;
  --mks-text-sm:   13px;
  --mks-text-base: 15px;
  --mks-text-md:   17px;
  --mks-text-lg:   20px;
  --mks-text-xl:   28px;
  --mks-text-2xl:  40px;
  --mks-text-3xl:  56px;

  --mks-lh-tight: 1.15;
  --mks-lh-snug:  1.3;
  --mks-lh-base:  1.5;

  --mks-weight-regular: 400;
  --mks-weight-medium:  500;
  --mks-weight-semibold: 600;
  --mks-weight-bold:    700;

  /* Display tracking — Newsreader at large sizes wants negative tracking */
  --mks-tracking-display: -0.015em;
  --mks-tracking-tight:   -0.005em;
  --mks-tracking-base:    0;
  --mks-tracking-loose:   0.04em;   /* eyebrow / caps labels */
  --mks-tracking-caps:    0.08em;   /* badge text REC / ERR */

  /* ── Spacing ──────────────────────────────────────────────────────────
     4px base. Steps named by px multiple for clarity. */
  --mks-space-1:  4px;
  --mks-space-2:  8px;
  --mks-space-3:  12px;
  --mks-space-4:  16px;
  --mks-space-5:  20px;
  --mks-space-6:  24px;
  --mks-space-8:  32px;
  --mks-space-10: 40px;
  --mks-space-12: 48px;
  --mks-space-16: 64px;
  --mks-space-20: 80px;

  /* ── Radius ───────────────────────────────────────────────────────────
     Architectural. Sharp-ish — 4px base, 8px cards, 999 chips. NOT pillow. */
  --mks-radius-sm:  2px;   /* badge text container */
  --mks-radius-md:  4px;   /* default control */
  --mks-radius-lg:  8px;   /* card, popup body */
  --mks-radius-xl:  12px;  /* welcome hero card */
  --mks-radius-full: 999px;/* chips, recording dot */

  /* ── Borders + shadows ───────────────────────────────────────────────
     One pixel hairline, low-elevation shadows.
     Restrained — no big card drop-shadows. */
  --mks-border-width: 1px;

  /* Hairline shadow — for buttons */
  --mks-shadow-1: 0 1px 0 rgba(24, 27, 42, 0.04),
                  0 1px 2px rgba(24, 27, 42, 0.06);
  /* Card shadow — popup elevation */
  --mks-shadow-2: 0 1px 2px rgba(24, 27, 42, 0.06),
                  0 4px 12px rgba(24, 27, 42, 0.08);
  /* Floating — modal / tooltip */
  --mks-shadow-3: 0 2px 4px rgba(24, 27, 42, 0.08),
                  0 12px 32px rgba(24, 27, 42, 0.12);
  /* Inset — sunken surfaces, fields */
  --mks-shadow-inset: inset 0 1px 0 rgba(24, 27, 42, 0.04);
  /* Focus ring — visible against any surface, color-independent */
  --mks-shadow-focus: 0 0 0 3px rgba(24, 27, 42, 0.18);

  /* ── Motion ───────────────────────────────────────────────────────────
     Quiet. No bounces. Reduced-motion is honored at the component level. */
  --mks-dur-fast:   120ms;
  --mks-dur-base:   200ms;
  --mks-dur-slow:   320ms;
  --mks-ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --mks-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────────────────*/
  --mks-popup-w:   320px;
  --mks-popup-min-h: 180px;
  --mks-welcome-max-w: 720px;
}

/* Dark theme — applied via .dark on root OR @media (prefers-color-scheme).
   Used for the dark popup variant, smoke diagnostic overlay, and any
   future dark Chrome theme support. */
.dark, [data-theme="dark"] {
  --mks-surface:        var(--mks-ink-900);
  --mks-surface-raised: var(--mks-ink-800);
  --mks-surface-sunken: #11131e;
  --mks-surface-inverse: var(--mks-linen-50);

  --mks-fg-1: #ece7dc;
  --mks-fg-2: #a4a7b8;
  --mks-fg-3: #7a7e94;
  --mks-fg-disabled: #5b5f76;
  --mks-fg-inverse: var(--mks-ink-900);

  --mks-border:        rgba(243, 238, 228, 0.08);
  --mks-border-strong: rgba(243, 238, 228, 0.14);
  --mks-border-focus:  var(--mks-linen-50);

  --mks-shadow-focus: 0 0 0 3px rgba(243, 238, 228, 0.24);
}

/* ── Semantic typography helpers ──────────────────────────────────────
   Apply these classes; do not redefine sizes ad-hoc. */
.mks-display-1 {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-3xl);
  line-height: var(--mks-lh-tight);
  letter-spacing: var(--mks-tracking-display);
  font-weight: var(--mks-weight-regular);
  color: var(--mks-fg-1);
}
.mks-display-2 {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-2xl);
  line-height: var(--mks-lh-tight);
  letter-spacing: var(--mks-tracking-display);
  font-weight: var(--mks-weight-regular);
  color: var(--mks-fg-1);
}
.mks-h1 {
  font-family: var(--mks-font-display);
  font-size: var(--mks-text-xl);
  line-height: var(--mks-lh-tight);
  letter-spacing: var(--mks-tracking-tight);
  font-weight: var(--mks-weight-regular);
  color: var(--mks-fg-1);
}
.mks-h2 {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-lg);
  line-height: var(--mks-lh-snug);
  font-weight: var(--mks-weight-semibold);
  color: var(--mks-fg-1);
}
.mks-h3 {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-md);
  line-height: var(--mks-lh-snug);
  font-weight: var(--mks-weight-semibold);
  color: var(--mks-fg-1);
}
.mks-body {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-base);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-1);
}
.mks-body-sm {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-sm);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-2);
}
.mks-caption {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-xs);
  line-height: var(--mks-lh-snug);
  color: var(--mks-fg-3);
}
.mks-eyebrow {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-xs);
  line-height: var(--mks-lh-snug);
  letter-spacing: var(--mks-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--mks-weight-semibold);
  color: var(--mks-fg-2);
}
.mks-mono {
  font-family: var(--mks-font-mono);
  font-size: var(--mks-text-sm);
  line-height: var(--mks-lh-base);
  color: var(--mks-fg-1);
}
.mks-badge-label {
  font-family: var(--mks-font-ui);
  font-size: var(--mks-text-xs);
  line-height: 1;
  letter-spacing: var(--mks-tracking-caps);
  text-transform: uppercase;
  font-weight: var(--mks-weight-bold);
}

/* Accessibility — honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mks-dur-fast: 0ms;
    --mks-dur-base: 0ms;
    --mks-dur-slow: 0ms;
  }
}