/* =========================================================================
   UtilityOS — Colors & Type
   Source: UtilityOS_BrandGuidelines.pdf (2026)
   Fonts: Encode Sans Expanded (headers), Rubik (body), Madimi One (accents)
   All three load from Google Fonts via <link> tags in index.html.
   ========================================================================= */

:root {
  /* ====================================================================
     COLOR — PRIMARY PALETTE
     The six "primary" brand colors. Bold but utility-grounded — these
     reflect electricity, water, gas, and the systems built around them.
     ==================================================================== */
  --uos-blue:        #186ca1; /* Primary — flagship corporate blue   */
  --uos-green:       #9ccb40; /* Primary — energy / "go" / growth    */
  --uos-gray:        #a6a8ab; /* Primary — neutral / infrastructure  */
  --uos-yellow:      #f4b53f; /* Primary — caution / electric / gas  */
  --uos-lightblue:   #25a3d9; /* Primary — water / clarity           */
  --uos-orange:      #f26622; /* Primary — alert / heat / energy     */

  /* ====================================================================
     COLOR — SECONDARY (60% tints)
     Use for softer surfaces, hover states, secondary buttons.
     ==================================================================== */
  --uos-blue-60:      #5c97ba;
  --uos-green-60:     #c9e19b;
  --uos-gray-60:      #b5b8ba;
  --uos-yellow-60:    #f8d28c; /* Spec'd tint; reads as warm cream    */
  --uos-lightblue-60: #50b3df;
  --uos-orange-60:    #f9a575;

  /* ====================================================================
     COLOR — TERTIARY (30% tints)
     Use for backgrounds, large fills, soft tags, empty states.
     ==================================================================== */
  --uos-blue-30:      #9abdd3;
  --uos-green-30:     #e8f2d6;
  --uos-gray-30:      #d1d3d4;
  --uos-yellow-30:    #fce8c5;
  --uos-lightblue-30: #9fd5ef;
  --uos-orange-30:    #fdd0b3;

  /* ====================================================================
     COLOR — NEUTRAL SCALE
     Greyscale ladder. Derived from --uos-gray, tuned for UI surfaces.
     ==================================================================== */
  --uos-ink:         #131517; /* Headlines, body on light             */
  --uos-ink-2:       #2a2d31; /* Secondary text                       */
  --uos-ink-3:       #545861; /* Tertiary, captions                   */
  --uos-mute:        #8a8d92; /* Disabled / placeholder               */
  --uos-line:        #dcdee0; /* Default border, divider              */
  --uos-line-soft:   #ebecee; /* Subtle dividers, table rows          */
  --uos-surface:     #f5f6f7; /* App canvas                           */
  --uos-surface-2:   #fafafb; /* Card / panel                         */
  --uos-paper:       #ffffff; /* Pure white                           */

  /* ====================================================================
     COLOR — SEMANTIC TOKENS
     Map components to roles, not raw hex. Always prefer these in JSX.
     ==================================================================== */
  --color-fg:           var(--uos-ink);
  --color-fg-muted:     var(--uos-ink-3);
  --color-fg-subtle:    var(--uos-mute);
  --color-fg-on-dark:   #ffffff;
  --color-fg-on-brand:  #ffffff;

  --color-bg:           var(--uos-paper);
  --color-bg-app:       var(--uos-surface);
  --color-bg-card:      var(--uos-paper);
  --color-bg-inverse:   var(--uos-ink);

  --color-border:       var(--uos-line);
  --color-border-soft:  var(--uos-line-soft);
  --color-divider:      var(--uos-line);

  --color-accent:       var(--uos-blue);
  --color-accent-hover: #135887;
  --color-accent-soft:  var(--uos-blue-30);

  --color-success:      var(--uos-green);
  --color-success-soft: var(--uos-green-30);
  --color-info:         var(--uos-lightblue);
  --color-info-soft:    var(--uos-lightblue-30);
  --color-warning:      var(--uos-yellow);
  --color-warning-soft: var(--uos-yellow-30);
  --color-danger:       var(--uos-orange);
  --color-danger-soft:  var(--uos-orange-30);

  /* Brand gradient — used in the icon mark itself (blue #13578c → light blue #25a3d9).
     Use sparingly: hero blocks, the brand icon, occasional accent moments. */
  --gradient-brand: linear-gradient(90deg, #13578c 0%, #25a3d9 100%);
  --gradient-brand-vertical: linear-gradient(180deg, #13578c 0%, #25a3d9 100%);

  /* ====================================================================
     TYPE — FAMILIES
     ==================================================================== */
  --font-display: 'Encode Sans Expanded', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Rubik', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-accent:  'Madimi One', 'Encode Sans Expanded', system-ui, sans-serif; /* CTAs, callouts only */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ====================================================================
     TYPE — SCALE
     Display / Header uses Encode Sans Expanded Regular per brand guidelines.
     Body uses Rubik Regular. Madimi reserved for callouts.
     ==================================================================== */
  --fs-display:   56px; /* Cover, hero headlines                       */
  --fs-h1:        40px; /* Page title                                  */
  --fs-h2:        28px; /* Section title                               */
  --fs-h3:        22px; /* Subsection                                  */
  --fs-h4:        18px; /* Card title, eyebrow heading                 */
  --fs-body:      16px; /* Body                                        */
  --fs-body-sm:   14px; /* Secondary body, table cells                 */
  --fs-caption:   13px; /* Captions, labels                            */
  --fs-micro:     11px; /* Eyebrow, ALL CAPS micro labels              */

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  /* ====================================================================
     SHAPE / SPACING / ELEVATION
     ==================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Calm, "not flashy" elevation — utilities feel sturdy, not floaty. */
  --shadow-sm: 0 1px 2px rgba(19,21,23,0.06), 0 1px 1px rgba(19,21,23,0.04);
  --shadow-md: 0 4px 12px rgba(19,21,23,0.07), 0 1px 2px rgba(19,21,23,0.04);
  --shadow-lg: 0 12px 28px rgba(19,21,23,0.10), 0 4px 8px rgba(19,21,23,0.05);
  --shadow-ring: 0 0 0 3px rgba(24,108,161,0.18); /* focus ring (blue) */

  /* Motion — calm, not flashy. Use cubic-bezier(.2,.6,.2,1) for most UI. */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Drop these into any prototype as a baseline. Components can override.
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* Brand says: Encode Sans Expanded REGULAR for primary/secondary headers */
  color: var(--color-fg);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); font-weight: 500; }

p { margin: 0 0 var(--space-4); }
small { font-size: var(--fs-caption); color: var(--color-fg-muted); }
strong, b { font-weight: 600; }

a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-accent-hover); border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--shadow-ring); border-radius: var(--radius-xs); }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--uos-surface); padding: 1px 6px; border-radius: var(--radius-xs); }

