// Design tokens + global resets for the HiKit hi-fi client app.
// Clean SaaS aesthetic: warm paper, deep ink, rust accent, Geist type stack.
// All consumers read from CSS variables so a theme tweak rewires the whole app.

if (typeof document !== 'undefined' && !document.getElementById('hk-tokens')) {
  const s = document.createElement('style');
  s.id = 'hk-tokens';
  s.textContent = `
    /* ──────────────────────────────────────────────────────────
       HiKit Studio palette (per hikit.studio brand)
         Accent:    vivid mint-teal #14CFC0
         Ink dark:  deep navy-charcoal #0B121A
         Paper:     near-white off-cream
       Dark mode is the brand's primary experience (matches the
       site's hero). Light mode is the productivity-friendly alt.
       ────────────────────────────────────────────────────────── */
    :root, [data-theme="light"] {
      --paper:        #FAFAF8;
      --paper-2:      #F0F0EC;
      --surface:      #FFFFFF;
      --surface-2:    #F8F8F4;
      --surface-3:    #EFEEEA;

      --ink:          #0B121A;
      --ink-2:        #3A4250;
      --ink-3:        #7A828F;
      --ink-4:        #B6BCC5;

      --border:        rgba(11, 18, 26, 0.08);
      --border-strong: rgba(11, 18, 26, 0.16);
      --border-input:  rgba(11, 18, 26, 0.18);

      --accent:       #0FBDB0;
      --accent-hover: #0BA499;
      --accent-soft:  rgba(15, 189, 176, 0.14);
      --accent-deep:  #086960;
      --accent-ink:   #FFFFFF;          /* text on teal buttons */

      --ok:           #15A056;
      --ok-soft:      rgba(21, 160, 86, 0.14);
      --warn:         #C68A1A;
      --warn-soft:    rgba(198, 138, 26, 0.14);
      --bad:          #C03B30;
      --bad-soft:     rgba(192, 59, 48, 0.14);
      --info:         #2462C8;
      --info-soft:    rgba(36, 98, 200, 0.14);

      --shadow-1: 0 1px 2px rgba(11, 18, 26, 0.04), 0 1px 1px rgba(11, 18, 26, 0.03);
      --shadow-2: 0 4px 16px rgba(11, 18, 26, 0.06), 0 1px 2px rgba(11, 18, 26, 0.04);
      --shadow-3: 0 12px 40px rgba(11, 18, 26, 0.10), 0 2px 6px rgba(11, 18, 26, 0.05);
      --shadow-pop: 0 24px 64px rgba(11, 18, 26, 0.18), 0 4px 16px rgba(11, 18, 26, 0.08);

      /* ── type ──────────────────────────────────────────────── */
      --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
      --font-display: "Bai Jamjuree", "Inter", system-ui, sans-serif;
      --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
      --font-serif:   "Bai Jamjuree", Georgia, serif;   /* unused but aliased so existing refs degrade */

      /* ── radii ─────────────────────────────────────────────── */
      --r-1: 4px;
      --r-2: 6px;
      --r-3: 8px;
      --r-4: 12px;
      --r-5: 16px;
      --r-pill: 999px;

      /* ── layout ────────────────────────────────────────────── */
      --sidebar-w: 248px;
      --topbar-h:  56px;
      --content-max: 1320px;
    }

    [data-theme="dark"] {
      --paper:        #0A0F16;
      --paper-2:      #0E141C;
      --surface:      #121922;
      --surface-2:    #161E28;
      --surface-3:    #1C2531;

      --ink:          #F1F3F4;
      --ink-2:        #C8CCD2;
      --ink-3:        #8893A0;
      --ink-4:        #55606C;

      --border:        rgba(241, 243, 244, 0.08);
      --border-strong: rgba(241, 243, 244, 0.18);
      --border-input:  rgba(241, 243, 244, 0.22);

      --accent:       #14CFC0;
      --accent-hover: #1FE5D5;
      --accent-soft:  rgba(20, 207, 192, 0.16);
      --accent-deep:  #6FE3D7;
      --accent-ink:   #0A0F16;

      --ok:           #5AD188;
      --ok-soft:      rgba(90, 209, 136, 0.14);
      --warn:         #E0B358;
      --warn-soft:    rgba(224, 179, 88, 0.16);
      --bad:          #E37468;
      --bad-soft:     rgba(227, 116, 104, 0.16);
      --info:         #6FA8F0;
      --info-soft:    rgba(111, 168, 240, 0.16);

      --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30);
      --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
      --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.35);
      --shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.70), 0 4px 16px rgba(0, 0, 0, 0.45);
    }

    /* aliases — some components reference these no-hyphen forms */
    :root, [data-theme="light"], [data-theme="dark"] {
      --surface2: var(--surface-2);
      --surface3: var(--surface-3);
      --paper2:   var(--paper-2);
    }

    *, *::before, *::after { box-sizing: border-box; }

    html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); color: var(--ink); transition: background-color .2s ease, color .2s ease; }
    body {
      font-family: var(--font-ui);
      font-size: 14px; line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: "cv11" on, "ss01" on;
    }

    button, input, select, textarea { font: inherit; color: inherit; }
    button { background: none; border: 0; padding: 0; cursor: pointer; }
    a { color: inherit; text-decoration: none; }

    .hk-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
    .hk-serif { font-family: var(--font-display); letter-spacing: -0.005em; font-weight: 400; }
    .hk-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
    .hk-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

    .hk-h1 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
    .hk-h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2;  letter-spacing: -0.005em; color: var(--ink); }
    .hk-h3 { font-family: var(--font-ui);      font-weight: 600; font-size: 15px; line-height: 1.3;  letter-spacing: -0.005em; color: var(--ink); }
    .hk-h4 { font-family: var(--font-ui);      font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
    .hk-body { color: var(--ink-2); }
    .hk-dim { color: var(--ink-3); }
    .hk-tiny { font-size: 12px; color: var(--ink-3); }

    .hk-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }

    /* big metric number — Bai Jamjuree light */
    .hk-bignum {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: 48px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--ink);
    }

    /* scrollbars: thin, paper-friendly */
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
    *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); border: 2px solid transparent; background-clip: padding-box; }
    *::-webkit-scrollbar-track { background: transparent; }

    /* focus ring */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

    /* tiny utility */
    .hk-row { display: flex; align-items: center; }
    .hk-col { display: flex; flex-direction: column; }
    .hk-gap-1 { gap: 4px; } .hk-gap-2 { gap: 8px; } .hk-gap-3 { gap: 12px; } .hk-gap-4 { gap: 16px; } .hk-gap-5 { gap: 20px; } .hk-gap-6 { gap: 24px; }
    .hk-grow { flex: 1 1 auto; min-width: 0; }
    .hk-nowrap { white-space: nowrap; }
    .hk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* dotted-grid bg for "spatial" sections (calculators, chat empty state) */
    .hk-dots {
      background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
      background-size: 18px 18px;
    }

    /* Service tile grid — borders that don't trail at the edge.
       3 columns assumed. */
    .hk-svc-tile {
      padding: 14px 16px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 6px;
      cursor: pointer;
      position: relative;
    }
    .hk-svc-tile:nth-child(3n) { border-right: 0; }
    .hk-svc-tile:nth-last-child(-n+3) { border-bottom: 0; }

    /* ── Data tables (client pages) ───────────────────────────
       Inline-grid tables (SEO keywords, referral invites, invoices)
       would be flattened to one ugly column by the mobile safety net
       below. Wrapping them in .hk-dscroll + tagging rows .hk-drow keeps
       the columns intact and scrolls horizontally on small screens.
       (.hk-drow carries display:grid so the row's inline style holds
       only grid-template-columns and never matches the catch-all.) */
    .hk-drow { display: grid; }
    .hk-dscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    @media (max-width: 760px) {
      .hk-dscroll > * { min-width: 600px; }
    }

    /* ── Responsive layout safety net ─────────────────────────
       Most dashboard pages use inline grid styles because this is a
       static prototype. These selectors adapt common grid shapes without
       rewriting every page component. */
    @media (max-width: 1180px) {
      .hk-page-inner > [style*="display: grid"][style*="repeat(4"],
      .hk-page-inner [style*="display: grid"][style*="repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .hk-page-inner > [style*="display: grid"][style*="repeat(3"],
      .hk-page-inner [style*="display: grid"][style*="repeat(3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .hk-page-inner > [style*="display: grid"][style*="1."][style*="fr"],
      .hk-page-inner [style*="display: grid"][style*="380px"],
      .hk-page-inner [style*="display: grid"][style*="1fr 1fr 1.4fr"],
      .hk-page-inner [style*="display: grid"][style*="1.55fr 1fr"],
      .hk-page-inner [style*="display: grid"][style*="1.6fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .hk-page-inner [style*="position: sticky"] {
        position: static !important;
      }
    }

    @media (max-width: 1024px) {
      .hk-h1 { font-size: 26px; }
      .hk-h2 { font-size: 20px; }

      .hk-page-body {
        padding: 18px 16px 96px !important;
      }

      .hk-page-inner {
        width: 100%;
      }

      .hk-section-head,
      .hk-card-head {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .hk-card-head > .hk-grow {
        flex-basis: 100%;
      }

      .hk-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 1px;
      }

      .hk-tabs::-webkit-scrollbar { display: none; }

      .hk-table {
        overflow-x: auto;
        display: block !important;
        -webkit-overflow-scrolling: touch;
      }

      .hk-table > .hk-th,
      .hk-table > .hk-tr {
        min-width: 720px;
      }

      .hk-card-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 10px;
      }
    }

    @media (max-width: 720px) {
      body { font-size: 13.5px; }

      .hk-h1 { font-size: 24px; }
      .hk-h2 { font-size: 19px; }
      .hk-bignum { font-size: 38px; }

      .hk-page-body {
        padding: 14px 12px 92px !important;
      }

      .hk-card-pad,
      .hk-card-body {
        padding: 14px;
      }

      .hk-card-head {
        padding: 14px;
      }

      .hk-card-row {
        padding: 12px 14px !important;
      }

      .hk-page-inner > [style*="display: grid"],
      .hk-page-inner [style*="display: grid"][style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .hk-page-inner > [style*="display: flex"][style*="align-items: flex-end"],
      .hk-page-inner [style*="display: flex"][style*="align-items: flex-end"] {
        align-items: flex-start !important;
        flex-direction: column !important;
      }

      .hk-page-inner > [style*="display: flex"][style*="align-items: center"],
      .hk-page-inner [style*="display: flex"][style*="align-items: center"][style*="gap"] {
        flex-wrap: wrap;
      }

      .hk-page-inner [style*="width: 260"],
      .hk-page-inner [style*="width:260"],
      .hk-page-inner [style*="width: 320"],
      .hk-page-inner [style*="width:320"] {
        width: 100% !important;
      }

      .hk-page-inner [style*="max-width: 820"],
      .hk-page-inner [style*="max-width:820"] {
        max-width: 100% !important;
      }

      .hk-page-inner [style*="padding: 20"],
      .hk-page-inner [style*="padding:20"] {
        padding: 14px !important;
      }

      .hk-btn {
        min-height: 34px;
      }

      .hk-btn:not(.hk-btn-icon) {
        white-space: normal;
        text-align: center;
      }

      .hk-pop {
        position: fixed;
        top: 60px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
      }

      .hk-table > .hk-th {
        display: none !important;
      }

      .hk-table > .hk-tr {
        min-width: 0;
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 12px;
      }
    }
  `;
  document.head.appendChild(s);
}

