/**
 * Keystone Design Tokens
 * Generated and runtime-overridden from Keystone Settings
 */
:root {
  /* Modern Architecture & Engineering Palette */
  --ks-bg: #F8F9FA;
  --ks-surface: #FFFFFF;
  --ks-surface-card: #FFFFFF;
  --ks-surface-subtle: #F1F4F7;
  --ks-surface-hover: #F8FAFC;
  --ks-line: #E2E8F0;
  --ks-line-subtle: rgba(226, 232, 240, 0.8);
  --ks-muted: #64748B;
  --ks-ink: #0F172A;
  --ks-dark: #0B0F17;
  --ks-dark-surface: #141B26;
  --ks-dark-card: #192231;
  --ks-dark-line: #243044;

  /* Structural Accent (Premium Terracotta / Amber Bronze) */
  --ks-accent: #C85A2B;
  --ks-accent-600: #AB481D;
  --ks-accent-soft: rgba(200, 90, 43, 0.10);
  --ks-accent-glow: rgba(200, 90, 43, 0.35);
  --ks-on-accent: #FFFFFF;
  --ks-blueprint: #00B4D8;
  --ks-blueprint-glow: rgba(0, 180, 216, 0.25);

  /* Typography Stack — Cairo First */
  --ks-font-heading: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ks-font-body: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ks-font-mono: 'IBM Plex Mono', 'Cairo', monospace;

  /* Fluid Typography Scale — Optimized for Arabic Cairo Ascenders & Descenders */
  --ks-text-display: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);    /* 32px - 56px */
  --ks-text-h1: clamp(1.75rem, 2.5vw + 0.5rem, 2.65rem);    /* 28px - 42.4px */
  --ks-text-h2: clamp(1.4rem, 1.8vw + 0.5rem, 2rem);        /* 22.4px - 32px */
  --ks-text-h3: clamp(1.15rem, 1vw + 0.4rem, 1.45rem);      /* 18.4px - 23.2px */
  --ks-text-body: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);    /* 16px - 18px */
  --ks-text-small: 0.875rem;                                 /* 14px */
  --ks-text-tiny: 0.75rem;                                   /* 12px */

  --ks-leading-display: 1.45;
  --ks-leading-heading: 1.55;
  --ks-leading-body: 1.85;
  --ks-measure: 65ch;

  /* Spacing Grid (8px Base) */
  --ks-space-1: 0.25rem;   /* 4px */
  --ks-space-2: 0.5rem;    /* 8px */
  --ks-space-3: 0.75rem;   /* 12px */
  --ks-space-4: 1rem;      /* 16px */
  --ks-space-5: 1.5rem;    /* 24px */
  --ks-space-6: 2rem;      /* 32px */
  --ks-space-8: 3rem;      /* 48px */
  --ks-space-10: 4rem;     /* 64px */
  --ks-space-12: 5rem;     /* 80px */
  --ks-section-pad: clamp(5rem, 8vw, 8.5rem);

  /* Modern Curved Radii */
  --ks-radius-sharp: 4px;
  --ks-radius-subtle: 8px;
  --ks-radius-card: 16px;
  --ks-radius-modal: 20px;
  --ks-radius-pill: 9999px;

  /* Rich Multi-Layer Shadows */
  --ks-shadow-subtle: 0 4px 12px rgba(15, 23, 42, 0.04);
  --ks-shadow-card: 0 10px 30px -8px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --ks-shadow-hover: 0 24px 48px -12px rgba(15, 23, 42, 0.16), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --ks-shadow-floating: 0 20px 50px -10px rgba(15, 23, 42, 0.2);

  /* Animation Easing & Timings */
  --ks-ease: cubic-bezier(.22, .8, .24, 1);
  --ks-duration-micro: 160ms;
  --ks-duration-ui: 360ms;
  --ks-duration-reveal: 900ms;

  /* Max Widths */
  --ks-container-max: 1360px;
  --ks-container-narrow: 1040px;
  --ks-container-text: 780px;

  /* Header Height */
  --ks-header-h: 76px;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  :root,
  html[data-ks-motion="off"] {
    --ks-duration-micro: 0ms !important;
    --ks-duration-ui: 0ms !important;
    --ks-duration-reveal: 0ms !important;
  }
}