/* ============================================================
   MOCNO — Colors  (v2 — UX-refined working system)
   Source: official brand guide + the user's finalized UI palette.
   Discipline unchanged: grey field, white cards, dark drama, and
   RED AS THE COLOR OF DECISION (not decoration) — CTA, price, one
   headline word, key micro-accents. Yellow is a rare detail only.
   ============================================================ */

:root {
  /* ---- Brand core --------------------------------------- */
  --mocno-light:  #EFEFEF;   /* dominant page background */
  --mocno-white:  #FFFFFF;   /* cards / pricing / lists  */
  --mocno-black:  #000000;   /* pure black (logo, nav)   */

  /* RED — the decision color. #FF0801 is the working action red
     (CTA, price, hot word, key micro-accents). #FF0000 is the
     classic brand red kept for the fiery gradient + logo. */
  --mocno-red:         #FF0801;  /* @kind color */  /* ACTION / decision */
  --mocno-red-classic: #FF0000;  /* @kind color */  /* brand / gradient  */
  --mocno-yellow:      #FED70F;  /* @kind color */  /* rare micro-accent */

  /* ---- Fiery gradient (logo / hero crown — max 3%) ------- */
  --mocno-fire-1: #FF0000;
  --mocno-fire-2: #FF7A00;
  --mocno-fire-3: #FFAA00;
  --mocno-fire-4: #FED70F;
  --mocno-gradient:   linear-gradient(135deg, #FF0000 0%, #FF7A00 40%, #FFAA00 70%, #FED70F 100%); /* @kind color */
  --mocno-gradient-h: linear-gradient(90deg,  #FF0000 0%, #FF7A00 45%, #FFAA00 72%, #FED70F 100%); /* @kind color */

  /* ---- Neutral ramp ------------------------------------- */
  --ink-900: #000000;       /* headings (max contrast)        */
  --ink-800: #111111;       /* MAIN body text                 */
  --ink-700: #333333;       /* strong secondary               */
  --ink-600: #555555;       /* helper / secondary text        */
  --ink-650: #666666;       /* softer meta / fine-print copy   */
  --ink-500: #777777;       /* muted captions                 */
  --ink-400: #999999;       /* faint placeholders             */
  --line-300: #CFCFCF;      /* strong divider                 */
  --line-200: #D9D9D9;      /* DEFAULT line / card border     */
  --line-100: #E5E5E5;      /* faint hairline                 */
  --fill-100: #F5F5F5;      /* sunken well on white           */

  /* ---- Dark surfaces (softer than pure black) ----------- */
  --ink-dark:      #111111;  /* strong dark section            */
  --ink-dark-soft: #151515;  /* softer dark section            */

  /* ---- Semantic aliases --------------------------------- */
  --bg:            var(--mocno-light);
  --surface:       var(--mocno-white);
  --surface-dark:  var(--ink-dark);       /* #111 — was pure black */
  --surface-dark-soft: var(--ink-dark-soft);
  --surface-well:  var(--fill-100);

  --text-heading:  var(--ink-800);        /* #111 — main heading ink */
  --text-body:     var(--ink-800);        /* #111 */
  --text-secondary:var(--ink-600);        /* #555 helper */
  --text-meta:     var(--ink-650);        /* #666 delicate meta copy */
  --text-muted:    var(--ink-500);        /* #777 */
  --text-faint:    var(--ink-400);        /* #999 */
  --text-on-dark:  var(--mocno-white);
  --text-on-dark-muted: rgba(255,255,255,0.66);

  --accent:        var(--mocno-red);      /* #FF0801 — decision */
  --accent-energy: var(--mocno-yellow);   /* #FED70F — rare detail */

  --border:        var(--line-200);       /* #D9D9D9 */
  --border-strong: var(--ink-900);
  --divider:       var(--line-300);

  /* CTA — strong red, the only "click me" color */
  --cta-bg:        var(--mocno-red);      /* #FF0801 */
  --cta-text:      var(--mocno-white);
  --cta-bg-hover:  #E00600;
  --cta-bg-active: #C20500;

  --focus-ring:    var(--mocno-red);
}