/*
 * THE TEA — Design System Tokens v1.0.0
 * Single source of truth для всех 28 sub-проектов constellation.
 * Created 2026-05-19 · Evgeniy Smoley
 *
 * USAGE:
 *   <link rel="stylesheet" href="/path/to/design-system/tokens.css">
 *
 * OVERRIDE per sibling — только --accent-h:
 *   :root { --accent-h: 178; }  // tea.villas bali-teal
 */

:root {
  /* =====================================================================
   * FOUNDATION COLORS — все 28 проектов (кроме mafiatea)
   * HSL palette для consistent saturation curve.
   * ===================================================================== */

  /* Backgrounds */
  --bg-light:        hsl(40, 33%, 94%);   /* cream #f5f1e8 */
  --bg-dark:         hsl(40, 12%, 11%);   /* near-black #1f1d18 */
  --bg-subtle:       hsl(40, 25%, 96%);   /* lighter cream — cards on light */
  --bg-elevated:     hsl(40, 33%, 98%);   /* highest — modals */

  /* Text */
  --text-primary:    hsl(40, 14%, 14%);   /* on light bg */
  --text-secondary:  hsl(40, 8%, 38%);    /* ~60% authority — secondary */
  --text-muted:      hsl(40, 5%, 56%);    /* ~40% — captions, footnotes */
  --text-disabled:   hsl(40, 3%, 72%);

  /* On dark bg */
  --text-primary-dark:    hsl(40, 22%, 92%);
  --text-secondary-dark:  hsl(40, 12%, 70%);
  --text-muted-dark:      hsl(40, 6%, 54%);

  /* Borders & dividers */
  --border-subtle:   hsl(40, 10%, 86%);
  --border:          hsl(40, 10%, 78%);
  --border-strong:   hsl(40, 12%, 64%);

  /* Semantic — sparingly used */
  --semantic-success: hsl(138, 38%, 38%);
  --semantic-warning: hsl(38, 62%, 50%);
  --semantic-danger:  hsl(8, 56%, 48%);
  --semantic-info:    hsl(220, 38%, 48%);

  /* =====================================================================
   * ACCENT — per sibling override через --accent-h
   * Default 152 = tea-green (main encyclopedia).
   * ===================================================================== */

  --accent-h:        152;
  --accent-s:        22%;
  --accent-l:        38%;

  --accent:          hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-hover:    hsl(var(--accent-h), calc(var(--accent-s) + 4%), calc(var(--accent-l) - 6%));
  --accent-active:   hsl(var(--accent-h), calc(var(--accent-s) + 6%), calc(var(--accent-l) - 10%));
  --accent-subtle:   hsl(var(--accent-h), calc(var(--accent-s) - 8%), 92%);
  --accent-muted:    hsl(var(--accent-h), calc(var(--accent-s) - 7%), 88%);
  --accent-text:     var(--bg-light);  /* text on accent bg */

  /* =====================================================================
   * TYPOGRAPHY — handoff v3.10 ×1.6 scale
   * Hand-picked NOT ratio-based (Refactoring UI principle).
   * ===================================================================== */

  /* Font families */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-pinyin:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Scale (×1.6) */
  --text-caption:    11px;
  --text-small:      13px;
  --text-body-sm:    14px;
  --text-body:       16px;
  --text-body-lg:    18px;
  --text-h6:         21px;
  --text-h5:         25px;
  --text-h4:         30px;
  --text-h3:         37px;
  --text-h2:         47px;
  --text-h1:         59px;
  --text-display:    75px;

  /* Line heights */
  --lh-tight:        1.1;     /* display */
  --lh-headline:     1.2;     /* h1-h3 */
  --lh-subheadline:  1.35;    /* h4-h5 */
  --lh-normal:       1.5;     /* body */
  --lh-relaxed:      1.6;     /* body на reading pages */
  --lh-loose:        1.75;    /* long-form atlas, encyclopedia */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter spacing */
  --tracking-tight:    -0.02em;   /* large display */
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-caps:     0.08em;    /* small caps, all-caps labels */

  /* =====================================================================
   * SPACING — handoff v3.10 ×2 scale
   * ===================================================================== */

  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   16px;
  --space-5:   32px;
  --space-6:   64px;
  --space-7:   128px;
  --space-8:   256px;

  /* Semantic spacing */
  --space-inline:    var(--space-3);   /* gap внутри строки */
  --space-stack-sm:  var(--space-4);   /* gap между elements */
  --space-stack:     var(--space-5);   /* gap между blocks */
  --space-stack-lg:  var(--space-6);   /* gap между sections */
  --space-section:   var(--space-7);   /* gap между major sections */

  /* =====================================================================
   * LAYOUT — containers
   * ===================================================================== */

  --prose-max:    65ch;        /* reading content max-width */
  --prose-wide:   75ch;        /* technical content */
  --container:    1280px;      /* dashboard / shop layout max */
  --container-narrow: 720px;   /* forms, sign-up flows */

  /* Breakpoints — для @media queries (используются в JS как values too) */
  --bp-mobile:    375px;
  --bp-tablet:    768px;
  --bp-desktop:   1024px;
  --bp-wide:      1440px;

  /* =====================================================================
   * BORDERS, RADIUS, SHADOWS — minimal
   * ===================================================================== */

  --radius-sm:    2px;
  --radius:       4px;
  --radius-lg:    8px;
  --radius-pill:  9999px;

  /* Shadow elevation system (Refactoring UI: defined levels, не random) */
  --shadow-sm:   0 1px 2px hsl(40 12% 11% / 0.04);
  --shadow:      0 2px 4px hsl(40 12% 11% / 0.06), 0 1px 2px hsl(40 12% 11% / 0.04);
  --shadow-lg:   0 8px 16px hsl(40 12% 11% / 0.08), 0 4px 8px hsl(40 12% 11% / 0.04);
  --shadow-xl:   0 16px 32px hsl(40 12% 11% / 0.10), 0 8px 16px hsl(40 12% 11% / 0.06);

  /* =====================================================================
   * MOTION — restraint, prefers-reduced-motion respected
   * ===================================================================== */

  --duration-fast:   150ms;
  --duration:        250ms;
  --duration-slow:   400ms;

  --easing:          cubic-bezier(0.4, 0, 0.2, 1);
  --easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --easing-in:       cubic-bezier(0.4, 0, 1, 1);

  /* =====================================================================
   * Z-INDEX scale — explicit, не arbitrary
   * ===================================================================== */

  --z-base:          0;
  --z-elevated:      10;
  --z-sticky:        50;
  --z-overlay:       100;
  --z-modal:         200;
  --z-toast:         300;
}

