/**
 * Ashh / Asahl — global design tokens (Linear philosophy)
 * Canonical source · import before theme-specific CSS
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");

:root {
  /* —— Canonical palette (exact) —— */
  --bg-main: #0b0d11;
  --bg-secondary: #11141c;
  --border-color: #1e2230;
  --text-primary: #ffffff;
  --text-secondary: #a0a5b1;

  /* —— Canvas & surfaces (aliases) —— */
  --ashh-canvas: var(--bg-main);
  --ashh-surface-1: var(--bg-secondary);
  --ashh-surface-2: #141820;
  --ashh-surface-3: #181c26;
  --ashh-surface-4: #1c2130;

  /* —— Borders —— */
  --ashh-border: var(--border-color);
  --ashh-border-strong: #252a3a;
  --ashh-border-subtle: #2a3042;

  /* —— Ink —— */
  --ashh-text: var(--text-primary);
  --ashh-text-muted: var(--text-secondary);
  --ashh-text-subtle: #7a808d;
  --ashh-text-tertiary: #5c6370;

  /*
   * Blue discipline — badges / active nav hints only (very muted).
   */
  --ashh-badge-bg: rgba(30, 58, 95, 0.55);
  --ashh-badge-text: #c5cee0;
  --ashh-accent-subtle: #1e3a5f;
  --ashh-accent-subtle-hover: #243f66;

  /* —— Semantic —— */
  --ashh-success: #27a644;

  /* —— Light mode (opt-in via data-theme="light") —— */
  --ashh-light-bg: #ffffff;
  --ashh-light-text: #0b0d11;

  /* —— Typography (Inter) —— */
  --ashh-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ashh-font-family-ar: "Almarai", "Inter", system-ui, sans-serif;
  --ashh-font-weight-heading: 500;
  --ashh-font-weight-body: 400;
  --ashh-font-weight-strong: 500;

  /* —— Type scale —— */
  --ashh-type-display-xl: 80px;
  --ashh-type-display-lg: 56px;
  --ashh-type-display-md: 40px;
  --ashh-type-headline: 28px;
  --ashh-type-card-title: 22px;
  --ashh-type-subhead: 20px;
  --ashh-type-body-lg: 18px;
  --ashh-type-body: 16px;
  --ashh-type-body-sm: 14px;
  --ashh-type-caption: 12px;
  --ashh-type-button: 14px;

  /* —— Letter-spacing —— */
  --ashh-ls-display-xl: -3px;
  --ashh-ls-display-lg: -1.8px;
  --ashh-ls-display-md: -1px;
  --ashh-ls-headline: -0.6px;
  --ashh-ls-card-title: -0.4px;
  --ashh-ls-subhead: -0.2px;

  /* —— Spacing (4px grid) —— */
  --ashh-space-1: 4px;
  --ashh-space-2: 8px;
  --ashh-space-3: 12px;
  --ashh-space-4: 16px;
  --ashh-space-5: 20px;
  --ashh-space-6: 24px;
  --ashh-space-7: 32px;
  --ashh-space-8: 40px;
  --ashh-space-9: 48px;
  --ashh-space-10: 64px;
  --ashh-space-11: 80px;
  --ashh-space-12: 96px;
  --ashh-space-section: 120px;

  /* —— Radius — rounded-2xl = 16px for cards & panels —— */
  --ashh-radius-sm: 4px;
  --ashh-radius-md: 8px;
  --ashh-radius-lg: 12px;
  --ashh-radius-xl: 16px;
  --ashh-radius-2xl: 16px;
  --ashh-radius-card: 16px;
  --ashh-radius-pill: 9999px;
  --radius-card: var(--ashh-radius-card);

  /* —— Buttons (neutral — no bright blue) —— */
  --ashh-btn-height: 40px;
  --ashh-btn-padding-x: 28px;
  --ashh-btn-radius: var(--ashh-radius-md);
  --ashh-btn-primary-bg: #ffffff;
  --ashh-btn-primary-text: #0b0d11;
  --ashh-btn-primary-hover: #e8eaed;
  --ashh-btn-secondary-border: var(--ashh-border-strong);
  --ashh-btn-secondary-hover: var(--ashh-surface-2);
  --ashh-btn-text: var(--text-secondary);
  --ashh-btn-text-hover: var(--text-primary);

  /* —— Hero mock frame —— */
  --ashh-mock-surface: #0f1218;
  --ashh-mock-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);

  /* —— Nav CTA — rounded-lg —— */
  --ashh-nav-cta-radius: 8px;

  /* —— Testimonials —— */
  --ashh-testimonial-sea: #e8ecf4;
  --ashh-testimonial-sea-mid: #dde5f1;
  --ashh-testimonial-accent: #e3ff00;

  /* —— Layout —— */
  --ashh-max-width: 1200px;
  --ashh-nav-height: 64px;
}

/* Dark mode default — all sections unless data-theme="light" */
html {
  color-scheme: dark;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--ashh-font-family);
  font-weight: var(--ashh-font-weight-body);
}

html[dir="rtl"] {
  font-family: var(--ashh-font-family-ar);
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Cards & floating panels — 16px corners site-wide */
.card,
.stat-card,
.linear-mock,
.nav-dropdown__panel,
body.landing-linear .linear-chapter__panel {
  border-radius: var(--radius-card);
}