// JS-readable copy — reads live CSS vars so chart colors update with the
// active theme. Use T.read() inside render bodies if you need fresh values.
const T = {
  read(name) {
    if (typeof document === 'undefined') return '';
    return getComputedStyle(document.documentElement).getPropertyValue('--' + name).trim();
  },
  get ink()        { return this.read('ink'); },
  get ink2()       { return this.read('ink-2'); },
  get ink3()       { return this.read('ink-3'); },
  get ink4()       { return this.read('ink-4'); },
  get paper()      { return this.read('paper'); },
  get paper2()     { return this.read('paper-2'); },
  get surface()    { return this.read('surface'); },
  get surface2()   { return this.read('surface-2'); },
  get surface3()   { return this.read('surface-3'); },
  get border()     { return this.read('border'); },
  get borderStrong(){ return this.read('border-strong'); },
  get accent()     { return this.read('accent'); },
  get accentSoft() { return this.read('accent-soft'); },
  get accentDeep() { return this.read('accent-deep'); },
  get ok()         { return this.read('ok'); },
  get okSoft()     { return this.read('ok-soft'); },
  get warn()       { return this.read('warn'); },
  get warnSoft()   { return this.read('warn-soft'); },
  get bad()        { return this.read('bad'); },
  get badSoft()    { return this.read('bad-soft'); },
  get info()       { return this.read('info'); },
  get infoSoft()   { return this.read('info-soft'); },
  fontUi:    '"Geist", system-ui, sans-serif',
  fontMono:  '"Geist Mono", ui-monospace, monospace',
  fontSerif: '"Instrument Serif", Georgia, serif',
};

// ── Theme controller ─────────────────────────────────────────
// Reads stored preference, applies data-theme to <html>, exposes setter.
// Triggers a CustomEvent so any chart that caches colors can refresh.
const THEME_KEY = 'hk:theme';
const HKTheme = {
  get current() {
    return document.documentElement.getAttribute('data-theme') || 'light';
  },
  set(t) {
    document.documentElement.setAttribute('data-theme', t);
    try { localStorage.setItem(THEME_KEY, t); } catch {}
    window.dispatchEvent(new CustomEvent('hk:theme', { detail: t }));
  },
  toggle() { this.set(this.current === 'dark' ? 'light' : 'dark'); },
  init() {
    let saved = null;
    try { saved = localStorage.getItem(THEME_KEY); } catch {}
    const sysDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
    this.set(saved || (sysDark ? 'dark' : 'light'));
  },
};
HKTheme.init();

window.T = T;
window.HKTheme = HKTheme;