/* =====================================================================
   Hawiyah · هوية — Colors & Type
   Brand identity consultancy. Bilingual EN/AR. Riyadh, KSA.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-Thin.ttf") format("truetype");       font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-ExtraLight.ttf") format("truetype"); font-weight:250; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-Light.ttf") format("truetype");      font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-Regular.ttf") format("truetype");    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-Medium.ttf") format("truetype");     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-SemiBold.ttf") format("truetype");   font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Outfit"; src:url("./fonts/Outfit-Bold.ttf") format("truetype");       font-weight:700; font-style:normal; font-display:swap; }

@font-face { font-family:"Rubik"; src:url("./fonts/Rubik-Light.ttf") format("truetype");      font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Rubik"; src:url("./fonts/Rubik-Regular.ttf") format("truetype");    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Rubik"; src:url("./fonts/Rubik-Medium.ttf") format("truetype");     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Rubik"; src:url("./fonts/Rubik-SemiBold.ttf") format("truetype");   font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Rubik"; src:url("./fonts/Rubik-Bold.ttf") format("truetype");       font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ===== CORE PALETTE (80/15/5 rule) ===== */
  --ink:           #000000;            /* Pure Ink — 80% of brand surface */
  --ink-soft:      #0A0A0A;            /* Off-pure on photography */
  --ink-card:      #141414;            /* Card-on-ink elevation */
  --line-dark:     rgba(255,255,255,.10);
  --line-darker:   rgba(255,255,255,.06);

  --purple:        #5D4391;            /* Hawiyah Purple — 15%, highlight + CTA */
  --purple-light:  #8B6FD1;            /* Labels on dark only — fails AA on white */
  --purple-bar:    rgba(93,67,145,.55);/* Signature highlight bar */
  --purple-tint:   rgba(93,67,145,.08);/* Tinted callouts */

  --paper:         #EDEAE3;            /* Warm off-white surfaces */
  --paper-soft:    #F5F2EC;            /* Lighter paper */
  --paper-line:    #DAD6CD;            /* 1px borders on paper */
  --paper-muted:   #8A8378;            /* Muted text on paper */

  --white:         #FFFFFF;            /* Type on dark */

  /* ===== VIBRANT (campaigns only — one per design) ===== */
  --orange:        #FF6B1A;
  --yellow:        #F5C518;
  --pink:          #E11D74;
  --sky:           #2DA3F5;
  --teal:          #0F8F8F;

  /* ===== SEMANTIC FOREGROUND ===== */
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-soft:   rgba(255,255,255,.72);
  --fg-on-dark-muted:  rgba(255,255,255,.55);
  --fg-on-dark-faint:  rgba(255,255,255,.35);

  --fg-on-paper:       #000000;
  --fg-on-paper-soft:  #3D3A33;
  --fg-on-paper-muted: #8A8378;

  /* ===== TYPOGRAPHY FAMILIES ===== */
  --font-latin:  "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-arabic: "Rubik", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== TYPE SCALE (1280×720 reference) ===== */
  /* Headlines — Outfit Thin 200, tight tracking */
  --display-1: 200 128px/0.96 var(--font-latin);   /* Hero on dark */
  --display-2: 200 96px/1     var(--font-latin);
  --h1:        200 72px/1.04  var(--font-latin);   /* Section opener */
  --h2:        200 56px/1.08  var(--font-latin);   /* Sits in purple bar */
  --h3:        300 40px/1.15  var(--font-latin);
  --h4:        400 28px/1.25  var(--font-latin);

  /* Body — Outfit Light 300, justified for editorial */
  --body-l:    300 20px/1.65  var(--font-latin);
  --body:      300 16px/1.7   var(--font-latin);
  --body-s:    300 14px/1.7   var(--font-latin);

  /* Eyebrow — Outfit Semibold 600, 3-5px tracking, ALL CAPS */
  --eyebrow:   600 12px/1     var(--font-latin);

  /* Arabic — Rubik, never below 400 */
  --ar-display: 700 96px/1.1  var(--font-arabic);
  --ar-h1:      700 64px/1.15 var(--font-arabic);
  --ar-h2:      700 48px/1.2  var(--font-arabic);
  --ar-h3:      500 32px/1.4  var(--font-arabic);
  --ar-body-l:  400 20px/1.9  var(--font-arabic);
  --ar-body:    400 16px/1.9  var(--font-arabic);
  --ar-body-s:  400 14px/1.85 var(--font-arabic);

  /* Letter-spacing */
  --tracking-tight:   -0.01em;   /* headlines */
  --tracking-tighter: -0.03em;   /* display */
  --tracking-normal:   0;
  --tracking-eyebrow:  0.32em;   /* 3-5px at 12px */
  --tracking-eyebrow-s:0.24em;

  /* ===== SPACING — 8px base, page padding 64/80 ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --page-pad-y: 64px;
  --page-pad-x: 80px;

  /* ===== BORDERS — SQUARE corners are signature ===== */
  --radius-0: 0;       /* default — buttons, cards, callouts */
  --radius-sm: 2px;    /* avatars, tiny chips only */
  --radius-page: 4px;  /* page rendering shadow only */
  --border-paper: 1px solid var(--paper-line);
  --border-dark:  1px solid var(--line-dark);
  --border-accent: 3px solid var(--purple);   /* left rule on callouts */

  /* ===== SHADOWS — sparingly. Editorial, not material ===== */
  --shadow-page:  0 6px 30px rgba(0,0,0,0.18);
  --shadow-card:  0 1px 0 var(--paper-line);   /* preferred: borders, not shadows */

  /* ===== MOTION ===== */
  --ease-out:  cubic-bezier(.7,0,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast:  180ms;
  --dur:       280ms;
  --dur-slow:  700ms;
}

