/* ============================================================================
   Mereketoi.kz — Design Tokens : Colors + Type
   Той / ивент қызметтері маркетплейсі. Қазақша (default) + Орысша.
   Source of truth for the platform palette (front / app / admin / mobile).
   Branding is code-controlled — never editable from the admin panel.
   ============================================================================ */

/* ---- Webfonts ---------------------------------------------------------------
   Montserrat  → display / headings (premium, geometric, full Cyrillic + Kazakh)
   Inter       → body / UI (high legibility, full Cyrillic + Kazakh)
   Both cover Kazakh-specific glyphs: ә ғ қ ң ө ұ ү һ і
   NOTE: loaded from Google Fonts CDN. To self-host, drop woff2 files in fonts/
   and swap the @import for @font-face blocks.                                  */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Self-hosted Montserrat italic (uploaded brand font), registered under a SEPARATE
   family so it can never shadow upright Montserrat. Use via --font-display-italic
   only where italic is explicitly wanted. Upright Montserrat + Inter stay on CDN. */
@font-face {
  font-family: 'Montserrat Italic';
  font-style: italic;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ============= BRAND PALETTE (blue-led — owner preference) ===============
     Cohesive cool family: brand blue + sky + cyan + navy for depth.
     Neutrals are a placeholder and will be retuned to the final logo later. */
  --color-primary:          #2563EB;  /* brand blue — main CTA, active tabs, featured/VIP, links */
  --color-primary-hover:    #1D4ED8;  /* blue pressed/hover */
  --color-primary-soft:     #EAF0FE;  /* blue tint — chips, highlight backgrounds */
  --color-navy:             #172554;  /* deep navy — footer, hero overlay, dark sections */
  --color-secondary:        #0EA5E9;  /* sky blue — secondary links/actions, info CTA */
  --color-secondary-hover:  #0284C7;
  --color-secondary-soft:   #E5F6FD;
  --color-accent:           #06B6D4;  /* cyan — small highlights, selected filters, special chips */
  --color-accent-soft:      #E0F7FB;

  /* ====================== SURFACES & TEXT ================================== */
  --color-background:       #F8FAFC;  /* page background */
  --color-surface:          #FFFFFF;  /* cards, modals, forms, dropdowns */
  --color-surface-muted:    #F1F5F9;  /* filter panels, secondary sections, skeleton base */
  --color-text:             #0F172A;  /* primary readable text */
  --color-text-muted:       #64748B;  /* helper text, labels, descriptions */
  --color-text-faint:       #94A3B8;  /* timestamps, disabled, meta */
  --color-border:           #E2E8F0;  /* inputs, cards, dividers */
  --color-border-strong:    #CBD5E1;  /* hover borders, emphasized dividers */

  /* ====================== SEMANTIC STATES ================================= */
  --color-success:          #10B981;  /* active / available */
  --color-success-soft:     #E7F8F1;
  --color-warning:          #F59E0B;  /* review / report attention */
  --color-warning-soft:     #FEF3E2;
  --color-error:            #EF4444;  /* hidden / blocked / destructive */
  --color-error-soft:       #FDECEC;
  --color-info:             #0EA5E9;  /* neutral informational */
  --color-info-soft:        #E5F6FD;

  /* ====================== TYPOGRAPHY ====================================== */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-italic: 'Montserrat Italic', 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (px) — H1 24–32 / H2 20 / body 16 / small 14 per spec */
  --text-display:  40px;   /* hero headlines */
  --text-h1:       30px;
  --text-h2:       22px;
  --text-h3:       18px;
  --text-body-lg:  17px;
  --text-body:     16px;
  --text-sm:       14px;
  --text-xs:       12.5px;

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

  /* Line-height ≥ 1.5 for body (Kazakh runs long) */
  --leading-tight:  1.18;  /* display / headings */
  --leading-snug:   1.32;
  --leading-normal: 1.55;  /* body copy */

  --tracking-tight: -0.02em;
  --tracking-wide:  0.01em;

  /* ====================== RADII / ELEVATION / SPACING ===================== */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;   /* default card radius */
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-primary: 0 6px 18px rgba(37, 99, 235, 0.30);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 38%, transparent);
  --ring-focus-blue: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 30%, transparent);

  /* 4px spacing grid */
  --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;

  --container: 1200px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ds-scope so kits can apply selectively
   ============================================================================ */
.ds-scope {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display, h1.ds, .ds-h1, .ds-h2, .ds-h3 { font-family: var(--font-display); }

.ds-display { font-size: var(--text-display); font-weight: var(--weight-black);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-h1 { font-size: var(--text-h1); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-h2 { font-size: var(--text-h2); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.ds-h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.ds-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-normal); }
.ds-body { font-size: var(--text-body); line-height: var(--leading-normal); }
.ds-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.ds-xs { font-size: var(--text-xs); line-height: var(--leading-snug); }
.ds-muted { color: var(--color-text-muted); }
.ds-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }

/* ============================================================================
   SIGNATURE LOADER — "Mereketoi Ribbon Loader" (token-driven, CSS only)
   ============================================================================ */
.mereketoi-loader {
  --loader-bg:   var(--color-surface-muted);
  --loader-line: var(--color-primary);
  --loader-dot:  var(--color-secondary);
  --loader-glow: color-mix(in srgb, var(--color-accent) 35%, transparent);
  position: relative; width: 168px; height: 10px; border-radius: var(--radius-pill);
  background: var(--loader-bg); overflow: hidden;
}
.mereketoi-loader::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--loader-line), transparent);
  transform: translateX(-100%); animation: mrkt-sweep 1.25s ease-in-out infinite;
}
.mereketoi-loader::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--loader-dot);
  box-shadow: 0 0 12px 4px var(--loader-glow); transform: translate(-50%, -50%);
  animation: mrkt-dot 1.25s ease-in-out infinite;
}
@keyframes mrkt-sweep { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
@keyframes mrkt-dot   { 0% { left: 4%;} 50% { left: 96%;} 100% { left: 4%;} }

@media (prefers-reduced-motion: reduce) {
  .mereketoi-loader::before, .mereketoi-loader::after { animation: none; }
}