/* ============================================================
   evenclo — knowledge base design tokens
   ============================================================
   Copied from the evenclo Design System project on claude.ai/design
   (tokens/colors.css, typography.css, spacing.css, effects.css,
   fonts.css), trimmed to what a light, bilingual, text-heavy help
   center actually uses.

   Two things this file deliberately does NOT inherit:

   1. The dark product palette in CSS_CUSTOM_PROPERTIES.md. That set
      is for the tenant-facing product UI and defaults to
      --color-bg: #0f0a1a. The design system is explicit that the
      marketing side is LIGHT — Bone/white surfaces, Ink text — with
      dark stages "never as the default page". knowledge.evenclo.com
      is public and marketing-adjacent, so it is a light site.

   2. i18n.js#fontFor(), which forces Cairo/Tajawal for Arabic. That
      is the product fallback. evenclo's identity uses ONE superfamily
      for both scripts — IBM Plex Sans Arabic — so calling fontFor()
      here would drop Plex and take the KB off-brand. The KB uses
      dirFor(lang) for direction and --ev-font-arabic for the family.

   Served by express.static('.') and linked from every KB page.
   When the design system's tokens change, re-copy this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand core (identity v1, canonical) ---- */
  --ev-ink:            #14101B;
  --ev-aubergine:      #2A1B3D;
  --ev-purple:         #6B3FA0;
  --ev-purple-dark:    #4A2F66;
  --ev-purple-lift:    #9A6BD0;
  --ev-ember:          #E8722C; /* THE accent. Under 10% of any surface. */
  --ev-ember-lift:     #F4995A;
  --ev-bone:           #F1EDF3;

  /* ---- Light neutrals (violet-tinted, never pure grey) ---- */
  --ev-surface:        #FFFFFF;
  --ev-surface-raised: #F8F7FA;
  --ev-surface-sunken: #F1EDF3;
  --ev-overlay:        #F0EDF5;
  --ev-border:         #E3E0EA;
  --ev-border-subtle:  #EDE9F2;

  /* ---- Text on light ---- */
  --ev-text:           #1A1523;
  --ev-text-secondary: #5C5470;
  --ev-text-muted:     #9B93A8;
  --ev-text-inverse:   #F1EDF3;

  /* ---- Light canvas tints (brand-cast washes, never flat white) ---- */
  --ev-tint-paper:     #F6F2EB;
  --ev-tint-lilac:     #F1ECF5;
  --ev-tint-cream:     #FBF4ED;
  --ev-tint-blush:     #FBEEE4;
  --ev-tint-mint:      #EBF3EF;
  --ev-tint-orchid:    #F3EEF6;
  --ev-tint-peach:     #FCEEE3;
  --ev-card:           #FFFFFF;
  --ev-card-soft:      #FBF7F2;

  /* ---- Hairlines / dims on dark (the footer stage) ---- */
  --ev-hair:           rgba(241,237,243,0.14);
  --ev-hair-strong:    rgba(241,237,243,0.24);
  --ev-dim:            rgba(241,237,243,0.58);
  --ev-dim-soft:       rgba(241,237,243,0.38);

  /* ---- Semantic (callouts) ---- */
  --ev-success:        #22C55E;
  --ev-success-bg:     #E9F7EE;
  --ev-success-ink:    #1E7E3A;
  --ev-warning:        #F59E0B;
  --ev-warning-bg:     #FDF3E7;
  --ev-warning-ink:    #B3691B;
  --ev-error:          #EF4444;
  --ev-error-bg:       #FDECEA;
  --ev-error-ink:      #C0392B;
  --ev-info:           #3B82F6;
  --ev-info-bg:        #E8F0FE;
  --ev-info-ink:       #1D4ED8;

  /* ---- Type: one superfamily, both scripts ---- */
  --ev-font-sans:   'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ev-font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ev-font-arabic: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif;

  --ev-w-thin:     200; /* display */
  --ev-w-light:    300; /* body */
  --ev-w-regular:  400;
  --ev-w-medium:   500; /* titles */
  --ev-w-semibold: 600;
  --ev-w-bold:     700;

  --ev-text-xs:      0.75rem;
  --ev-text-sm:      0.875rem;
  --ev-text-base:    1rem;
  --ev-text-lg:      1.125rem;
  --ev-text-xl:      1.25rem;
  --ev-text-2xl:     1.5rem;
  --ev-text-3xl:     1.875rem;
  --ev-text-4xl:     2.25rem;
  --ev-text-display: clamp(2.25rem, 6vw, 4rem);

  --ev-leading-tight:  1.15;
  --ev-leading-snug:   1.35;
  --ev-leading-normal: 1.6;
  --ev-leading-arabic: 1.8;

  --ev-track-display: -0.03em;
  --ev-track-title:   -0.015em;
  --ev-track-wordmark:-0.045em;
  --ev-track-normal:  0;
  --ev-track-caption: 0.14em;
  --ev-track-eyebrow: 0.2em;

  /* ---- Spacing & radii (4px grid) ---- */
  --ev-space-1:  0.25rem;
  --ev-space-2:  0.5rem;
  --ev-space-3:  0.75rem;
  --ev-space-4:  1rem;
  --ev-space-5:  1.25rem;
  --ev-space-6:  1.5rem;
  --ev-space-8:  2rem;
  --ev-space-10: 2.5rem;
  --ev-space-12: 3rem;
  --ev-space-16: 4rem;
  --ev-space-20: 5rem;
  --ev-space-24: 6rem;

  --ev-radius-sm:   4px;
  --ev-radius-md:   8px;
  --ev-radius-lg:   12px;
  --ev-radius-xl:   16px;
  --ev-radius-2xl:  24px;
  --ev-radius-full: 9999px;

  --ev-container-prose: 820px;

  /* ---- Shadows (purple-cast, never neutral black) ---- */
  --ev-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ev-shadow-md: 0 4px 12px rgba(98,65,133,0.08);
  --ev-shadow-lg: 0 8px 24px rgba(98,65,133,0.12);
  --ev-shadow-xl: 0 16px 40px rgba(98,65,133,0.16);
  --ev-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ev-purple) 22%, transparent);

  /* ---- Motion: calm, no bounce ---- */
  --ev-dur-fast:   150ms;
  --ev-dur-normal: 300ms;
  --ev-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Semantic aliases ---- */
  --link:       var(--ev-purple);
  --link-hover: var(--ev-purple-dark);
}