/* =============================================================
   Bitcom Design Tokens — source of truth
   Scope: bitcom.tj landing + /cabinet  (NOT the CRM at app.innotech.tj)
   Direction: light-first, navy identity, WCAG 2.1 AA floor
   See /var/bot/.impeccable.md for design context.
   ============================================================= */

:root {
  /* ----- BRAND ---------------------------------------------- */
  --color-brand-navy:         oklch(32%  0.06 260);   /* ≈ #1c3a5d — logo, headlines */
  --color-brand-navy-hover:   oklch(36%  0.07 260);
  --color-brand-navy-soft:    oklch(95%  0.015 260);  /* pale navy-tinted surface */

  --color-action-blue:        oklch(56%  0.18 260);   /* ≈ #2563EB — CTA, links, focus */
  --color-action-blue-hover:  oklch(50%  0.19 260);
  --color-action-blue-soft:   oklch(94%  0.03 260);   /* badge background */

  /* ----- SURFACE -------------------------------------------- */
  --color-surface:            #ffffff;                /* cards, inputs */
  --color-surface-muted:      oklch(97%  0.005 260);  /* page bg tinted to navy */
  --color-surface-subtle:     oklch(98.5% 0.004 260);
  --color-surface-inverse:    oklch(18%  0.04 260);   /* ≈ #0f1e3a dark sections */

  /* ----- TEXT ----------------------------------------------- */
  --color-text:               oklch(20%  0.02 260);   /* body */
  --color-text-muted:         oklch(42%  0.02 260);   /* AA on white */
  --color-text-subtle:        oklch(55%  0.02 260);   /* borderline AA, use on muted surfaces only */
  --color-text-inverse:       #ffffff;
  --color-text-link:          var(--color-action-blue);
  --color-placeholder:        oklch(60%  0.02 260);   /* AA on muted surface */

  /* ----- BORDER --------------------------------------------- */
  --color-border:             oklch(92%  0.01 260);
  --color-border-strong:      oklch(85%  0.015 260);

  /* ----- SEMANTIC ------------------------------------------- */
  --color-success:            oklch(62%  0.16 145);   /* ≈ #22c55e */
  --color-success-soft:       oklch(95%  0.04 145);
  --color-danger:             oklch(60%  0.21 27);    /* ≈ #ef4444 */
  --color-danger-soft:        oklch(95%  0.05 27);
  --color-warning:            oklch(75%  0.14 75);    /* ≈ #f59e0b */
  --color-warning-soft:       oklch(96%  0.06 75);
  --color-info:               var(--color-action-blue);

  /* ----- FOCUS ---------------------------------------------- */
  --color-focus-ring:         var(--color-action-blue);
  --focus-ring-width:         2px;
  --focus-ring-offset:        2px;

  /* ----- SPACING (4pt scale) -------------------------------- */
  --space-3xs:                2px;
  --space-2xs:                4px;
  --space-xs:                 8px;
  --space-sm:                 12px;
  --space-md:                 16px;
  --space-lg:                 24px;
  --space-xl:                 32px;
  --space-2xl:                48px;
  --space-3xl:                64px;
  --space-4xl:                96px;
  --space-5xl:                128px;

  /* ----- RADIUS --------------------------------------------- */
  --radius-xs:                4px;
  --radius-sm:                6px;
  --radius-md:                10px;
  --radius-lg:                16px;
  --radius-xl:                22px;
  --radius-full:              9999px;

  /* ----- SHADOW (navy-tinted, not black) -------------------- */
  --shadow-sm:                0 1px 2px  oklch(20% 0.03 260 / 0.08);
  --shadow-md:                0 4px 14px oklch(20% 0.03 260 / 0.08);
  --shadow-lg:                0 10px 32px oklch(20% 0.03 260 / 0.12);
  --shadow-inset:             inset 0 0 0 1px var(--color-border);

  /* ----- TYPOGRAPHY ----------------------------------------- */
  /* Manrope — Cyrillic + ext Cyrillic (ғ ҷ ҳ қ ӣ ӯ for Tajik) verified. */
  /* NOT in Impeccable reflex-fonts list. Geometric sans with warmth. */
  --font-sans:                'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                              Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display:             'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                              Roboto, sans-serif;
  --font-mono:                ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Marketing fluid scale — use on landing pages */
  --text-xs:                  0.75rem;                /* 12 */
  --text-sm:                  0.875rem;               /* 14 */
  --text-base:                1rem;                   /* 16 */
  --text-lg:                  1.125rem;               /* 18 */
  --text-xl:                  clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:                 clamp(1.5rem,  1.2rem + 1.2vw, 2rem);
  --text-3xl:                 clamp(1.75rem, 1.2rem + 2vw,   2.5rem);
  --text-4xl:                 clamp(2.25rem, 1.5rem + 3vw,   3.75rem);

  --leading-tight:            1.2;
  --leading-snug:             1.35;
  --leading-normal:           1.5;
  --leading-relaxed:          1.6;

  --tracking-tight:           -0.025em;
  --tracking-normal:          0;
  --tracking-wide:            0.05em;
  --tracking-caps:            0.08em;

  /* ----- LAYOUT --------------------------------------------- */
  --container-max:            1280px;
  --container-narrow:         900px;
  --container-gutter:         var(--space-xl);

  /* ----- MOTION --------------------------------------------- */
  --motion-fast:              150ms;
  --motion-base:              220ms;
  --motion-slow:              360ms;
  --ease-out-quart:           cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:            cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out:              cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kill motion for users who request it */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}