/* ============================================================
   EnergyX Brand Studio, APP UI dark theme
   Drop-in override layer for the application chrome (wizard,
   dashboard, settings, pickers). Load AFTER tokens.css.

   Scope note: this changes the APP interface only. Generated
   marketing decks, pages, and social assets stay on the pure
   black brand system in tokens.css. Preserving that brand is
   principle 5 of the reference article. The app is a tool and
   needs to be readable, so it gets the softened dark-UI system
   below while keeping EnergyX teal, Oswald, and Inter.

   Every value here is derived from the 9 dark-UI principles.
   Contrast pairs verified at WCAG AA or better.
   No em dashes, no divider lines, per project convention.
   ============================================================ */

:root {

  /* --- Elevation ladder (principles 1, 6, 7) -----------------
     Depth is communicated by LIGHTER surfaces as you rise, not
     by drop shadows. Base is a near-black grey, never #000000. */
  --app-elev-0: #101214;   /* canvas / page background         */
  --app-elev-1: #16181B;   /* app bar, side rail, sunken wells  */
  --app-elev-2: #1C1F22;   /* cards, wizard panels, modules     */
  --app-elev-3: #24282C;   /* hover, selected card, popover     */
  --app-elev-4: #2B3035;   /* menus, modals, sheets             */

  /* Hairlines and separators (spacing over lines where we can) */
  --app-border:      #33383D;   /* default 1px hairline         */
  --app-border-soft: #24282C;   /* barely-there divide          */
  --app-border-strong:#3D444B;  /* input outline, emphasis      */

  /* --- Text (principle 2, never pure white, opacity ramp) ---- */
  --app-text:      #F2F4F5;              /* primary, softened white */
  --app-text-2:    rgba(255,255,255,.72);/* secondary  ~#B6BBBF     */
  --app-text-3:    rgba(255,255,255,.52);/* tertiary   ~#8A9096     */
  --app-text-dis:  rgba(255,255,255,.34);/* disabled                */
  --app-text-onlt: #14171A;              /* text on light surfaces  */

  /* --- Accent (principles 4, 5, keep brand, desaturate fills) */
  --app-accent:      #479EA4;   /* brand teal, primary action    */
  --app-accent-text: #5FB4BA;   /* links / accent text, AA on card*/
  --app-accent-dim:  #2F6E72;   /* focus ring, quiet accent      */
  --app-accent-tint: rgba(71,158,164,.10); /* selected card wash */

  /* --- Semantic (principle 4, desaturated, no neon) ----------
     The single brand accent cannot signal state. These do. */
  --app-success: #3DBE8B;
  --app-warning: #E0A83D;
  --app-error:   #E4746B;
  --app-info:    #5FB4BA;
  --app-success-bg: rgba(61,190,139,.12);
  --app-warning-bg: rgba(224,168,61,.12);
  --app-error-bg:   rgba(228,116,107,.12);

  /* --- Gradients (depth without shadows, brand moment) -------
     Used sparingly: a living canvas, a top-light on raised
     surfaces (fakes elevation per principle 6), and ONE gradient
     on the single primary CTA. Never large flat teal fills. */
  --app-canvas-grad:
    radial-gradient(120% 80% at 50% -10%, #171B1F 0%, #101214 60%);
  --app-surface-top-light:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 40%);
  --app-cta-grad:
    linear-gradient(180deg, #58AEB4 0%, #479EA4 55%, #3C8A90 100%);
  --app-accent-line:
    linear-gradient(90deg, #479EA4, #29ABE2);

  /* --- Elevation cue: top highlight, not a dark shadow -------- */
  --app-raise-1: inset 0 1px 0 rgba(255,255,255,.05);
  --app-raise-2: inset 0 1px 0 rgba(255,255,255,.07),
                 0 8px 24px rgba(0,0,0,.35);   /* subtle, never darker than bg misuse */

  /* --- Focus (principle 7, accessibility) -------------------- */
  --app-focus: 0 0 0 2px var(--app-elev-0), 0 0 0 4px var(--app-accent);
}

/* ---- Base wiring: point the app shell at the new tokens ----- */
.app,
body.app {
  background: var(--app-canvas-grad) fixed, var(--app-elev-0);
  color: var(--app-text);
}

/* App bar / side rail sit one step up from canvas */
.app-bar, .app-rail {
  background: var(--app-elev-1);
  border-color: var(--app-border);
  color: var(--app-text);
}

/* Cards and wizard panels: elevation 2 + top-light, no drop shadow */
.app-card, .app-panel, .wiz-card {
  background: var(--app-elev-2);
  background-image: var(--app-surface-top-light);
  border: 1px solid var(--app-border-soft);
  border-radius: var(--ex-radius-lg, 12px);
  box-shadow: var(--app-raise-1);
  color: var(--app-text);
}

/* Hover / focus a card: rise to elevation 3, tie to brand */
.app-card:hover, .wiz-card:hover {
  background: var(--app-elev-3);
  border-color: var(--app-accent-dim);
}

/* Selected: brand tint wash + accent border (not a teal fill) */
.wiz-card[aria-pressed="true"], .app-card.is-selected {
  background: var(--app-elev-3);
  background-image: var(--app-accent-tint), var(--app-surface-top-light);
  border-color: var(--app-accent);
}

/* Text ramp helpers */
.app-text-2 { color: var(--app-text-2); }
.app-text-3 { color: var(--app-text-3); }

/* Inputs sit in a sunken well, clear outline for accessibility */
.app-input, .app-select, .app-textarea {
  background: var(--app-elev-1);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  border-radius: var(--ex-radius, 6px);
}
.app-input::placeholder { color: var(--app-text-3); }
.app-input:focus, .app-select:focus, .app-textarea:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: var(--app-focus);
}

/* Primary action: the one place a gradient fill is allowed */
.app-btn-primary {
  background: var(--app-cta-grad);
  color: #06181A;
  border: none;
  border-radius: var(--ex-radius, 6px);
  font-family: var(--ex-font-display, Oswald), sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: var(--app-raise-1);
}
.app-btn-primary:hover { filter: brightness(1.06); }

/* Secondary action: quiet, outline only */
.app-btn-ghost {
  background: transparent;
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--ex-radius, 6px);
}
.app-btn-ghost:hover { border-color: var(--app-accent); color: var(--app-accent-text); }

