/* ============================================================
   bnturki.com — design tokens
   Screen CSS is split across tokens, base, layout, components,
   header, sections, and site. Print stays in cv-print.css /
   cv-print-core.css. Link order is the cascade order.
   ============================================================ */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */
:root {
  /* Color — Deep Navy leadership palette (matches the og-image gradient) */
  --color-navy-950: #071322;
  --color-navy-900: #0a1a30;
  --color-navy-800: #0e2440; /* primary — the richer og-image blue */
  --color-navy-700: #1b3a63;
  --color-navy-100: #dbe4f0;

  /* Signature dark surface — same gradient as the social-preview image */
  --gradient-navy: linear-gradient(135deg, #0e2440 0%, #0a1a30 55%, #071322 100%);

  /* Metallic gold — gilded accents (primary CTAs, rules, numerals) */
  --gradient-gold: linear-gradient(105deg, #e0c179 0%, #b08a3e 40%, #c9a24b 60%, #8a6d2f 100%);

  /* Film grain — tiled monochrome SVG noise laid over dark surfaces */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");

  /* Muted gold — accent only (small type, indicators, hovers) */
  --color-gold-700: #715622; /* darkest step — AA on ivory-200 (5.8:1) */
  --color-gold-600: #8a6a26; /* AA for small bold text on white/ivory-100 */
  --color-gold-500: #b08a3e;
  --color-gold-400: #c9a24b;
  --color-gold-300: #ddbe7a;

  /* Warm ivory surfaces */
  --color-ivory-100: #faf6ee;
  --color-ivory-200: #f3ecdf;

  --color-surface: #ffffff;
  --color-text: #17222f;
  --color-text-muted: #505b69;
  --color-text-inverse: #f4f0e6;
  --color-text-inverse-muted: #aebacb;
  --color-border: #e5ddcb;
  --color-border-navy: #24405f;

  /* Typography — the Arabic page and English page each load one family;
     both stacks degrade to system fonts if the webfont fails. */
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
  --font-en: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: var(--font-ar);
  /* Display headings: sans on Arabic, an editorial serif on English */
  --font-heading: var(--font-ar);

  /* Type scale (fluid) */
  --fs-display: clamp(2.35rem, 4.4vw + 1rem, 4.1rem);
  --fs-h2: clamp(1.6rem, 2.2vw + 0.8rem, 2.4rem);
  --fs-h3: clamp(1.15rem, 1vw + 0.9rem, 1.45rem);
  --fs-lead: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4rem, 9vw, 7.5rem);

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  /* Luxury restraint: hairline borders carry the cards; shadows are whispers */
  --shadow-card: 0 1px 2px rgba(10, 26, 48, 0.04);
  --shadow-card-hover: 0 14px 34px rgba(10, 26, 48, 0.09);
  --shadow-header: 0 1px 0 rgba(10, 26, 48, 0.06), 0 6px 24px rgba(10, 26, 48, 0.08);

  /* Motion — unhurried, gallery-paced */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 380ms;
  --dur-slow: 900ms;

  --header-height: 4.5rem;
  --container-max: 72.5rem; /* 1160px */
}

/* English page overrides the body family and gains a serif display face */
html[lang="en"] {
  --font-body: var(--font-en);
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
}