/* ==========================================================================
   DARJA RIHLA - VISUAL THEME SYSTEM v1.0
   File: dr-theme-tokens.css
   Role: Shared neutral tokens + per-hub accent registry.
   Built from: reports/darja_rihla_theme_token_recovery_2026_06_13
   Notes:
     - Tier 1/2 source of truth. Lighter, more premium, editorial.
     - Recovered brand values are reused where a hub existed pre-crash.
     - New hubs (lifestyle, creativity, moto, framework, family) are design
       decisions, flagged in the report with lower confidence.
     - Safe to load globally: neutral names are overridden locally by existing
       per-post scopes (.dr-new-post-shell), so existing posts are unaffected.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. SHARED NEUTRAL FOUNDATION (light editorial)
     ---------------------------------------------------------------------- */
  --dr-bg: #e9edf1;                 /* page shell - soft, not white */
  --dr-surface: #ffffff;            /* default card surface */
  --dr-surface-elevated: #ffffff;   /* raised card (pair with --dr-shadow-lg) */
  --dr-surface-soft: #f2f5f8;       /* soft / editorial section */
  --dr-surface-tint: #fbfcfe;       /* faint wash above shell */

  --dr-border: rgba(20, 34, 46, 0.10);
  --dr-border-soft: rgba(20, 34, 46, 0.06);
  --dr-border-strong: rgba(20, 34, 46, 0.16);

  --dr-text: #14222e;               /* strong body text */
  --dr-text-strong: #0b1620;        /* headings */
  --dr-text-muted: #566671;         /* muted text */
  --dr-text-faint: #66747e;         /* labels / eyebrows (AA ~4.7:1 on white) */

  /* Softened dark shell (used by dark heroes / dark visual frames).
     Intentionally NOT near-black: reduces the old over-darkness. */
  --dr-shell-bg-dark: #16202b;
  --dr-surface-dark: #1e2a36;
  --dr-surface-dark-soft: #25333f;
  --dr-text-on-dark: #eef4f8;
  --dr-text-on-dark-muted: rgba(238, 244, 248, 0.66);
  --dr-border-on-dark: rgba(255, 255, 255, 0.12);

  /* ----------------------------------------------------------------------
     2. SCALE: radius, shadow, glow (premium = soft + airy)
     ---------------------------------------------------------------------- */
  --dr-radius-sm: 10px;
  --dr-radius: 16px;
  --dr-radius-lg: 22px;

  --dr-shadow-sm: 0 4px 14px rgba(16, 33, 46, 0.06);
  --dr-shadow: 0 14px 38px rgba(16, 33, 46, 0.10);
  --dr-shadow-lg: 0 28px 70px rgba(16, 33, 46, 0.14);

  --dr-ease: cubic-bezier(.22, .61, .36, 1);
  --dr-speed: 240ms;

  /* ----------------------------------------------------------------------
     3. ACTIVE ACCENT (defaults; each hub class re-points these)
     ---------------------------------------------------------------------- */
  --dr-accent: #1f9fc0;             /* primary hub accent */
  --dr-accent-2: #c9a85e;           /* secondary accent */
  --dr-accent-3: #6fd0e0;           /* tertiary / highlight */
  --dr-accent-ink: #06343d;         /* deep accent for text/badges on light */
  --dr-hub-tint: rgba(31, 159, 192, 0.10);  /* faint accent wash for fills */
  --dr-hub-wash: #eef7fa;           /* soft accent-tinted section background */
  --dr-hub-glow: rgba(31, 159, 192, 0.22);  /* focus / active glow */

  /* ----------------------------------------------------------------------
     4. HUB ACCENT REGISTRY (flat headline accent per hub, for reference)
        recovered = traced to a pre-crash palette; design = new decision
     ---------------------------------------------------------------------- */
  --dr-hub-cyber: #1f9fc0;          /* recovered: dr-cyber #65c9dc / #00b8d9 */
  --dr-hub-wpsec: #0e7e95;          /* recovered: wordpress-security rebuild  */
  --dr-hub-lessen: #ee6a2c;         /* recovered: House of Orange #f0682a     */
  --dr-hub-systems: #d6a84a;        /* recovered: dr-systems #e0bb69          */
  --dr-hub-culture: #b8703a;        /* recovered: culture terracotta #b05c28  */
  --dr-hub-philosophy: #8a6fc0;     /* recovered: philosophy violet #a991bd   */
  --dr-hub-health: #127f50;         /* current Health hub: contrast-safe leaf */
  --dr-hub-lifestyle: #e0875c;      /* design (low confidence)                */
  --dr-hub-startup: #d6a858;        /* recovered: registry --drc-business     */
  --dr-hub-creativity: #c2569b;     /* design                                 */
  --dr-hub-moto: #d8503a;           /* design                                 */
  --dr-hub-framework: #4f6fc4;      /* design                                 */
  --dr-hub-family: #5f9e7a;         /* design                                 */
}

/* ==========================================================================
   5. HUB THEME SCOPES
   Activate by adding a class OR data attribute to the post/page root:
     class="... dr-hub-cyber"   or   data-dr-hub="cyber"
   Each scope only re-points the active accent set; neutrals stay shared.
   ========================================================================== */

:where(.dr-hub-cyber, .dr-hub-cybersecurity, [data-dr-hub="cyber"], [data-dr-hub="cybersecurity"]) {
  --dr-accent: #1f9fc0; --dr-accent-2: #c9a85e; --dr-accent-3: #6fd0e0;
  --dr-accent-ink: #06343d; --dr-hub-tint: rgba(31, 159, 192, 0.10);
  --dr-hub-wash: #eef7fa; --dr-hub-glow: rgba(31, 159, 192, 0.22);
}

