/* =========================================================
   MA MEDIA — Foundations
   Colors + Type tokens. Import this file first.
   ========================================================= */

/* ---------- FONT FACES ---------- */

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

@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/Syne-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* IBM Plex Sans Arabic — loaded via Google Fonts <link> in index.html */

/* ---------- TOKENS ---------- */

:root {
  /* Brand core — high-contrast, monochrome */
  --ink:        #111110;   /* primary fg / dark surfaces */
  --paper:      #F5F3EF;   /* primary bg / off-white */
  --accent:     #BC002D;   /* crimson — minimal use only (links, alerts, single accents) */

  /* Neutral scale, derived from ink/paper for hierarchy */
  --ink-95:     #1A1A19;
  --ink-80:     #3A3A38;
  --ink-60:     #6B6A66;   /* secondary text on paper */
  --ink-40:     #9C9B95;   /* tertiary text / dividers */
  --ink-20:     #CFCDC7;   /* hairlines */
  --ink-10:     #E4E1DB;   /* subtle bg / wells */

  --paper-2:    #EDEAE3;   /* a notch off off-white — section bg */
  --paper-3:    #E4E1DB;   /* deeper paper for cards on paper */

  /* Semantic foreground / background */
  --fg-1:       var(--ink);
  --fg-2:       var(--ink-60);
  --fg-3:       var(--ink-40);
  --fg-on-ink:  var(--paper);
  --fg-on-ink-2:#B8B6B0;
  --fg-on-ink-3:#7A7975;

  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--paper-3);
  --bg-ink:     var(--ink);
  --bg-ink-2:   #1F1F1D;

  --line:       var(--ink-20);
  --line-strong:var(--ink-80);
  --line-on-ink:#2A2A28;

  --accent-fg:  var(--accent);
  --accent-bg:  var(--accent);
  --accent-on:  var(--paper);

  /* Type families */
  --font-display: "Syne", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "DM Sans", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type scale (fluid-friendly defaults; clamp at use site if needed) */
  --fs-display-2xl: 96px;
  --fs-display-xl:  72px;
  --fs-display-l:   56px;
  --fs-h1:          44px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     11px;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.14em;

  /* Spacing — 4pt grid */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii — restrained. Tombstone arc = 999px on top corners */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-arc:  999px 999px 0 0;  /* signature MA arch */
  --r-pill: 999px;

  /* Shadows — minimal; mostly hairlines and subtle elevations on paper */
  --shadow-1: 0 1px 0 rgba(17,17,16,0.06);
  --shadow-2: 0 6px 16px -8px rgba(17,17,16,0.18), 0 1px 0 rgba(17,17,16,0.04);
  --shadow-3: 0 18px 40px -16px rgba(17,17,16,0.28);

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  /* Layout */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
}

/* ---------- BASE / SEMANTIC TYPE ---------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-feature-settings: "ss01", "ss02", "kern";
}

.display-2xl, .display-xl, .display-l, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-display); font-weight: 700; }
.display-xl  { font-size: var(--fs-display-xl);  line-height: var(--lh-display); font-weight: 700; }
.display-l   { font-size: var(--fs-display-l);   line-height: var(--lh-display); font-weight: 600; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-heading); }
h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-heading); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.lede {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--fg-1);
  text-wrap: pretty;
}

.script {
  /* Mimic the cursive "media" lockup — fallback only, real logo is artwork */
  font-family: "Caveat", "Brush Script MT", cursive;
  font-style: italic;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-40);
  transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }
a.accent { color: var(--accent); text-decoration-color: var(--accent); }

::selection { background: var(--ink); color: var(--paper); }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* RTL / Arabic support */
:lang(ar), [dir="rtl"] { font-family: var(--font-arabic); }