/* ================================================================
   JMA Portal — one palette for the whole tool.

   The redesigned pages (Pricing, Quotes, the home board) introduced a
   cool graphite palette with an orange accent. This file is the single
   place those values live, so a page never has to restate them and the
   whole portal can be re-themed from one edit.

   Three vocabularies are defined, all pointing at the same colours:

     --pt-*     canonical. Change a value HERE and everything follows.
     portal     the names the older pages already use — --bg, --card,
                --sidebar, --muted, --dim, --glow, --accent2 …
     design     the names the redesigned pages use — --bg-1..4, --fg-1..5,
                --line, --line-2, --accent-quiet …

   A page therefore inherits the new look without renaming a single
   declaration; it only has to stop redefining these itself.
   ================================================================ */

:root {
  /* ── canonical ──────────────────────────────────────────────── */
  --pt-bg:           #0c0d10;   /* the page behind everything      */
  --pt-surface:      #111317;   /* cards, bars, panels             */
  --pt-surface-2:    #1c1f26;   /* raised surface, inputs          */
  --pt-surface-3:    #23262e;   /* hover / pressed                 */
  --pt-surface-4:    #2a2e38;

  --pt-line:         #23262e;   /* hairlines                       */
  --pt-line-2:       #2a2e38;
  --pt-line-3:       #353944;

  --pt-fg:           #e8e9ec;   /* primary ink                     */
  --pt-fg-2:         #b9bdc6;
  --pt-fg-3:         #9097a3;   /* secondary ink                   */
  --pt-fg-4:         #5a606e;   /* muted ink                       */
  --pt-fg-5:         #3e424c;   /* faintest ink                    */

  --pt-accent:       #ff7a3d;
  --pt-accent-hover: #ff8b54;
  --pt-accent-warm:  #ffa53d;   /* the second accent, for gradients */
  --pt-accent-quiet: rgba(255,122,61,0.12);
  --pt-accent-line:  rgba(255,122,61,0.35);
  --pt-on-accent:    #0c0d10;   /* ink ON an accent fill            */

  --pt-green:        oklch(0.74 0.13 150);
  --pt-green-quiet:  oklch(0.74 0.13 150 / .16);
  --pt-amber:        oklch(0.80 0.14 78);
  --pt-amber-quiet:  oklch(0.80 0.14 78 / .16);
  --pt-red:          oklch(0.66 0.21 25);
  --pt-red-quiet:    oklch(0.66 0.21 25 / .16);
  --pt-violet:       oklch(0.68 0.16 290);

  --pt-radius:       8px;
  --pt-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pt-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── the vocabulary the older pages use ─────────────────────── */
  --bg:          var(--pt-bg);
  --panel:       var(--pt-surface);
  --panel-2:     var(--pt-surface-2);
  --panel-3:     var(--pt-surface-3);
  --card:        var(--pt-surface);
  --card-hover:  var(--pt-surface-3);
  --sidebar:     var(--pt-surface);
  --sidebar-w:   230px;
  --border:      var(--pt-line);
  --border-2:    var(--pt-line-2);
  --text:        var(--pt-fg);
  --muted:       var(--pt-fg-3);
  --faint:       var(--pt-fg-4);
  --dim:         var(--pt-fg-4);
  --accent:      var(--pt-accent);
  --accent-hover:var(--pt-accent-hover);
  --accent2:     var(--pt-accent-warm);
  --accent-dim:  var(--pt-accent-quiet);
  --accent-line: var(--pt-accent-line);
  --on-accent:   var(--pt-on-accent);
  --glow:        var(--pt-accent-quiet);
  --green:       var(--pt-green);
  --green-dim:   var(--pt-green-quiet);
  --amber:       var(--pt-amber);
  --amber-dim:   var(--pt-amber-quiet);
  --red:         var(--pt-red);
  --red-dim:     var(--pt-red-quiet);
  --violet:      var(--pt-violet);
  --radius:      var(--pt-radius);
  --mono:        var(--pt-mono);
  --sans:        var(--pt-sans);

  /* ── the vocabulary the redesigned pages use ────────────────── */
  --bg-1:          var(--pt-surface);
  --bg-2:          var(--pt-surface-2);
  --bg-3:          var(--pt-surface-3);
  --bg-4:          var(--pt-surface-4);
  --line:          var(--pt-line);
  --line-2:        var(--pt-line-2);
  --line-3:        var(--pt-line-3);
  --fg:            var(--pt-fg);
  --fg-2:          var(--pt-fg-2);
  --fg-3:          var(--pt-fg-3);
  --fg-4:          var(--pt-fg-4);
  --fg-5:          var(--pt-fg-5);
  --accent-quiet:  var(--pt-accent-quiet);
  --accent-strong: rgba(255,122,61,0.85);
  --font-sans:     var(--pt-sans);
  --font-mono:     var(--pt-mono);
}

/* Scrollbars, so a themed page does not end in a warm grey gutter. */
* { scrollbar-color: var(--pt-line-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--pt-line-3); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--pt-fg-5); }

/* A form control keeps the browser's own dark chrome rather than a white flash. */
:root { color-scheme: dark; }