/*
 * Suvaio — Brand Design Tokens
 * Single source of truth for colours, typography, and surface styles.
 * Loaded by every HTML page before page-specific CSS.
 */

:root {
  /* Legacy names kept so existing rules keep working; they now resolve to the one ladder below. */
  --fs-section: var(--text-lg);   /* section headings    */
  --fs-stat:    var(--text-2xl);  /* KPI / stat numbers  */
  --fs-btn:     var(--text-md);   /* button text         */
  /* ── Core palette ─────────────────────────────────── */
  --brand-primary:      #1A3A5C;   /* navy — headers, buttons, active states  */
  --brand-primary-dark: #16324F;   /* deeper navy — hover states              */
  --brand-primary-xdk:  #0D1F33;   /* darkest — gradient stop                 */

  --brand-gold:         #C8963C;   /* gold — accents on light backgrounds     */
  --brand-gold-dark:    #E8B860;   /* bright gold — accents on dark bg        */
  --brand-gold-light:   #F0C878;   /* highlight gold — hover/emphasis         */

  /* ── Surfaces ─────────────────────────────────────── */
  --brand-bg:           #f5f0eb;   /* page background (warm cream)            */
  --brand-bg-warm:      #fdf8f0;   /* card / panel inner background           */
  --brand-border:       #e8d8c0;   /* card borders, table lines               */
  --brand-border-light: #f0e8dc;   /* subtle dividers                         */

  /* ── Text ─────────────────────────────────────────── */
  --brand-text:         #1a1008;   /* primary body text                       */
  --brand-text-muted:   #888780;   /* secondary / placeholder text            */

  /* ── Typography scale ─────────────────────────────── */
  /* One ladder for the whole app. The pages used to carry about thirty distinct sizes (9, 9.5, 10, 10.5, 11,
     11.5, 12, 12.5, 13, 13.5, 14, 15, 17, 18, 19, 21, 22 ...), which is why no two panels agreed on what a
     label or a heading looked like. Every size now resolves to one of these nine steps. */
  --text-2xs:  10px;    /* badges, timestamps, footnotes          */
  --text-xs:   11px;    /* uppercase labels, table headers        */
  --text-sm:   12px;    /* secondary text, chips, meta            */
  --text-md:   13px;    /* body and table cells -- the base size  */
  --text-base: 14px;    /* inputs, emphasis, touch targets        */
  --text-lg:   16px;    /* section headings                       */
  --text-xl:   20px;    /* page titles                            */
  --text-2xl:  26px;    /* KPI figures                            */
  --text-3xl:  34px;    /* hero figures                           */

  /* ── Typography ───────────────────────────────────── */
  /* Inter is drawn for interface text at small sizes; Plus Jakarta Sans is a display face and read soft and
     optically large in tables. Jakarta stays as the wordmark so the brand signature survives. --font-ui used to
     name Segoe UI, which exists on Windows and nowhere else, so every Mac and phone silently fell back to Arial
     beside Jakarta on the same screen. It is now the same stack as --font-brand. */
  --font-brand:   'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Base resets ───────────────────────────────────────────────── */
body {
  font-family: var(--font-brand);
  background:  var(--brand-bg);
  color:        var(--brand-text);
  /* Most of the app never set a line-height, so leading was whatever each size's font metrics produced --
     uneven between sizes and cramped in tables. One inherited value fixes it everywhere at once. */
  /* Without this, anything that forgets to set a size inherits the browser's 16px default -- which is how a
     back-office page ends up with stray text noticeably larger than the table it sits next to. */
  font-size: var(--text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Buttons, inputs and selects do not inherit a font from body -- browsers give them their own UA face, which
   is why buttons and count boxes rendered in Arial beside the rest of the page. */
button, input, select, textarea, optgroup {
  font-family: inherit;
  /* Same reason as the font: a control with no size of its own renders at the browser's own 13.33px, which is
     on no scale at all. Any page rule with a class selector still wins. */
  font-size: inherit;
}

/* Figures that sit in columns -- money, counts, dates -- line up digit under digit. */
td, th, input[type="number"], .stat-value, .kpi-value, .money, .num {
  font-variant-numeric: tabular-nums;
}

/* ── Shared header strip ───────────────────────────────────────── */
.suvaio-header {
  background:  var(--brand-primary);
  color:        #fff;
  height:       58px;
  padding:      0 32px;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  box-shadow:   0 2px 12px rgba(0,0,0,0.25);
}

/* ── Logo wordmark ─────────────────────────────────────────────── */
.suvaio-wordmark {
  font-family:    var(--font-display);
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1;
  display:        flex;
  align-items:    baseline;
  user-select:    none;
}
.suvaio-wordmark .primary { color: #ffffff; }
.suvaio-wordmark .gold    { color: var(--brand-gold-dark); }

/* Light-background variant (login card, settings) */
.suvaio-wordmark.on-light .primary { color: var(--brand-primary); }
.suvaio-wordmark.on-light .gold    { color: var(--brand-gold); }

.suvaio-tagline {
  font-family:    var(--font-brand);
  font-weight:    400;
  letter-spacing: 0.12em;
  color:          var(--brand-text-muted);
  line-height:    1;
}

/* ── Shared card ───────────────────────────────────────────────── */
.brand-card {
  background:    #fff;
  border-radius: 10px;
  border:        1px solid var(--brand-border);
  overflow:      hidden;
}
.brand-card-head {
  background:    var(--brand-bg-warm);
  border-bottom: 1px solid var(--brand-border);
  padding:       14px 20px;
  font-weight:   700;
  font-size:     var(--text-md);
  color:         var(--brand-primary);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-brand {
  background:  var(--brand-primary);
  color:        #fff;
  border:       none;
  border-radius: 7px;
  font-family:  var(--font-brand);
  font-weight:  600;
  cursor:       pointer;
  transition:   background 0.2s;
}
.btn-brand:hover { background: var(--brand-primary-dark); }

/* ── Tab underline indicator ───────────────────────────────────── */
.tab.active     { color: var(--brand-primary); border-bottom-color: var(--brand-gold); }
.tab:hover      { color: var(--brand-primary); }

/* ── Hub-link pill (back to hub) ───────────────────────────────── */
.hub-link {
  color:         var(--brand-gold-dark);
  border-color:  rgba(232, 168, 53, 0.35);
}
.hub-link:hover { background: rgba(232, 168, 53, 0.15); }