/* ============================================================
   Ozimiz Design Tokens — colors, typography, spacing, motion
   ------------------------------------------------------------
   A community-first learning platform for the CIS market.
   Tone: focused, warm, local, grown-up, capable, trustworthy.
   ============================================================ */

/* ---- Fonts ----------------------------------------------- */
/* Primary: Manrope (display + body) — excellent Cyrillic +
   Latin coverage, slightly warmer than Inter.
   Tabular/numeric: same family with tnum.
   Mono: JetBrains Mono (developer-only surfaces). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   COLOR TOKENS — Light mode (default)
   ============================================================ */
:root {
  /* Brand */
  --brand-primary:        #1E6FBA; /* confident sky blue — trust + steppe */
  --brand-primary-hover:  #185A96;
  --brand-primary-fg:     #FFFFFF;

  --brand-accent:         #F4B942; /* warm amber — reward, level-up, publish */
  --brand-accent-hover:   #E0A832;
  --brand-accent-fg:      #15161A;

  /* Semantic */
  --success:              #2E7D5B;
  --success-fg:           #FFFFFF;
  --success-bg:           #E8F3EC;

  --warning:              #C68212;
  --warning-fg:           #FFFFFF;
  --warning-bg:           #FBF0D8;

  --danger:               #C83E3E;
  --danger-hover:         #A83333;
  --danger-fg:            #FFFFFF;
  --danger-bg:            #FBEAEA;

  --info:                 #1E6FBA;
  --info-bg:              #E6F0FA;

  /* Neutrals — warm paper -> deep ink */
  --bg:                   #FAFAF7; /* warm paper background */
  --surface:              #F4F3EE; /* card */
  --surface-raised:       #FFFFFF; /* elevated / modal */
  --surface-sunken:       #EEEDE6; /* input, track */

  --border:               #E4E2DB;
  --border-strong:        #CFCDC4;
  --divider:              #EAE8E0;

  --fg:                   #15161A; /* body text */
  --fg-muted:             #5B5D62; /* muted text, secondary UI */
  --fg-subtle:            #8A8C93; /* hints, timestamps, placeholders */
  --fg-inverse:           #FAFAF7;

  /* Focus ring */
  --ring:                 #1E6FBA;
  --ring-offset:          #FAFAF7;

  /* Elevation (shadows) — light mode */
  --shadow-xs: 0 1px 1px rgba(21, 22, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(21, 22, 26, 0.06), 0 1px 1px rgba(21, 22, 26, 0.04);
  --shadow-md: 0 4px 10px rgba(21, 22, 26, 0.07), 0 2px 4px rgba(21, 22, 26, 0.05);
  --shadow-lg: 0 12px 28px rgba(21, 22, 26, 0.10), 0 4px 8px rgba(21, 22, 26, 0.06);
  --shadow-xl: 0 24px 48px rgba(21, 22, 26, 0.14), 0 8px 16px rgba(21, 22, 26, 0.08);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Spacing scale (4pt) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Typography */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --fs-12: 12px; --lh-12: 16px;
  --fs-13: 13px; --lh-13: 18px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-15: 15px; --lh-15: 22px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 26px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 32px;
  --fs-28: 28px; --lh-28: 36px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-40: 40px; --lh-40: 48px;
  --fs-48: 48px; --lh-48: 56px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1040;
  --z-modal:    1050;
  --z-toast:    1070;
}

/* ============================================================
   COLOR TOKENS — Dark mode
   ============================================================ */
:root.dark,
[data-theme="dark"] {
  --brand-primary:        #5FA8E8;
  --brand-primary-hover:  #7FBCF0;
  --brand-primary-fg:     #0E1014;

  --brand-accent:         #F7C769;
  --brand-accent-hover:   #FBD788;
  --brand-accent-fg:      #15161A;

  --success:              #4FB087;
  --success-fg:           #0E1014;
  --success-bg:           #17281F;

  --warning:              #E6A53F;
  --warning-fg:           #0E1014;
  --warning-bg:           #2A1F0E;

  --danger:               #E66464;
  --danger-hover:         #F07A7A;
  --danger-fg:            #0E1014;
  --danger-bg:            #2A1616;

  --info:                 #5FA8E8;
  --info-bg:              #11202E;

  --bg:                   #0E1014;
  --surface:              #1A1D23;
  --surface-raised:       #22262D;
  --surface-sunken:       #14171C;

  --border:               #2A2E36;
  --border-strong:        #3A3F49;
  --divider:              #23272F;

  --fg:                   #F0F0EC;
  --fg-muted:             #9BA0AA;
  --fg-subtle:            #6C717B;
  --fg-inverse:           #0E1014;

  --ring:                 #5FA8E8;
  --ring-offset:          #0E1014;

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   SEMANTIC TYPE TOKENS
   ============================================================ */
.oz-display-lg {
  font: 800 var(--fs-48)/var(--lh-48) var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.oz-display {
  font: 800 var(--fs-40)/var(--lh-40) var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg);
}
.oz-h1 {
  font: 700 var(--fs-32)/var(--lh-32) var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--fg);
}
.oz-h2 {
  font: 700 var(--fs-24)/var(--lh-24) var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.oz-h3 {
  font: 600 var(--fs-20)/var(--lh-20) var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--fg);
}
.oz-h4 {
  font: 600 var(--fs-18)/var(--lh-18) var(--font-sans);
  color: var(--fg);
}
.oz-body-lg {
  font: 400 var(--fs-18)/var(--lh-18) var(--font-sans);
  color: var(--fg);
}
.oz-body {
  font: 400 var(--fs-16)/var(--lh-16) var(--font-sans);
  color: var(--fg);
}
.oz-body-sm {
  font: 400 var(--fs-14)/var(--lh-14) var(--font-sans);
  color: var(--fg);
}
.oz-label {
  font: 600 var(--fs-14)/var(--lh-14) var(--font-sans);
  letter-spacing: 0.005em;
  color: var(--fg);
}
.oz-caption {
  font: 500 var(--fs-12)/var(--lh-12) var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.oz-overline {
  font: 600 var(--fs-12)/var(--lh-12) var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.oz-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.oz-code {
  font: 500 var(--fs-13)/var(--lh-13) var(--font-mono);
  background: var(--surface-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

/* ============================================================
   BASE RESET for design preview cards
   ============================================================ */
.oz-reset,
.oz-reset * {
  box-sizing: border-box;
}
.oz-reset {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}