/* =========================================================================
   PDC Design System — Colors & Type
   Project Development Center — bizmarket for Mongolian project templates
   ========================================================================= */

/* -------- Fonts (Google Fonts substitutes — Cyrillic-capable) ------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ------------------------- BRAND PALETTE ------------------------------- */
  /* Navy is the brand anchor — comes from the logo background.
     We pair it with a warm off-white and a single saturated accent.       */

  --navy-900: #1B2330;   /* deepest — modals, top nav on dark variant      */
  --navy-800: #232C3B;   /* hero blocks                                    */
  --navy-700: #2E3A4A;   /* primary brand surface (logo bg)                */
  --navy-600: #3A4658;   /* hover on navy surfaces                         */
  --navy-500: #56657B;   /* muted ink on light                              */
  --navy-400: #7B8AA0;   /* secondary text on light                        */
  --navy-300: #AAB4C3;   /* tertiary text, dividers on light dark          */
  --navy-200: #D6DCE5;   /* dividers, hairlines                            */
  --navy-100: #ECEFF4;   /* surface alt, hover row                         */
  --navy-50:  #F5F7FA;   /* page bg alt                                    */

  /* Accent — calm sage / muted teal-green. Light and cool; works on light
     surfaces without shouting. Not red, not yellow.                        */
  --accent-700: #3D6B53;
  --accent-600: #5A8B72;
  --accent-500: #7AAE93;  /* primary accent — CTAs, price chips            */
  --accent-400: #9EC4B1;
  --accent-200: #D4E5DA;
  --accent-50:  #EEF6F1;

  /* Supporting blue — links & info. Softer slate-blue, less neon.          */
  --blue-700: #2C5BA8;
  --blue-600: #4A7BC2;    /* default link / "Free" badge                   */
  --blue-100: #DCE5F2;
  --blue-50:  #EEF2F9;

  /* Semantic */
  --success-600: #1F8A5B;
  --success-50:  #E6F4ED;
  --warning-600: #C2820B;
  --warning-50:  #FDF5E6;
  --danger-600:  #C0392B;
  --danger-50:   #FBEAE7;

  /* ------------------------- SURFACES & INK ------------------------------ */
  --bg:           #FFFFFF;
  --bg-alt:       var(--navy-50);
  --bg-elevated:  #FFFFFF;
  --bg-inverse:   var(--navy-700);

  --ink-1:        var(--navy-900); /* primary text                          */
  --ink-2:        var(--navy-700); /* headings on light                     */
  --ink-3:        var(--navy-500); /* body / muted                          */
  --ink-4:        var(--navy-400); /* tertiary                              */
  --ink-on-dark:  #FFFFFF;
  --ink-on-accent:#1B2330;

  --border:       var(--navy-200);
  --border-strong:var(--navy-300);
  --divider:      #E8ECF2;

  /* ------------------------- TYPE FAMILIES ------------------------------- */
  /* Display: Bricolage Grotesque — subbed for an unavailable custom display.
     Body:    Manrope — modern, generous Cyrillic, friendly business tone.
     Mono:    JetBrains Mono — for prices, codes, file metadata.            */
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ------------------------- TYPE SCALE ---------------------------------- */
  --fs-display-2xl: 72px;
  --fs-display-xl:  56px;
  --fs-display-lg:  44px;
  --fs-h1:          36px;
  --fs-h2:          28px;
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body-lg:     17px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-caption:     12px;
  --fs-overline:    11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight: -0.02em;
  --tracking-flat:  0;
  --tracking-wide:  0.06em;
  --tracking-cap:   0.12em; /* overlines / category labels in CAPS         */

  /* ------------------------- SPACING ------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ------------------------- RADII --------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ------------------------- SHADOWS ------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(27, 35, 48, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 35, 48, 0.06), 0 1px 2px rgba(27, 35, 48, 0.04);
  --shadow:    0 4px 12px rgba(27, 35, 48, 0.06), 0 1px 3px rgba(27, 35, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(27, 35, 48, 0.08), 0 2px 6px rgba(27, 35, 48, 0.04);
  --shadow-lg: 0 16px 48px rgba(27, 35, 48, 0.12), 0 4px 12px rgba(27, 35, 48, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(122, 174, 147, 0.32);
  --ring-blue: 0 0 0 3px rgba(74, 123, 194, 0.25);

  /* ------------------------- MOTION -------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================ SEMANTIC TYPE ================================ */

.h-display-2xl,
.t-display-2xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
}
.h-display-xl, .t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
}
.h-display-lg, .t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink-3);
}
.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--ink-4);
}
.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--ink-4);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

a, .link {
  color: var(--blue-600);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
a:hover, .link:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

/* Price — special. Always mono, navy, with ₮ suffix sized down */
.price {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.price .currency { font-size: 0.75em; color: var(--ink-3); margin-left: 2px; }
.price.free { color: var(--success-600); font-family: var(--font-sans); font-weight: 700; }