/* =========================================================
   Minwel Design Tokens
   Shared brand tokens for EN / AR / FR (One-page v1)
   ========================================================= */

:root {
  /* -------------------------------------------------------
     Brand palette
     ------------------------------------------------------- */
  --mw-color-teal-900: #084f4f;
  --mw-color-teal-800: #0b5d5d;
  --mw-color-teal-700: #0f6c6c;   /* primary brand */
  --mw-color-teal-600: #148383;
  --mw-color-teal-500: #1ca0a0;

  --mw-color-mint-500: #24d3b5;   /* subtle accent */

  --mw-color-sand-50: #fbf9f4;
  --mw-color-sand-100: #f7f2ea;
  --mw-color-sand-200: #f3eee6;   /* warm sand */
  --mw-color-sand-300: #e8dfd1;

  --mw-color-graphite-950: #0b1220;
  --mw-color-graphite-900: #111827;
  --mw-color-graphite-800: #1f2937;
  --mw-color-graphite-700: #334155;
  --mw-color-graphite-600: #475569;
  --mw-color-graphite-500: #64748b;
  --mw-color-graphite-400: #94a3b8;
  --mw-color-graphite-300: #cbd5e1;
  --mw-color-graphite-200: #e2e8f0;
  --mw-color-graphite-100: #f1f5f9;

  --mw-color-white: #ffffff;
  --mw-color-black: #000000;

  /* -------------------------------------------------------
     Semantic colors
     ------------------------------------------------------- */
  --mw-bg: var(--mw-color-sand-50);
  --mw-bg-soft: var(--mw-color-sand-100);
  --mw-bg-elevated: var(--mw-color-white);

  --mw-surface: rgba(255, 255, 255, 0.88);
  --mw-surface-strong: #ffffff;
  --mw-surface-soft: #f8fafc;
  --mw-surface-muted: rgba(248, 250, 252, 0.88);

  --mw-border: rgba(15, 108, 108, 0.12);
  --mw-border-strong: rgba(15, 108, 108, 0.18);
  --mw-border-subtle: rgba(15, 23, 42, 0.08);

  --mw-text: var(--mw-color-graphite-900);
  --mw-text-soft: var(--mw-color-graphite-600);
  --mw-text-muted: var(--mw-color-graphite-500);
  --mw-text-inverse: var(--mw-color-white);

  --mw-link: var(--mw-color-teal-700);
  --mw-link-hover: var(--mw-color-teal-800);

  --mw-primary: var(--mw-color-teal-700);
  --mw-primary-hover: var(--mw-color-teal-800);
  --mw-primary-active: var(--mw-color-teal-900);
  --mw-primary-soft: rgba(15, 108, 108, 0.08);
  --mw-primary-soft-2: rgba(15, 108, 108, 0.14);

  --mw-accent: var(--mw-color-mint-500);
  --mw-accent-soft: rgba(36, 211, 181, 0.12);

  --mw-success: #0f9f6e;
  --mw-success-bg: rgba(15, 159, 110, 0.08);

  --mw-warning: #b7791f;
  --mw-warning-bg: rgba(183, 121, 31, 0.08);

  --mw-info: #2563eb;
  --mw-info-bg: rgba(37, 99, 235, 0.08);

  --mw-danger: #b91c1c;
  --mw-danger-bg: rgba(185, 28, 28, 0.08);

  /* Status / chips (used across hero, solutions, work) */
  --mw-status-live: var(--mw-success);
  --mw-status-live-bg: rgba(15, 159, 110, 0.10);

  --mw-status-planned: #7c3aed;
  --mw-status-planned-bg: rgba(124, 58, 237, 0.08);

  --mw-status-building: #c2410c;
  --mw-status-building-bg: rgba(194, 65, 12, 0.08);

  --mw-status-early: #1d4ed8;
  --mw-status-early-bg: rgba(29, 78, 216, 0.08);

  --mw-status-neutral: var(--mw-color-graphite-600);
  --mw-status-neutral-bg: rgba(100, 116, 139, 0.10);

  /* Interactive / focus */
  --mw-focus-ring: 0 0 0 3px rgba(36, 211, 181, 0.28);
  --mw-focus-ring-strong: 0 0 0 4px rgba(15, 108, 108, 0.22);

  /* -------------------------------------------------------
     Typography
     ------------------------------------------------------- */
  --mw-font-sans: "Readex Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --mw-text-xs: 0.75rem;
  --mw-text-sm: 0.875rem;
  --mw-text-base: 1rem;
  --mw-text-md: 1.0625rem;
  --mw-text-lg: 1.125rem;
  --mw-text-xl: 1.25rem;
  --mw-text-2xl: 1.5rem;
  --mw-text-3xl: 1.875rem;
  --mw-text-4xl: 2.25rem;
  --mw-text-5xl: 2.75rem;

  /* Fluid type for key headings */
  --mw-display-1: clamp(2rem, 3vw + 1.1rem, 3.4rem);
  --mw-display-2: clamp(1.75rem, 2vw + 1.1rem, 2.6rem);
  --mw-title-1: clamp(1.25rem, 1vw + 1rem, 1.75rem);

  --mw-leading-tight: 1.2;
  --mw-leading-snug: 1.35;
  --mw-leading-normal: 1.6;
  --mw-leading-relaxed: 1.75;

  --mw-letter-tight: -0.02em;
  --mw-letter-normal: 0;
  --mw-letter-wide: 0.02em;
  --mw-letter-kicker: 0.12em;

  /* -------------------------------------------------------
     Spacing scale
     ------------------------------------------------------- */
  --mw-space-0: 0;
  --mw-space-1: 0.25rem;
  --mw-space-2: 0.5rem;
  --mw-space-3: 0.75rem;
  --mw-space-4: 1rem;
  --mw-space-5: 1.25rem;
  --mw-space-6: 1.5rem;
  --mw-space-7: 1.75rem;
  --mw-space-8: 2rem;
  --mw-space-10: 2.5rem;
  --mw-space-12: 3rem;
  --mw-space-14: 3.5rem;
  --mw-space-16: 4rem;
  --mw-space-20: 5rem;
  --mw-space-24: 6rem;

  /* -------------------------------------------------------
     Radius
     ------------------------------------------------------- */
  --mw-radius-sm: 0.5rem;
  --mw-radius-md: 0.75rem;
  --mw-radius-lg: 1rem;
  --mw-radius-xl: 1.25rem;
  --mw-radius-2xl: 1.5rem;
  --mw-radius-3xl: 2rem;
  --mw-radius-pill: 999px;

  /* -------------------------------------------------------
     Shadows
     ------------------------------------------------------- */
  --mw-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --mw-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --mw-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
  --mw-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --mw-shadow-xl: 0 24px 70px rgba(15, 23, 42, 0.14);
  --mw-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  --mw-shadow-card: var(--mw-shadow-sm);
  --mw-shadow-floating: var(--mw-shadow-md);

  /* -------------------------------------------------------
     Motion
     ------------------------------------------------------- */
  --mw-duration-fast: 160ms;
  --mw-duration-base: 240ms;
  --mw-duration-slow: 420ms;
  --mw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* -------------------------------------------------------
     Layout
     ------------------------------------------------------- */
  --mw-container-max: 1200px;
  --mw-container-narrow: 860px;

  --mw-header-height: 60px;
  --mw-anchor-offset: calc(var(--mw-header-height) + 18px);

  --mw-section-pad-y: clamp(3rem, 6vw, 5.25rem);
  --mw-section-pad-y-sm: clamp(2.25rem, 4vw, 3.5rem);

  --mw-card-pad: clamp(1rem, 1.4vw, 1.5rem);
  --mw-card-pad-lg: clamp(1.25rem, 2vw, 2rem);

  --mw-backdrop-blur: 12px;

  /* -------------------------------------------------------
     Z-index layers
     ------------------------------------------------------- */
  --mw-z-base: 1;
  --mw-z-sticky: 1020;
  --mw-z-dropdown: 1080;
  --mw-z-overlay: 1100;
  --mw-z-modal: 1200;
  --mw-z-toast: 1300;

  /* -------------------------------------------------------
     Decorative / backgrounds
     ------------------------------------------------------- */
  --mw-hero-glow:
    radial-gradient(34rem 18rem at 8% 2%, rgba(36, 211, 181, 0.07), transparent 70%),
    radial-gradient(28rem 16rem at 94% 10%, rgba(15, 108, 108, 0.05), transparent 72%);

  --mw-card-grad:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.90));

  --mw-header-bg: rgba(251, 249, 244, 0.94);
  --mw-header-border: rgba(15, 108, 108, 0.10);

  --mw-selection-bg: rgba(15, 108, 108, 0.16);
  --mw-selection-text: var(--mw-color-graphite-950);

  color-scheme: light;

  /* -------------------------------------------------------
     Bootstrap variable mapping (keeps Bootstrap aligned
     with Minwel tokens without overriding component CSS yet)
     ------------------------------------------------------- */
  --bs-body-font-family: var(--mw-font-sans);
  --bs-body-color: var(--mw-text);
  --bs-body-bg: var(--mw-bg);

  --bs-primary: var(--mw-primary);
  --bs-primary-rgb: 15, 108, 108;

  --bs-link-color: var(--mw-link);
  --bs-link-hover-color: var(--mw-link-hover);

  --bs-border-color: var(--mw-border-subtle);
  --bs-border-radius: var(--mw-radius-md);
  --bs-border-radius-lg: var(--mw-radius-xl);
  --bs-border-radius-xl: var(--mw-radius-2xl);

  --bs-focus-ring-color: rgba(36, 211, 181, 0.28);
}

/* Slightly larger rhythm on wide screens */
@media (min-width: 992px) {
  :root {
    --mw-header-height: 72px;
    --mw-anchor-offset: calc(var(--mw-header-height) + 18px);
  }
}

/* Motion-safe fallback: keep animations instant when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mw-duration-fast: 1ms;
    --mw-duration-base: 1ms;
    --mw-duration-slow: 1ms;
  }
}

@media (max-width: 575.98px) {
  :root {
    --mw-header-height: 56px;
  }
}