/* ============================================================
   Optima Digital — Color tokens
   Sampled from the official full-color logo + brand collateral.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --od-blue:        #1272c4;  /* Optima azure — primary, sampled from ring */
  --od-blue-600:    #0f63ab;
  --od-blue-700:    #0d5490;
  --od-indigo:      #2a2e7a;  /* ring's deep segment */
  --od-navy:        #1b2150;  /* darkest brand — headings on light, dark surfaces */
  --od-navy-900:    #12163a;

  --od-gold:        #fdc134;  /* the arrow — accent / highlight */
  --od-gold-600:    #eaa916;

  --od-green:       #2ba24b;  /* growth / positive results */
  --od-green-700:   #0b6b3a;  /* deep green (arrow gradient base) */
  --od-red:         #e23b2e;  /* alert / negative delta */
  --od-red-700:     #b32419;

  /* ---- Neutrals (cool-leaning grays) ---- */
  --od-white:       #ffffff;
  --od-gray-50:     #f6f8fb;
  --od-gray-100:    #eef2f7;
  --od-gray-200:    #dde4ee;
  --od-gray-300:    #c4cddb;
  --od-gray-400:    #9aa6b8;
  --od-gray-500:    #6c7688;
  --od-gray-600:    #4d5768;
  --od-gray-700:    #363f4e;
  --od-gray-800:    #232b38;
  --od-gray-900:    #141a24;

  /* ---- Brand gradients (logo ring / arrow) ---- */
  --od-grad-ring:   linear-gradient(135deg, #1272c4 0%, #2596d6 35%, #2a2e7a 100%); /* @kind color */
  --od-grad-arrow:  linear-gradient(135deg, #ffd23e 0%, #fdb930 100%); /* @kind color */
  --od-grad-green:  linear-gradient(135deg, #33b455 0%, #0b6b3a 100%); /* @kind color */
  --od-grad-hero:   linear-gradient(150deg, #1b2150 0%, #2a2e7a 55%, #1272c4 100%); /* @kind color */

  /* ============ Semantic aliases ============ */
  --text-strong:     var(--od-navy);
  --text-body:       var(--od-gray-700);
  --text-muted:      var(--od-gray-500);
  --text-on-dark:    var(--od-white);
  --text-on-dark-muted: #b7c0d6;
  --text-on-dark-subtle: #8b96b5;
  --text-link:       var(--od-blue);
  --text-link-hover: var(--od-blue-700);

  --surface-page:    var(--od-white);
  --surface-subtle:  var(--od-gray-50);
  --surface-card:    var(--od-white);
  --surface-dark:    var(--od-navy);
  --surface-dark-2:  var(--od-navy-900);
  --surface-inverse-card: var(--od-indigo);

  --border-subtle:   var(--od-gray-200);
  --border-default:  var(--od-gray-300);
  --border-strong:   var(--od-gray-400);

  /* ============ White-label functional roles ============
     The complete set of color decisions a white-label partner must supply.
     Every screen, chart, badge and delta resolves through these. To re-skin,
     override the role (or the --od-* primitive it points to) — keep the name. */

  /* Brand */
  --role-primary:         var(--od-blue);        /* primary actions, links, active nav, series 1 */
  --role-primary-strong:  var(--od-blue-700);    /* hover / pressed on primary */
  --role-accent:          var(--od-gold);        /* highlight, emphasis, callouts */

  /* Status */
  --role-success:         var(--od-green);        /* positive delta, healthy, pass, grade B */
  --role-success-strong:  var(--od-green-700);    /* strongest positive — rank 1–3, grade A */
  --role-warning:         var(--od-gold-600);     /* caution / needs attention, grade C */
  --role-danger:          var(--od-red);          /* negative delta, error, fail, grade D */
  --role-danger-strong:   var(--od-red-700);      /* most severe — grade F */
  --role-info:            var(--od-blue);         /* neutral informational */
  --role-neutral:         var(--od-gray-400);     /* untracked / N/A / "direct" */

  /* Aliases → roles (kept for existing usage) */
  --accent-primary:  var(--role-primary);
  --accent-highlight:var(--role-accent);

  --positive:        var(--role-success);
  --positive-strong: var(--role-success-strong);
  --negative:        var(--role-danger);
  --warning:         var(--role-warning);

  --focus-ring:      color-mix(in srgb, var(--od-blue) 45%, transparent);

  /* ---- Categorical series order (charts, legends) — brand hues only ---- */
  --data-1: var(--od-blue);
  --data-2: var(--od-gold);
  --data-3: var(--od-green);
  --data-4: var(--od-indigo);
  --data-5: var(--od-red);
  --data-6: var(--od-navy);
}