/* ---------- Element defaults ---------- */
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { font: var(--body); color: var(--fg-on-dark); background: var(--ink); }

h1 { font: var(--h1); letter-spacing: var(--tracking-tight); }
h2 { font: var(--h2); letter-spacing: var(--tracking-tight); }
h3 { font: var(--h3); letter-spacing: var(--tracking-tight); }
h4 { font: var(--h4); }
p  { font: var(--body); }

[dir="rtl"], .ar { font-family: var(--font-arabic); font-weight: 400; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
.ar.h1, .ar.h2, .ar.h3 { font-weight: 700; }

::selection { background: var(--purple); color: #fff; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--purple-light);
}
.eyebrow.on-paper { color: var(--purple); }

/* ---------- SIGNATURE: Purple highlight bar ----------
   Wrap text in <span class="hl">…</span> inside a heading.
   Bar covers ~55% cap height, extends 8px past text, sits behind. */
.hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 8px;
}
.hl::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  top: 28%; bottom: 17%;       /* ~55% of cap height — calibrated for Latin */
  background: var(--purple-bar);
  z-index: -1;
}
/* Arabic letters extend further vertically; recalibrate the bar to cover the body */
[dir="rtl"] .hl::before,
html[lang="ar"] .hl::before {
  top: 18%; bottom: 14%;
}

/* ---------- Buttons (SQUARE, verb-first) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 0;
  border-radius: 0;            /* SQUARE — non-negotiable */
  background: var(--purple);
  color: #fff;
  font: 500 14px/1 var(--font-latin);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.btn:hover  { background: #4A3577; }
.btn:active { transform: translateY(1px); }
.btn.ghost  { background: transparent; color: var(--white); border: 1px solid var(--line-dark); }
.btn.ghost:hover { border-color: var(--purple-light); color: var(--purple-light); background: transparent; }
.btn.on-paper.ghost { color: var(--ink); border-color: var(--paper-line); }

/* ---------- Cards ---------- */
.card-paper {
  background: var(--white);
  border: var(--border-paper);
  border-radius: 0;
  padding: 28px 32px;
}
.card-ink {
  background: var(--ink-card);
  border: var(--border-dark);
  border-radius: 0;
  padding: 28px 32px;
  color: var(--white);
}

/* ---------- Tinted callout ---------- */
.callout {
  background: var(--purple-tint);
  border-left: var(--border-accent);
  padding: 20px 24px;
}

/* ---------- Bilingual split ---------- */
.bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.bilingual .en { text-align: left; }
.bilingual .ar { direction: rtl; text-align: right; font-family: var(--font-arabic); font-weight: 400; }