/* Links use the brighter accent for AA on dark surfaces */
.app-link { color: var(--app-accent-text); text-decoration: none; }
.app-link:hover { text-decoration: underline; }

/* Accent line replaces horizontal divider rules (no divider lines) */
.app-accent-line { height: 2px; background: var(--app-accent-line); border: 0; }

/* Semantic inline messages, recoverable and specific */
.app-note-success { color: var(--app-success); background: var(--app-success-bg); }
.app-note-warning { color: var(--app-warning); background: var(--app-warning-bg); }
.app-note-error   { color: var(--app-error);   background: var(--app-error-bg); }

/* Images blend into the theme (principle 8) */
.app-thumb { border: 1px solid var(--app-border-soft); border-radius: var(--ex-radius, 6px); }
.app-thumb img { display: block; filter: saturate(.96) brightness(.98); }

/* Progress track, filled portion is the accent line */
.app-progress { background: var(--app-elev-1); border-radius: 999px; overflow: hidden; }
.app-progress > span { background: var(--app-accent-line); display: block; height: 100%; }

/* Theme toggle target (principle 9). Set data-theme="light" on
   .app to flip the app shell. Deliverables are unaffected. */
.app[data-theme="light"] {
  --app-elev-0:#F4F5F6; --app-elev-1:#FFFFFF; --app-elev-2:#FFFFFF;
  --app-elev-3:#EFF1F2; --app-elev-4:#FFFFFF;
  --app-border:#DADEE1; --app-border-soft:#E7EAEC; --app-border-strong:#C6CCD0;
  --app-text:#14171A; --app-text-2:rgba(20,23,26,.72); --app-text-3:rgba(20,23,26,.54);
  --app-accent-text:#2F6E72;
  --app-canvas-grad:none; --app-surface-top-light:none;
}