/* =========================================================
   CV Facile — Design Tokens
   =========================================================
   Single source of truth for color, type, spacing, radius,
   shadow and motion. Every other stylesheet should read
   from these custom properties rather than hardcoding values.

   Typography note: IBM Plex Sans + IBM Plex Sans Arabic is
   used deliberately across the whole product. CV Facile
   serves French, Arabic and English speakers with the same
   interface, and the Plex family is one of the few professional
   type systems that ships a matching Arabic cut — so a French
   CV and an Arabic CV feel like the same product, not two
   different apps stitched together.
   ========================================================= */

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

:root {

  /* ---------------------------------------------------------
     Color — brand
     --------------------------------------------------------- */
  --color-primary: #0F62FE;
  --color-primary-hover: #0B4FD1;
  --color-primary-active: #093FAA;
  --color-primary-50: #EEF3FF;
  --color-primary-100: #DCE7FF;
  --color-primary-200: #B3CBFF;

  --color-accent: #2563EB;

  --color-gradient-brand: linear-gradient(135deg, #0F62FE 0%, #2563EB 55%, #4F8CFF 100%);
  --color-gradient-mesh-1: radial-gradient(circle at 15% 20%, rgba(15, 98, 254, 0.16), transparent 45%);
  --color-gradient-mesh-2: radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.14), transparent 40%);
  --color-gradient-mesh-3: radial-gradient(circle at 50% 100%, rgba(15, 98, 254, 0.08), transparent 50%);

  /* ---------------------------------------------------------
     Color — semantic
     --------------------------------------------------------- */
  --color-success: #16A34A;
  --color-success-50: #F0FDF4;
  --color-success-200: #BBF7D0;

  --color-warning: #F59E0B;
  --color-warning-50: #FFFBEB;

  --color-danger: #DC2626;
  --color-danger-50: #FEF2F2;
  --color-danger-200: #FECACA;

  --color-premium: #7C3AED;
  --color-premium-50: #F5F3FF;
  --color-premium-gradient: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);

  /* ---------------------------------------------------------
     Color — neutrals / surfaces
     --------------------------------------------------------- */
  --color-bg: #F8FAFC;
  --color-bg-subtle: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;

  --color-ink-900: #0F172A;   /* headings              */
  --color-ink-700: #334155;   /* body text              */
  --color-ink-500: #64748B;   /* secondary / muted text */
  --color-ink-400: #94A3B8;   /* placeholders           */
  --color-ink-300: #CBD5E1;   /* disabled               */

  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-focus: var(--color-primary);

  --color-overlay: rgba(15, 23, 42, 0.48);

  /* ---------------------------------------------------------
     Typography
     --------------------------------------------------------- */
  --font-latin: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --font-body: var(--font-latin);

  /* Modular scale ~1.22, 16px base */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.375rem;     /* 22px */
  --text-xl: 1.75rem;      /* 28px */
  --text-2xl: 2.25rem;     /* 36px */
  --text-3xl: 2.875rem;    /* 46px */
  --text-4xl: 3.5rem;      /* 56px */

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

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------------------------------------------------------
     Spacing scale (4px base)
     --------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---------------------------------------------------------
     Radius
     --------------------------------------------------------- */
  --radius-sm: 0.5rem;    /* 8px  */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2rem;     /* 32px */
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     Shadow — soft, faintly blue-tinted (Stripe/Linear register)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 32px 72px rgba(15, 23, 42, 0.16), 0 8px 20px rgba(15, 23, 42, 0.06);

  /* Signature: soft focus / hover glow used consistently on
     interactive elements — cards, buttons, inputs, template
     tiles — so the whole product shares one "lift" language. */
  --glow-primary: 0 0 0 4px var(--color-primary-100), var(--shadow-md);
  --glow-primary-sm: 0 0 0 3px var(--color-primary-100);
  --glow-success: 0 0 0 4px var(--color-success-200);
  --glow-danger: 0 0 0 4px var(--color-danger-200);

  /* ---------------------------------------------------------
     Motion
     --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --duration-slower: 560ms;

  /* ---------------------------------------------------------
     Layout
     --------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-padding: var(--space-6);

  --header-height: 4.5rem;

  /* ---------------------------------------------------------
     Z-index scale
     --------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* -----------------------------------------------------------
   RTL — Arabic
   Swap the primary body font when the document is right to
   left. All spacing/radius tokens are logical-property driven
   in style.css, so they don't need to change here.
   ----------------------------------------------------------- */
[dir="rtl"] {
  --font-body: var(--font-arabic);
  --tracking-tight: 0em; /* Arabic does not benefit from negative tracking */
}

/* -----------------------------------------------------------
   Reduced motion — respected globally
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}