/* =========================================================================
   CHART TOKENS — rate periods (this site)
   Cool = cheap, warm = expensive. Validated for CVD separation and
   lightness band on white (dataviz six checks). --chart-midpeak is a
   darkened step of --uos-yellow: the brand base failed protan separation
   vs green and the categorical lightness band, so the hue was kept and
   the lightness tuned. Soft fills use the brand 30% tints.
   ========================================================================= */
:root {
  --chart-ultralow:      var(--uos-blue);      /* ultra-low overnight */
  --chart-ultralow-soft: var(--uos-blue-30);
  --chart-offpeak:       var(--uos-lightblue); /* off-peak            */
  --chart-offpeak-soft:  var(--uos-lightblue-30);
  --chart-midpeak:       #e5a02a;              /* mid-peak            */
  --chart-midpeak-soft:  var(--uos-yellow-30);
  --chart-onpeak:        var(--uos-orange);    /* on-peak             */
  --chart-onpeak-soft:   var(--uos-orange-30);
  /* Tiers are a sequential pair (usage volume, light → dark), on the brand
     green hue so the tiered card accent stays legible against the blue hero.
     Darkened from --uos-green to sit in the categorical lightness band. */
  --chart-tier1:         #6f9a26;
  --chart-tier2:         #3d5f12;
}

/* Eyebrow / micro label — ubiquitous on dashboards */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Accent — Madimi for callouts only. Sparingly! */
.accent {
  font-family: var(--font-accent);
  font-weight: 400;
}