/* ============================================================
   Cyberfy — Color tokens
   Bold primary system drawn from the logo: cobalt / yellow / red,
   deep-navy ink, white canvas. Color blocks span bold primaries
   plus their pale tints for breathing room.
   ============================================================ */

:root {
  /* --- Brand & accent --- */
  --color-primary: #003390;        /* cobalt: every primary CTA + selected state */
  --color-on-primary: #ffffff;     /* text on cobalt / dark surfaces */
  --color-accent-promo: #e80225;   /* brand red — single promo CTA per page */

  /* --- Brand logo colors (the Cyberfy "C" particle mark) --- */
  --color-brand-yellow: #fec402;
  --color-brand-blue:   #003390;
  --color-brand-red:    #e80225;
  --color-brand-navy:   #050e3a;   /* the wordmark ink */

  /* --- Surface --- */
  --color-canvas: #ffffff;         /* default page bg + white card body */
  --color-inverse-canvas: #050e3a; /* footer-dark, dark sections */
  --color-surface-soft: #eef1f8;   /* cool off-white tile: icon buttons, template tiles */
  --color-hairline: #dbe0ee;       /* 1px borders: inputs, pricing cards, dividers */
  --color-hairline-soft: #e8ebf5;  /* subtler dividers: table rows, footer rules */

  /* --- Color blocks (signature) — bold primaries + pale tints --- */
  --color-block-yellow: #fec402;   /* signature systems / FAQ / contact ground */
  --color-block-blue:   #003390;   /* cobalt story block (white ink) */
  --color-block-red:    #e80225;   /* red story block (white ink) */
  --color-block-navy:   #050e3a;   /* deepest dark block (white ink) */
  --color-block-sand:   #fff1c9;   /* pale yellow — soft ground */
  --color-block-sky:    #d9e4ff;   /* pale cobalt — soft ground */
  --color-block-blush:  #ffdce0;   /* pale red — soft ground */

  /* --- Text --- */
  --color-ink: #0b1437;            /* all headline/body/caption on light surfaces */
  --color-inverse-ink: #ffffff;    /* type on cobalt / red / navy blocks + footer-dark */
  --color-on-inverse-soft: #ffffff;/* base for ~16% translucent icon buttons on dark */

  /* --- Semantic --- */
  --color-success: #1fa463;        /* comparison checkmark glyph fill */
  --color-overlay-scrim: #000000;  /* base for ~60% modal/video scrim */

  /* --- Convenience aliases --- */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-canvas);
  --surface-tile: var(--color-surface-soft);
  --text-body: var(--color-ink);
  --border-default: var(--color-hairline);
}