:root {
  /* SATC official primary palette */
  --satc-black: #000000;
  --satc-charcoal: #231f20;
  --satc-gold: #9d7a4d;
  --satc-white: #ffffff;
  --satc-stone: #d0d0c6;

  /* SATC official secondary palette */
  --satc-navy-900: #091633;
  --satc-navy-700: #0b2451;
  --satc-plum-900: #2d0821;
  --satc-plum-800: #331427;
  --satc-plum-600: #4d303f;
  --satc-burgundy: #2d050f;
  --satc-olive-900: #363d20;
  --satc-olive-700: #454c35;
  --satc-cream: #f5f5d3;

  /* Semantic design tokens */
  --color-primary: var(--satc-burgundy);
  --color-primary-soft: var(--satc-plum-600);
  --color-accent: var(--satc-gold);
  --color-heading: var(--satc-charcoal);
  --color-body: var(--satc-charcoal);
  --color-surface: var(--satc-white);
  --color-surface-muted: var(--satc-stone);
  --color-border: color-mix(in srgb, var(--satc-stone) 70%, var(--satc-white));
  --color-footer: var(--satc-charcoal);

  --font-family-ar: "Cairo", Tahoma, sans-serif;

  /* Fluid type scale — single source of truth for headings site-wide.
     Use these tokens instead of hard-coded px so every page/section stays consistent. */
  --fs-page-title: clamp(36px, 4.5vw, 60px);   /* page hero H1 (home + inner pages) */
  --fs-section-title: clamp(26px, 2.9vw, 36px); /* section headings (H2) */
  --fs-box-title: clamp(17px, 1.5vw, 20px);     /* card / box titles (H3) */
  --fs-subtitle: clamp(15px, 1.3vw, 17px);      /* small headings (H4) */
  --fs-lead: clamp(15px, 1.2vw, 17px);          /* intro / lead paragraphs */
  --fs-body: 16px;                               /* body text */
  --fs-small: 13px;                              /* secondary / meta text */
  --fs-eyebrow: 12px;                            /* small uppercase labels */

  /* Vertical rhythm — consistent top/bottom padding for content sections */
  --section-y: clamp(64px, 7vw, 92px);

  /* Buttons — consistent primary CTA sizing/color/interaction site-wide */
  --btn-py: 13px;      /* vertical padding */
  --btn-px: 26px;      /* horizontal padding */
  --btn-weight: 700;   /* label weight */
  --btn-bg: var(--satc-gold);          /* primary fill */
  --btn-fg: #ffffff;                   /* primary label */
  --btn-bg-hover: var(--satc-burgundy);/* hover fill */
  --btn-lift: -2px;                    /* hover raise */
  /* secondary (outline) — on light surfaces */
  --btn2-line: var(--satc-burgundy);
  --btn2-fg: var(--satc-burgundy);
  --btn2-fill-hover: var(--satc-burgundy);
  /* secondary (outline) — on dark surfaces/imagery */
  --btn2d-line: #ffffff;
  --btn2d-fg: #ffffff;
  --btn2d-fill-hover: #ffffff;
  --btn2d-fg-hover: var(--satc-burgundy);

  --radius-control: 4px;
  --radius-panel: 6px;
  --shadow-dropdown: 0 18px 38px rgb(45 5 15 / 12%);
  --motion-fast: 180ms;
  --motion-normal: 240ms;
}