/* Design tokens — copied from the Alaa Shameseddine Design System (colors, typography, spacing). */
/* ============================================================
   Alaa Shameseddine — Color tokens
   A warm, earthen palette sampled from the brand's social
   carousels: sun-baked ochre, terracotta, mustard, clay and
   sand over a soft paper ground. No pure white, no pure black.
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---- */
  --as-ochre: #9e5601;        /* rust / burnt sienna — deepest, most saturated */
  --as-terracotta: #c15b4d;   /* warm red clay */
  --as-mustard: #a68e2c;      /* olive-gold */
  --as-gold: #d5b94a;         /* lighter luminous gold (accent / highlight) */
  --as-clay: #b1896e;         /* soft tan / mocha */
  --as-clay-deep: #967357;    /* deeper clay */
  --as-sand: #ead5c3;         /* warm cream / sand */
  --as-olive-deep: #726530;   /* dark olive (deep ground) */

  /* ---- Neutrals ---- */
  --as-paper: #f8f4f3;        /* off-white ground — the canvas of the brand */
  --as-paper-2: #f1e9e2;      /* faintly warmer paper */
  --as-ink: #2b2824;          /* near-black warm ink — primary text */
  --as-ink-70: #5b554d;       /* muted ink — secondary text */
  --as-ink-45: #8c857a;       /* tertiary / captions */
  --as-line: #e3d8cd;         /* hairline / border on paper */

  /* ---- Tints & shades (hover / press / fills) ---- */
  --as-ochre-press: #843f00;
  --as-terracotta-press: #a8483b;
  --as-terracotta-tint: #f0d9d4;   /* soft fill / badge bg */
  --as-mustard-press: #8a7522;
  --as-sand-deep: #ddc2a9;

  /* ============================================================
     Semantic aliases — reference THESE in components.
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--as-paper);
  --surface-card: #fffdfb;
  --surface-sunken: var(--as-paper-2);
  --surface-inverse: var(--as-ink);

  /* Text */
  --text-strong: var(--as-ink);
  --text-body: var(--as-ink-70);
  --text-muted: var(--as-ink-45);
  --text-on-color: var(--as-paper);
  --text-on-sand: var(--as-ink);

  /* Brand / interactive */
  --brand-primary: var(--as-terracotta);
  --brand-primary-press: var(--as-terracotta-press);
  --brand-secondary: var(--as-ochre);
  --brand-secondary-press: var(--as-ochre-press);
  --brand-accent: var(--as-gold);

  /* Lines & borders */
  --border-subtle: var(--as-line);
  --border-strong: var(--as-clay);

  /* Focus ring */
  --focus-ring: color-mix(in oklab, var(--as-terracotta) 55%, transparent);
}
/* ============================================================
   Alaa Shameseddine — Typography tokens
   One family does it all: Setar L (Arabic + Latin).
   Aref Ruqaa is reserved for short Arabic calligraphic accents.
   Headlines lean on the Heavy (900) weight; body on Regular.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Setar", "Segoe UI", system-ui, sans-serif;
  --font-display: "Setar", "Segoe UI", system-ui, sans-serif;   /* use weight 900 */
  --font-arabic-script: "Aref Ruqaa", "Setar", serif;           /* calligraphic accent */

  /* Weights */
  --fw-thin: 100; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-heavy: 900; /* @kind font */

  /* Type scale (1.250 major-third, rooted at 16px) */
  --text-2xs: 0.75rem;    /* 12 */
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.9375rem;   /* 15 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.375rem;    /* 22 */
  --text-xl: 1.75rem;     /* 28 */
  --text-2xl: 2.25rem;    /* 36 */
  --text-3xl: 3rem;       /* 48 */
  --text-4xl: 4rem;       /* 64 */
  --text-5xl: 5.5rem;     /* 88 — poster / carousel headline */

  /* Line heights */
  --leading-tight: 1.05;   /* display headlines */
  --leading-snug: 1.25;    /* sub-heads */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.7;  /* long Arabic body */

  /* Letter spacing — Setar is geometric; tighten large display, open small caps */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;   /* uppercase eyebrow / label */
}
/* ============================================================
   Alaa Shameseddine — Spacing, radii, shadows, motion
   Generous, calm spacing on an 8px base. Soft organic radii,
   low-contrast warm shadows (the brand sits on warm paper, so
   shadows are tinted, never neutral grey).
   ============================================================ */

:root {
  /* Spacing — 8px base */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Radii — soft, slightly rounded; pills for buttons/chips */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Warm shadows (tinted with the ochre/clay family, low opacity) */
  --shadow-xs: 0 1px 2px rgba(120, 86, 40, 0.08);
  --shadow-sm: 0 2px 6px rgba(120, 86, 40, 0.10);
  --shadow-md: 0 8px 24px rgba(120, 86, 40, 0.12);
  --shadow-lg: 0 18px 48px rgba(100, 70, 30, 0.16);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Motion — calm, no bounce; gentle ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* Layout */
  --container-sm: 560px;
  --container-md: 768px;
  --container-lg: 1080px;

  /* Social canvas (Instagram 4:5 portrait carousel) */
  --post-width: 1080px;
  --post-height: 1350px;
}