/* ==========================================================
   DevOpsPoint Digital — Design Tokens · v1.0
   "النقطة" — from idea to implementation.
   Zain everywhere. Flat fills. Soft contrast. No pure black/white.
   Fonts: Zain 300–900 is loaded from Google Fonts by each page.
   ========================================================== */


:root {
  /* ---- Iris (primary · the thinking color) ---- */
  --iris-900: #24233f;
  --iris-800: #2e2d52;
  --iris-700: #3b3a68;   /* brand primary */
  --iris-500: #5f5e91;
  --iris-300: #a3a2c7;
  --iris-100: #e4e3ef;

  /* ---- Sage (secondary · the building color) ---- */
  --sage-700: #4f7a6c;
  --sage-500: #7fa99b;   /* brand secondary */
  --sage-200: #d3e4dd;

  /* ---- Apricot (accent · the idea / the point) ---- */
  --apricot-600: #e0814f;
  --apricot-400: #f2a072; /* brand accent — the nuqta */
  --apricot-100: #fce6d8;

  /* ---- Linen (neutrals) ---- */
  --linen-50:  #f7f5f1;  /* page */
  --linen-100: #efebe4;  /* sunken */
  --paper:     #fcfbf9;  /* cards */

  /* ---- Ink (text — never #000) ---- */
  --ink-900: #34334f;
  --ink-700: #5e5c77;
  --ink-500: #8b89a1;
  --ink-200: #dedbe6;

  /* ---- Semantic ---- */
  --ok:   #5f9e83;
  --warn: #d9a05b;
  --err:  #c8706a;
  --info: #6f8fbf;

  /* ---- Role tokens (light) ---- */
  --dp-bg: var(--linen-50);
  --dp-bg-sunken: var(--linen-100);
  --dp-surface: var(--paper);
  --dp-text: var(--ink-900);
  --dp-text-2: var(--ink-700);
  --dp-text-muted: var(--ink-500);
  --dp-border: var(--ink-200);
  --dp-primary: var(--iris-700);
  --dp-on-primary: var(--linen-50);
  --dp-secondary: var(--sage-700);
  --dp-accent: var(--apricot-400);
  --dp-on-accent: var(--iris-900);

  /* ---- Type ---- */
  --dp-font: 'Zain', system-ui, sans-serif;
  --fs-display: 64px;
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body: 18px;
  --fs-small: 15px;
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* ---- Shape & space (flat: no shadows, borders only) ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --space: 8px;
  --border: 1px solid var(--dp-border);
}

/* Dark ("Dusk") — soft, never pitch black */
[data-theme="dusk"] {
  --dp-bg: var(--iris-900);
  --dp-bg-sunken: #1e1d36;
  --dp-surface: var(--iris-800);
  --dp-text: #e6e4ef;
  --dp-text-2: #b4b2ca;
  --dp-text-muted: #8584a5;
  --dp-border: #403f69;
  --dp-primary: var(--iris-300);
  --dp-on-primary: var(--iris-900);
  --dp-secondary: var(--sage-500);
}

/* ---- Base ---- */
.dp, .dp * { font-family: var(--dp-font); }
.dp { background: var(--dp-bg); color: var(--dp-text); line-height: var(--lh-body); }
[dir="rtl"] .dp, .dp[dir="rtl"] { text-align: right; }

/* ---- Components ---- */
.dp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 var(--fs-body)/1 var(--dp-font);
  padding: 14px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--dp-primary); color: var(--dp-on-primary);
}
.dp-btn--accent { background: var(--dp-accent); color: var(--dp-on-accent); }
.dp-btn--ghost  { background: transparent; color: var(--dp-primary); box-shadow: inset 0 0 0 1.5px var(--dp-primary); }

.dp-card {
  background: var(--dp-surface); border: var(--border);
  border-radius: var(--r-lg); padding: calc(var(--space) * 3);
}
.dp-chip {
  display: inline-block; font: 700 var(--fs-small)/1 var(--dp-font);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--sage-200); color: var(--sage-700);
}
.dp-chip--idea { background: var(--apricot-100); color: var(--apricot-600); }