/* =======================================================================
 * DARK MODE — auto через prefers-color-scheme
 * Swap bg/text foundation
 * ======================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-light:        hsl(40, 12%, 11%);    /* swap to dark */
    --bg-dark:         hsl(40, 33%, 94%);    /* swap to light */
    --bg-subtle:       hsl(40, 12%, 14%);
    --bg-elevated:     hsl(40, 12%, 18%);

    --text-primary:    hsl(40, 22%, 92%);
    --text-secondary:  hsl(40, 12%, 70%);
    --text-muted:      hsl(40, 6%, 54%);

    --border-subtle:   hsl(40, 8%, 20%);
    --border:          hsl(40, 8%, 28%);
    --border-strong:   hsl(40, 10%, 42%);

    --accent-l:        52%;   /* slightly brighter on dark */
  }
}

/* =======================================================================
 * MOTION — respect user preference
 * ======================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration:        0ms;
    --duration-slow:   0ms;
  }
}

/* =======================================================================
 * BASE STYLES — minimal reset using tokens
 * Applies к body if used as global stylesheet.
 * ======================================================================= */

html {
  font-size: var(--text-body);
  font-family: var(--font-sans);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  font-feature-settings: "ss01" on, "cv11" on;  /* Inter stylistic alternates */
}

/* House voice typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--lh-headline);
  color: var(--text-primary);
  margin: 0;
}

h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  max-width: var(--prose-max);  /* enforce reading width — Santa Maria */
}

/* Pinyin — always italic with tone marks */
.pinyin, em.pinyin {
  font-family: var(--font-pinyin);
  font-style: italic;
  font-feature-settings: "lnum" on;  /* lining numerals для tone marks */
}

/* Curly quotes default */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";   /* English curly */
}

q:lang(ru) {
  quotes: "\00AB" "\00BB" "\201E" "\201C";   /* Russian guillemets */
}

q:lang(zh) {
  quotes: "\300C" "\300D" "\300E" "\300F";   /* Chinese corner brackets */
}

/* Tabular numerals для cifrach в spec tables */
table, .tabular-nums {
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Em-dash spacing — handled in content, но дополнительно через CSS */
.em-dash {
  letter-spacing: 0;
  word-spacing: 0;
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--accent-muted);
  color: var(--text-primary);
}

/* =======================================================================
 * UTILITY CLASSES — minimal, sparingly used
 * ======================================================================= */

.prose {
  max-width: var(--prose-max);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
}

.prose-wide {
  max-width: var(--prose-wide);
}

.kicker {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.dek {
  font-size: var(--text-body-lg);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  max-width: var(--prose-max);
  margin-top: var(--space-3);
}

/* Display text — only for hero on landing pages */
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}