@layer tokens {

  /*
   * Design tokens — the only place a raw value may be written.
   * Monochrome by system: not one token carries a hue.
   */

  :root {

    /* ---- Ink ------------------------------------------------------------ */
    --alasadi-ink: #0A0A0A;
    --alasadi-ink-soft: #3D3D3D;
    --alasadi-ink-muted: #6E6E6E;

    /* ---- Surface -------------------------------------------------------- */
    --alasadi-surface: #FFFFFF;
    --alasadi-surface-soft: #F5F5F4;
    --alasadi-surface-inverse: #0A0A0A;

    /* ---- Border --------------------------------------------------------- */
    --alasadi-border: #E4E4E3;
    --alasadi-border-strong: #C9C9C7;

    /* ---- On dark surfaces ----------------------------------------------- */
    --alasadi-on-inverse: #FFFFFF;
    --alasadi-on-inverse-muted: #A8A8A8;
    --alasadi-on-inverse-border: #2A2A2A;

    /*
     * Tone channel. Every component reads these four, never the raw tokens
     * above, so a component works unchanged inside a light or a dark band.
     * The default is light: dark is opt-in and budgeted (spec section 12.1).
     */
    --alasadi-fg: var(--alasadi-ink);
    --alasadi-fg-soft: var(--alasadi-ink-soft);
    --alasadi-fg-muted: var(--alasadi-ink-muted);
    --alasadi-bg: var(--alasadi-surface);
    --alasadi-rule: var(--alasadi-border);
    --alasadi-rule-strong: var(--alasadi-border-strong);

    /* ---- Font families --------------------------------------------------- */
    /*
     * The Arabic stack needs no second family: the shipped IBM Plex Sans Arabic
     * files carry Latin and Western digits as well as Arabic.
     *
     * The Latin stack lists the Arabic face after Inter only as a script
     * fallback. Inter contains no Arabic glyphs, so an Arabic word on an English
     * page has to be rendered by the Arabic face; without this it would fall to
     * an arbitrary system font.
     */
    --alasadi-font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
    --alasadi-font-en: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---- Type scale (fluid) ---------------------------------------------- */
    --alasadi-text-xs: 0.75rem;
    --alasadi-text-sm: 0.875rem;
    --alasadi-text-base: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
    --alasadi-text-lg: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
    --alasadi-h4: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
    --alasadi-h3: clamp(1.5rem, 1vw + 1.25rem, 2rem);
    --alasadi-h2: clamp(2rem, 2vw + 1.4rem, 3rem);
    --alasadi-h1: clamp(2.5rem, 3.2vw + 1.6rem, 4rem);
    --alasadi-display: clamp(3rem, 6vw + 1rem, 6rem);

    /* ---- Weights ---------------------------------------------------------- */
    --alasadi-weight-regular: 400;
    --alasadi-weight-medium: 500;
    --alasadi-weight-semibold: 600;
    --alasadi-weight-bold: 700;

    /* ---- Leading ---------------------------------------------------------- */
    --alasadi-leading-body-ar: 1.85;
    --alasadi-leading-body-en: 1.65;
    --alasadi-leading-heading-ar: 1.35;
    --alasadi-leading-heading-en: 1.08;

    /* Resolved per language in typography.css. */
    --alasadi-leading-body: var(--alasadi-leading-body-ar);
    --alasadi-leading-heading: var(--alasadi-leading-heading-ar);

    /* ---- Tracking (Latin only — never applied to Arabic) ------------------ */
    --alasadi-tracking-display: -0.02em;
    --alasadi-tracking-eyebrow: 0.16em;

    /* ---- Measure ---------------------------------------------------------- */
    --alasadi-measure-ar: 60ch;
    --alasadi-measure-en: 68ch;
    --alasadi-measure: var(--alasadi-measure-ar);

    /* ---- Spacing scale, 4px to 128px ------------------------------------- */
    --alasadi-space-1: 0.25rem;
    --alasadi-space-2: 0.5rem;
    --alasadi-space-3: 0.75rem;
    --alasadi-space-4: 1rem;
    --alasadi-space-5: 1.5rem;
    --alasadi-space-6: 2rem;
    --alasadi-space-7: 3rem;
    --alasadi-space-8: 4rem;
    --alasadi-space-9: 6rem;
    --alasadi-space-10: 8rem;

    /* ---- Rhythm ----------------------------------------------------------- */
    --alasadi-section-block: clamp(4rem, 7vw, 8.5rem);
    --alasadi-gutter: clamp(1.25rem, 4vw, 3rem);

    /* ---- Containers -------------------------------------------------------- */
    --alasadi-container-wide: 1440px;
    --alasadi-container: 1280px;
    --alasadi-container-narrow: 1040px;
    --alasadi-container-text: 720px;

    /* ---- Grid --------------------------------------------------------------- */
    --alasadi-grid-columns: 4;
    --alasadi-grid-gap: var(--alasadi-space-6);
    --alasadi-card-gap: var(--alasadi-space-5);

    /* ---- Borders and radius ------------------------------------------------- */
    /* The hairline rule replaces shadow as the separation device. */
    --alasadi-border-width: 1px;
    --alasadi-radius-none: 0;
    --alasadi-radius-sm: 2px;
    --alasadi-radius-md: 4px;

    /* ---- Interaction --------------------------------------------------------- */
    --alasadi-touch-target: 44px;
    --alasadi-focus-width: 2px;
    --alasadi-focus-offset: 2px;

    /* ---- Motion ---------------------------------------------------------------- */
    --alasadi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --alasadi-duration-fast: 180ms;
    --alasadi-duration: 420ms;
    --alasadi-reveal-distance: 16px;

    /* ---- Media aspect ratios ----------------------------------------------------- */
    --alasadi-ratio-hero: 16 / 9;
    --alasadi-ratio-cover: 16 / 9;
    --alasadi-ratio-card: 4 / 5;
    --alasadi-ratio-portrait: 4 / 5;
    --alasadi-ratio-logo: 3 / 2;
  }

  /* Latin pages resolve the Latin leading and measure. */
  :root:lang(en) {
    --alasadi-leading-body: var(--alasadi-leading-body-en);
    --alasadi-leading-heading: var(--alasadi-leading-heading-en);
    --alasadi-measure: var(--alasadi-measure-en);
  }

  @media (min-width: 768px) {
    :root { --alasadi-grid-columns: 8; }
  }

  @media (min-width: 1024px) {
    :root { --alasadi-grid-columns: 12; }
  }

  /* Motion tokens collapse to zero when the visitor asks for less motion. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --alasadi-duration-fast: 0ms;
      --alasadi-duration: 0ms;
      --alasadi-reveal-distance: 0px;
    }
  }
}