:where(.dr-hub-wpsec, .dr-hub-wordpress-security, [data-dr-hub="wpsec"], [data-dr-hub="wordpress-security"]) {
  --dr-accent: #0e7e95; --dr-accent-2: #3a9a78; --dr-accent-3: #5dc1d2;
  --dr-accent-ink: #063038; --dr-hub-tint: rgba(14, 126, 149, 0.10);
  --dr-hub-wash: #edf6f8; --dr-hub-glow: rgba(14, 126, 149, 0.22);
}

:where(.dr-hub-lessen, .dr-hub-nederlandse-lessen, [data-dr-hub="lessen"], [data-dr-hub="nederlandse-lessen"]) {
  --dr-accent: #ee6a2c; --dr-accent-2: #2b5ca8; --dr-accent-3: #2f8a5b;
  --dr-accent-ink: #6a2c11; --dr-hub-tint: rgba(238, 106, 44, 0.10);
  --dr-hub-wash: #fff4ec; --dr-hub-glow: rgba(238, 106, 44, 0.20);
}

:where(.dr-hub-systems, [data-dr-hub="systems"]) {
  --dr-accent: #d6a84a; --dr-accent-2: #5b86d8; --dr-accent-3: #efc985;
  --dr-accent-ink: #4a3410; --dr-hub-tint: rgba(214, 168, 74, 0.12);
  --dr-hub-wash: #fbf5e8; --dr-hub-glow: rgba(214, 168, 74, 0.22);
}

:where(.dr-hub-culture, [data-dr-hub="culture"]) {
  --dr-accent: #b8703a; --dr-accent-2: #2f93a3; --dr-accent-3: #d9a35e;
  --dr-accent-ink: #4a2a14; --dr-hub-tint: rgba(184, 112, 58, 0.10);
  --dr-hub-wash: #fbf2e9; --dr-hub-glow: rgba(184, 112, 58, 0.20);
}

:where(.dr-hub-philosophy, [data-dr-hub="philosophy"]) {
  --dr-accent: #8a6fc0; --dr-accent-2: #4a1f8a; --dr-accent-3: #c3a9e0;
  --dr-accent-ink: #2c1a4a; --dr-hub-tint: rgba(138, 111, 192, 0.10);
  --dr-hub-wash: #f4eefb; --dr-hub-glow: rgba(138, 111, 192, 0.22);
}

:where(.dr-hub-health, [data-dr-hub="health"]) {
  --dr-accent: #127f50; --dr-accent-2: #117f7b; --dr-accent-3: #bedb4d;
  --dr-accent-ink: #17372e; --dr-hub-tint: rgba(18, 127, 80, 0.12);
  --dr-hub-wash: #f2f8ec; --dr-hub-glow: rgba(190, 219, 77, 0.22);
}

:where(.dr-hub-lifestyle, [data-dr-hub="lifestyle"]) {
  --dr-accent: #e0875c; --dr-accent-2: #6fa3a0; --dr-accent-3: #f0b48c;
  --dr-accent-ink: #5a2f1a; --dr-hub-tint: rgba(224, 135, 92, 0.10);
  --dr-hub-wash: #fdf3ec; --dr-hub-glow: rgba(224, 135, 92, 0.20);
}

:where(.dr-hub-startup, [data-dr-hub="startup"]) {
  --dr-accent: #d6a858; --dr-accent-2: #2f6fb0; --dr-accent-3: #ecc77f;
  --dr-accent-ink: #4d3712; --dr-hub-tint: rgba(214, 168, 88, 0.12);
  --dr-hub-wash: #fbf5e8; --dr-hub-glow: rgba(214, 168, 88, 0.22);
}

:where(.dr-hub-creativity, [data-dr-hub="creativity"]) {
  --dr-accent: #c2569b; --dr-accent-2: #f0a83c; --dr-accent-3: #e58fc4;
  --dr-accent-ink: #4a1338; --dr-hub-tint: rgba(194, 86, 155, 0.10);
  --dr-hub-wash: #fbeef6; --dr-hub-glow: rgba(194, 86, 155, 0.20);
}

:where(.dr-hub-moto, [data-dr-hub="moto"]) {
  --dr-accent: #d8503a; --dr-accent-2: #2b2f38; --dr-accent-3: #f08a5c;
  --dr-accent-ink: #5a1e12; --dr-hub-tint: rgba(216, 80, 58, 0.10);
  --dr-hub-wash: #fdefe9; --dr-hub-glow: rgba(216, 80, 58, 0.20);
}

:where(.dr-hub-framework, [data-dr-hub="framework"]) {
  --dr-accent: #4f6fc4; --dr-accent-2: #5aa0b8; --dr-accent-3: #97a8e0;
  --dr-accent-ink: #21305e; --dr-hub-tint: rgba(79, 111, 196, 0.10);
  --dr-hub-wash: #eef1fb; --dr-hub-glow: rgba(79, 111, 196, 0.22);
}

:where(.dr-hub-family, [data-dr-hub="family"]) {
  --dr-accent: #5f9e7a; --dr-accent-2: #d99a5a; --dr-accent-3: #95c4a8;
  --dr-accent-ink: #2a3f30; --dr-hub-tint: rgba(95, 158, 122, 0.12);
  --dr-hub-wash: #eef6f0; --dr-hub-glow: rgba(95, 158, 122, 0.22);
}