/* ============================================================
   A7mad.me · Design tokens (semantic)
   Source of truth: 04_Design/Color System.md (vault, D-028)
   Identity constants: Cream #F5F3EE, Beige #D7CBB3, Brown #8B6F4E
   Navy family (bluer, D-028): #243A5A / #1C2F49 / #465C77
   No #000 / near-black anywhere in site UI.
   ============================================================ */

:root {
  /* ---- Identity constants ---- */
  --beige: #D7CBB3;              /* pixel marks, dots, small identity pieces */

  /* ---- Backgrounds ---- */
  --bg-page: #F5F3EE;            /* page ground (Cream) */
  --bg-soft: #EFEBE1;            /* quiet sub-backgrounds */

  /* ---- Surfaces ---- */
  --surface-primary: #FBF9F5;    /* first raised surface on the page */
  --surface-raised: #FDFCF9;     /* highest surface, prominent cards */
  --surface-warm: #E9E2D2;       /* warm beige panes inside stages */

  /* ---- Text ---- */
  --text-primary: #1C2F49;       /* H1/H2, section names, leading elements */
  --text-heading: #1C2F49;       /* D-043: single knob for all heavy headings */
  --text-secondary: #465C77;     /* lead lines, mid-weight text */
  --text-muted: #66758C;         /* body, descriptions, secondary copy */

  /* ---- Brand navy ---- */
  --brand-primary: #243A5A;      /* primary buttons, nav active, strong tiles */
  --brand-deep: #1C2F49;         /* hover/pressed, strongest dark pieces */
  --brand-mid: #465C77;          /* intermediate navy elements */

  /* ---- Borders ---- */
  --border-soft: #DAD2C0;        /* hairlines, minor surfaces */
  --border-mid: rgba(36, 58, 90, 0.34); /* secondary cards (D-036) */
  --border-strong: #243A5A;      /* featured frames, strong outlines */

  /* ---- Accent ---- */
  --accent-warm: #8B6F4E;        /* Warm Brown: kickers, pixel accents, links */

  /* ---- Glow / ambient ---- */
  --glow-brand: rgba(36, 58, 90, 0.10);
  --glow-warm: rgba(139, 111, 78, 0.16);
  --glow-warm-faint: rgba(139, 111, 78, 0.08);

  /* ---- Shadows (navy-based, never black) ---- */
  --shadow-soft: 0 8px 24px -14px rgba(28, 47, 73, 0.35);
  --shadow-raised: 0 24px 48px -32px rgba(28, 47, 73, 0.40);

  /* ---- Dark section (contact + footer) ---- */
  --dark-bg: #152238;
  --dark-raised: #20344F;
  --dark-line: #31486B;
  --dark-text: #F5F3EE;
  --dark-muted: #9DACC4;
  --accent-warm-bright: #A98A64;

  /* ---- Hard pixel depth: navy family only under navy (D-036) ---- */
  --px-shadow-brand: -3px 4px 0 var(--brand-deep);

  /* ---- Pixel chamfer clips (D-036: one step, premium restraint) ---- */
  --chamfer-sm: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  --chamfer-md: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --chamfer-lg: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);

  /* Bubble with pixel tail near the inline-start (right in RTL):
     body sits above a reserved 12px strip that holds the tail. */
  --bubble-clip: polygon(
    8px 0, calc(100% - 8px) 0, 100% 8px,
    100% calc(100% - 20px), calc(100% - 8px) calc(100% - 12px),
    calc(100% - 30px) calc(100% - 12px), calc(100% - 30px) 100%,
    calc(100% - 48px) calc(100% - 12px),
    8px calc(100% - 12px), 0 calc(100% - 20px), 0 8px
  );

  /* ---- Project scene hook (D-020/D-026): stays Ahmed Tech until a
     real asset proves the project color, then set per-stage. ---- */
  --project-glow: var(--glow-warm);

  /* ---- Typography ---- */
  --font-ar: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-px: 'VT323', 'Courier New', monospace;   /* Latin wordmark/labels only */

  --fs-hero: clamp(64px, 13vw, 128px);
  --fs-h2: clamp(30px, 6vw, 46px);
  --fs-h3: clamp(24px, 4.6vw, 34px);
  --fs-lead: clamp(17px, 2.4vw, 20px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-kicker: 15px;

  --lh-tight: 1.15;
  --lh-body: 1.85;

  /* ---- Rhythm (measured against A9L: 96-110px desktop sections) ---- */
  --sec-pad: clamp(72px, 11vw, 110px);
  --side-pad: 32px;
  --wrap: 1200px;
  --wrap-narrow: 1100px;
  --measure: 34em;

  /* ---- Radii: mostly crisp for the pixel signature ---- */
  --r-btn: 2px;
  --r-card: 4px;
  --r-stage: 6px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.75, 0.3, 1);
  --ease-soft: cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-fast: 0.25s;
  --t-med: 0.45s;
  --t-reveal: 0.85s;

  /* ---- Z layers ---- */
  --z-nav: 50;
  --z-progress: 60;
  --z-intro: 200;
}