:root {
  /* Official identity colors */
  --biin-cream: #f2ebe3;
  --biin-olive: #424636;
  --biin-brown: #705841;
  --biin-black: #000000;

  /* Stable brand aliases for the new shell; legacy CSS may override its own --biin-cream. */
  --biin-brand-cream: #f2ebe3;
  --biin-brand-olive: #424636;
  --biin-brand-brown: #705841;
  --biin-brand-black: #000000;

  /* Derived palette */
  --biin-sand: color-mix(in srgb, var(--biin-brown) 26%, var(--biin-cream));
  --biin-warm-cream: color-mix(in srgb, var(--biin-brown) 8%, var(--biin-cream));
  --biin-dark-olive: color-mix(in srgb, var(--biin-olive) 82%, var(--biin-black));
  --biin-warm-brown: color-mix(in srgb, var(--biin-brown) 88%, var(--biin-cream));

  /* Semantic color roles */
  --biin-surface-page: var(--biin-cream);
  --biin-surface-soft: var(--biin-warm-cream);
  --biin-surface-strong: var(--biin-brown);
  --biin-surface-dark: var(--biin-olive);
  --biin-text-primary: var(--biin-black);
  --biin-text-muted: color-mix(in srgb, var(--biin-black) 62%, var(--biin-cream));
  --biin-text-inverse: var(--biin-cream);
  --biin-border-soft: color-mix(in srgb, var(--biin-black) 14%, transparent);
  --biin-border-inverse: color-mix(in srgb, var(--biin-cream) 28%, transparent);

  /* Natural material gradients */
  --biin-gradient-olive-brown: linear-gradient(135deg, var(--biin-olive) 0%, var(--biin-brown) 100%);
  --biin-gradient-brown-cream: linear-gradient(135deg, var(--biin-brown) 0%, var(--biin-cream) 100%);
  --biin-gradient-sand: linear-gradient(135deg, var(--biin-sand) 0%, var(--biin-cream) 100%);
  --biin-gradient-dark-earth: linear-gradient(135deg, var(--biin-dark-olive) 0%, var(--biin-warm-brown) 100%);

  /* OFL-licensed geometric alternatives until official web licenses are available. */
  --font-biin-ar: "Alexandria", system-ui, sans-serif;
  --font-biin-en: var(--font-biin-ar);
  --biin-font-weight-light: 300;
  --biin-font-weight-regular: 400;
  --biin-font-weight-medium: 500;
  --biin-type-xs: 0.75rem;
  --biin-type-sm: 0.875rem;
  --biin-type-body: 1rem;
  --biin-type-lead: 1.25rem;
  --biin-type-h3: 1.75rem;
  --biin-type-h2: 3rem;
  --biin-type-h1: 4.5rem;
  --biin-leading-tight: 1.1;
  --biin-leading-body: 1.7;

  /* Layout */
  --biin-container: 77.5rem;
  --biin-container-wide: 90rem;
  --biin-gutter: 1.5rem;
  --biin-section-space-sm: 4rem;
  --biin-section-space-md: 6rem;
  --biin-section-space-lg: 8rem;

  /* Spacing */
  --biin-space-1: 0.25rem;
  --biin-space-2: 0.5rem;
  --biin-space-3: 0.75rem;
  --biin-space-4: 1rem;
  --biin-space-6: 1.5rem;
  --biin-space-8: 2rem;
  --biin-space-12: 3rem;
  --biin-space-16: 4rem;
  --biin-space-24: 6rem;
  --biin-space-32: 8rem;

  /* Shape */
  --biin-radius-none: 0;
  --biin-radius-sm: 0.25rem;
  --biin-radius-md: 0.5rem;
  --biin-radius-round: 999px;

  /* Motion */
  --biin-motion-fast: 180ms;
  --biin-motion-base: 320ms;
  --biin-motion-slow: 600ms;
  --biin-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --biin-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (max-width: 1199px) {
  :root {
    --biin-gutter: 2rem;
    --biin-section-space-lg: 6rem;
    --biin-type-h1: 3.75rem;
    --biin-type-h2: 2.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --biin-gutter: 1.25rem;
    --biin-section-space-sm: 3rem;
    --biin-section-space-md: 4rem;
    --biin-section-space-lg: 5rem;
    --biin-type-h1: 2.75rem;
    --biin-type-h2: 2rem;
    --biin-type-h3: 1.5rem;
  }
}

@media (max-width: 389px) {
  :root {
    --biin-gutter: 1rem;
    --biin-type-h1: 2.375rem;
    --biin-type-h2: 1.75rem;
  }
}