/* SILLAGE DESIGN TOKENS
   Ported from the Amwaj interaction and composition system.
   The source system is retained as behavior; the palette remains Sillage. */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../assets/fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Display';
  src: url('../assets/fonts/thmanyah-display-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Text';
  src: url('../assets/fonts/thmanyah-text-light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Text';
  src: url('../assets/fonts/thmanyah-text-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Text';
  src: url('../assets/fonts/thmanyah-text-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Thmanyah Sans';
  src: url('../assets/fonts/thmanyah-sans-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Sillage semantic palette: warm ivory, cocoa, terracotta. */
  --sillage-color-primary: #5a3327;
  --sillage-color-primary-hover: #3e241c;
  --sillage-color-primary-soft: #ead4c7;
  --sillage-color-primary-glow: rgba(90, 51, 39, .20);
  --sillage-color-accent: #a85f48;
  --sillage-color-accent-hover: #8e4d39;
  --sillage-color-accent-soft: #f0ded3;
  --sillage-color-bg: #f5efe6;
  --sillage-color-surface: #fbf8f2;
  --sillage-color-surface-elevated: #fffdf8;
  --sillage-color-ink: #2b1e19;
  --sillage-color-text: #2b1e19;
  --sillage-color-text-secondary: #78665b;
  --sillage-color-text-muted: #9a877a;
  --sillage-color-border: #d9c8b9;
  --sillage-color-border-soft: rgba(90, 51, 39, .12);
  --sillage-color-night: #2b1e19;
  --sillage-color-night-surface: #3e241c;
  --sillage-color-night-text: #f5efe6;
  --sillage-color-night-muted: #c9b2a4;
  --sillage-color-success: #6e805d;
  --sillage-color-warning: #b47950;
  --sillage-color-error: #984f46;

  /* Semantic typography. IBM is the Arabic/UI system; Thmanyah is editorial. */
  --sillage-font-ui: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --sillage-font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --sillage-font-editorial: 'Thmanyah Display', 'Thmanyah Text', serif;
  --sillage-font-editorial-text: 'Thmanyah Text', 'Thmanyah Sans', serif;
  --sillage-font-mono: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Amwaj-derived fluid hierarchy, recalibrated for Sillage Arabic copy. */
  --sillage-text-hero: clamp(2.75rem, 5vw + 1rem, 5.75rem);
  --sillage-text-h1: clamp(2.35rem, 3.5vw + 1rem, 4.75rem);
  --sillage-text-h2: clamp(1.95rem, 2.7vw + 1rem, 3.8rem);
  --sillage-text-h3: clamp(1.25rem, 1.8vw + .8rem, 1.9rem);
  --sillage-text-body: clamp(.96rem, .35vw + .86rem, 1.1rem);
  --sillage-text-caption: .72rem;

  /* Spatial rhythm and containment. */
  --sillage-container-max: 80rem;
  --sillage-page-gutter: clamp(1rem, 4vw, 4.5rem);
  --sillage-section-py: clamp(5rem, 8vw, 7.5rem);
  --sillage-section-py-compact: clamp(3.5rem, 6vw, 5.5rem);
  --sillage-grid-gap: clamp(1rem, 2vw, 1.5rem);

  /* Amwaj radius and elevation logic, kept quieter for the archive. */
  --sillage-radius-sm: .375rem;
  --sillage-radius-md: .75rem;
  --sillage-radius-lg: 1rem;
  --sillage-radius-xl: 1.5rem;
  --sillage-radius-2xl: 2rem;
  --sillage-radius-full: 9999px;
  --sillage-shadow-sm: 0 1px 2px rgba(43, 30, 25, .06);
  --sillage-shadow-md: 0 4px 12px -2px rgba(90, 51, 39, .10), 0 2px 4px -1px rgba(43, 30, 25, .05);
  --sillage-shadow-lg: 0 12px 24px -4px rgba(90, 51, 39, .15), 0 4px 8px -2px rgba(43, 30, 25, .07);
  --sillage-shadow-xl: 0 24px 48px -8px rgba(43, 30, 25, .16), 0 10px 18px -4px rgba(90, 51, 39, .08);
  --sillage-shadow-focus: 0 0 0 3px rgba(168, 95, 72, .28);

  /* Unified motion architecture. */
  --sillage-duration-instant: 120ms;
  --sillage-duration-fast: 180ms;
  --sillage-duration-normal: 250ms;
  --sillage-duration-medium: 400ms;
  --sillage-duration-slow: 600ms;
  --sillage-ease-apple: cubic-bezier(.16, 1, .3, 1);
  --sillage-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --sillage-ease-smooth: cubic-bezier(.25, .46, .45, .94);
  --sillage-ease-decel: cubic-bezier(0, 0, .2, 1);

  /* Legacy aliases retained for existing Sillage templates. */
  --color-bg: var(--sillage-color-bg);
  --color-surface: var(--sillage-color-surface);
  --color-surface-elevated: var(--sillage-color-surface-elevated);
  --color-primary: var(--sillage-color-primary);
  --color-primary-hover: var(--sillage-color-primary-hover);
  --color-accent: var(--sillage-color-accent);
  --color-accent-soft: var(--sillage-color-accent-soft);
  --color-ink: var(--sillage-color-ink);
  --color-text-secondary: var(--sillage-color-text-secondary);
  --color-border: var(--sillage-color-border);
  --color-muted: #e8ddd2;
  --color-night: var(--sillage-color-night);
  --color-paper: var(--sillage-color-bg);
  --color-ivory: var(--sillage-color-surface);
  --color-cocoa: var(--sillage-color-primary);
  --color-chocolate: var(--sillage-color-ink);
  --color-terracotta: var(--sillage-color-accent);
  --color-taupe: var(--sillage-color-text-secondary);
  --color-line: var(--sillage-color-border);
  --font-ibm: var(--sillage-font-ui);
  --font-thmanyah-display: var(--sillage-font-editorial);
  --font-thmanyah-text: var(--sillage-font-editorial-text);
  --font-thmanyah-sans: var(--sillage-font-ui);
  --font-arabic: var(--sillage-font-arabic);
  --font-ui: var(--sillage-font-ui);
  --font-serif: var(--sillage-font-editorial);
  --text-display: var(--sillage-text-hero);
  --text-h1: var(--sillage-text-h1);
  --text-h2: var(--sillage-text-h2);
  --text-h3: var(--sillage-text-h3);
  --text-body: var(--sillage-text-body);
  --text-caption: var(--sillage-text-caption);
  --space-section: var(--sillage-section-py);
  --container: 1240px;
  --radius-sm: var(--sillage-radius-sm);
  --radius-md: var(--sillage-radius-md);
  --radius-lg: var(--sillage-radius-lg);
  --shadow-soft: var(--sillage-shadow-lg);
  --shadow-focus: var(--sillage-shadow-focus);
  --duration-fast: var(--sillage-duration-fast);
  --duration-normal: var(--sillage-duration-normal);
  --duration-slow: var(--sillage-duration-slow);
  --ease-smooth: var(--sillage-ease-apple);
  --paper: var(--sillage-color-bg);
  --cream: var(--sillage-color-surface);
  --ink: var(--sillage-color-ink);
  --muted: var(--sillage-color-text-secondary);
  --line: var(--sillage-color-border);
  --dark: var(--sillage-color-night);
  --dark-2: var(--sillage-color-night-surface);
  --accent: var(--sillage-color-accent);
  --serif: var(--sillage-font-editorial);
  --sans: var(--sillage-font-ui);
  --mono: var(--sillage-font-mono);
  --ease-out: var(--sillage-ease-apple);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

html[lang='en'] .lang-ar,
html[lang='ar'] .lang-en { display: none !important; }

.text-display { font-family: var(--sillage-font-editorial); font-size: var(--sillage-text-hero); line-height: 1; }
.text-h1 { font-family: var(--sillage-font-editorial); font-size: var(--sillage-text-h1); line-height: 1.08; }
.text-h2 { font-family: var(--sillage-font-editorial); font-size: var(--sillage-text-h2); line-height: 1.12; }
.text-body { font-family: var(--sillage-font-ui); font-size: var(--sillage-text-body); line-height: 1.8; }

.glass-effect {
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}