/* ==========================================================================
   COLORS — P2O / Ade Nichols
   Base palette sampled from the P2O logo, the "Human Resonance" book cover,
   and the GOSPEL workbook. Two brand modes share one system:
     • Ade Nichols (default) — ORANGE leads, blue is the accent
     • P2O               — BLUE leads, orange is the accent  ([data-brand="p2o"])
   ========================================================================== */

:root {
  /* ---- Raw brand hues ---------------------------------------------------- */
  /* Flow Orange — the warm, energetic signature (P2O logo P, book cover) */
  --orange-100: #fdf1dd;
  --orange-200: #f8d9a3;
  --orange-300: #f0b95f;
  --orange-400: #e8971e;   /* headshot backdrop / book cover field */
  --orange-500: #e4931d;   /* CORE ORANGE — logo, primary accent */
  --orange-600: #c97a12;
  --orange-700: #a2600c;

  /* Deep Blue — P2O logo body, structural / trustworthy */
  --blue-100: #e2edf3;
  --blue-200: #a9c9d8;
  --blue-300: #5f95ac;
  --blue-400: #336981;   /* logo mid-blue */
  --blue-500: #2c5f77;   /* CORE BLUE */
  --blue-600: #274b60;   /* logo dark-blue */
  --blue-700: #1c3746;

  /* Connective Teal — the "resonance" accent, workbook gradient */
  --teal-100: #dcf0f4;
  --teal-200: #a7d8e2;
  --teal-300: #5db6c8;
  --teal-400: #46aac2;   /* workbook gradient top */
  --teal-500: #2c7a8c;
  --teal-600: #247280;   /* workbook heading label */

  /* Resonance accents — pulled from the cover "connection" motif.
     Used sparingly for illustration, data, and category coding. */
  --coral: #e8604c;
  --gold:  #f2b632;
  --navy:  #223a52;

  /* ---- Neutrals — warm-tinted, never pure gray ------------------------- */
  --paper:    #f8f7f1;   /* cream page — workbook interior */
  --paper-alt:#efece1;   /* slightly deeper cream for banding */
  --ink-900:  #24252a;   /* primary text — warm charcoal */
  --ink-700:  #4a4b50;
  --ink-500:  #75767b;   /* muted / captions */
  --ink-300:  #b7b6b0;   /* disabled, hairlines on paper */
  --white:    #ffffff;
  --black:    #17181c;

  /* ---- Semantic status --------------------------------------------------- */
  --success: #3f8f6d;
  --warning: var(--orange-500);
  --danger:  var(--coral);
  --info:    var(--teal-500);

  /* ======================================================================
     BRAND-AWARE SEMANTIC ALIASES
     Default = ADE NICHOLS (orange leads, blue accent).
     ====================================================================== */
  --brand-primary:       var(--orange-500);
  --brand-primary-strong:var(--orange-600);
  --brand-primary-soft:  var(--orange-100);
  --brand-primary-on:    var(--white);      /* text/icon on primary fill */
  --brand-accent:        var(--blue-500);
  --brand-accent-soft:   var(--blue-100);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-sunken: var(--paper-alt);
  --surface-invert: var(--ink-900);

  /* Text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-on-dark: var(--paper);
  --text-brand:   var(--brand-primary);
  --text-link:    var(--brand-accent);

  /* Lines & focus */
  --border-hair:  color-mix(in srgb, var(--ink-900) 12%, transparent);
  --border-strong:color-mix(in srgb, var(--ink-900) 24%, transparent);
  --focus-ring:   color-mix(in srgb, var(--brand-primary) 55%, transparent);
}

/* ======================================================================
   P2O MODE — blue leads, orange is the accent.
   Apply data-brand="p2o" to any ancestor (or :root) to flip leadership.
   ====================================================================== */
[data-brand="p2o"] {
  --brand-primary:        var(--blue-500);
  --brand-primary-strong: var(--blue-600);
  --brand-primary-soft:   var(--blue-100);
  --brand-primary-on:     var(--white);
  --brand-accent:         var(--orange-500);
  --brand-accent-soft:    var(--orange-100);
  --text-link:            var(--orange-600);
}
