/* ============================================================================
 * theme.css — single source of truth for OSS colour.
 *
 * Loaded BEFORE style.css and before every screen-level stylesheet, so any
 * rule anywhere can reference these tokens.
 *
 * Two tiers:
 *   1. RAMPS      raw palette values. The only place a hex literal belongs.
 *   2. ROLES      what a colour is *for*. Stylesheets reference these, never
 *                 the ramps and never a literal.
 *
 * To retheme the product, edit the ramps and re-point a handful of roles in
 * this file. Nothing else should need to change.
 *
 * Values below reproduce the palette as shipped, with three corrections noted
 * inline (accent unification, primary-button hover, focus ring).
 * ========================================================================== */

:root {

  /* --- brand ramp --------------------------------------------------------
   * The product previously carried five near-identical oranges (#F60,
   * #F15922, #F25824, #E6782E, #ED7D31) plus the CSS keyword `orange`.
   * They are collapsed here into four deliberate stops.                    */

  --brand:           #FF6600;   /* chrome: header strip                     */
  --brand-accent:    #F15922;   /* primary action, active state             */
  --brand-strong:    #D04A1C;   /* pressed / hover of primary action        */
  --brand-mid:       #E6782E;   /* secondary accent: tab rules, inline text */

  --brand-line:      #FFAD66;   /* warm hairline (report grids)             */
  --brand-fill:      #FFC999;   /* warm fill (report highlight)             */
  --brand-soft:      #FFF3E8;   /* tinted panel / selected row              */
  --brand-soft-2:    #F8D7CD;   /* tinted stripe                            */

  /* --- neutral ramp ------------------------------------------------------
   * Four grey literals (#DBDBDB, #D7D7D7, #E0E0E0, #EEE) did the same job
   * at imperceptibly different values. Collapsed to two hairline stops.   */

  --white:           #FFFFFF;
  --canvas:          #F9F9F9;
  --surface-2:       #F5F5F5;
  --line:            #DBDBDB;
  --line-soft:       #EEEEEE;
  --line-strong:     #BFBFBF;

  --ink:             #000000;
  --ink-2:           #333333;
  --ink-alt:         #375466;   /* slate ink used across the ng_* screens   */
  --ink-muted:       #666666;
  --ink-faint:       #888888;

  /* --- support ----------------------------------------------------------- */

  --blue:            #2F528F;   /* form chrome on submit-job / custom-report */
  --ok:              #28A745;
  --warn:            #FFC107;
  --danger:          #DC3545;
  --info:            #17A2B8;
  --print:           #A6734C;


  /* =========================================================================
   * ROLES — reference these from stylesheets.
   * ====================================================================== */

  /* chrome */
  --color-chrome:        var(--brand);
  --color-chrome-ink:    var(--white);
  --color-nav-panel:     var(--ink);        /* mobile slicknav drawer       */
  --color-nav-panel-ink: var(--white);
  --color-footer:        var(--ink);
  --color-footer-ink:    var(--white);

  /* action + emphasis */
  --color-accent:        var(--brand-accent);
  --color-accent-ink:    var(--white);
  --color-accent-alt:    var(--brand-mid);
  --color-accent-soft:   var(--brand-soft);
  --color-accent-stripe: var(--brand-soft-2);
  --color-accent-line:   var(--brand-line);
  --color-accent-fill:   var(--brand-fill);
  --color-nav-active:    var(--brand);
  --color-link:          var(--brand);
  --color-blue:          var(--blue);

  /* CORRECTION: primary buttons hovered to #DC3545 — the destructive red —
   * so Save turned into Delete's colour on hover. Now darkens in-hue.     */
  --color-accent-hover:  var(--brand-strong);

  /* CORRECTION: the focus ring was rgba(38,143,255,.5), a Bootstrap blue
   * glow around an orange button. Now tinted to the accent.              */
  --color-focus-ring:    rgba(241, 89, 34, .35);

  /* surfaces */
  --color-canvas:        var(--canvas);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--surface-2);
  --color-surface-sunken: var(--line-soft);

  /* text */
  --color-text:          var(--ink);
  --color-text-2:        var(--ink-2);
  --color-text-alt:      var(--ink-alt);
  --color-muted:         var(--ink-muted);
  --color-faint:         var(--ink-faint);
  --color-on-accent:     var(--white);

  /* structure */
  --color-line:          var(--line);
  --color-line-soft:     var(--line-soft);
  --color-line-strong:   var(--line-strong);
  --radius:              .25rem;

  /* status — semantic, deliberately independent of the accent hue */
  --color-ok:            var(--ok);
  --color-warn:          var(--warn);
  --color-danger:        var(--danger);
  --color-info:          var(--info);
  --color-export:        var(--ok);         /* Excel icons                  */
  --color-print:         var(--print);
}