/* ==========================================================================
   The Steamboat Group · portal design tokens
   Brand Standards v4 (July 2026), as built into the TSG platform (Sept 2026).

   Drop this file into any new portal first. Everything in components.css and
   every page reads these variables, so a portal for another company changes
   colours and faces here and nowhere else.
   ========================================================================== */

:root {
  /* ---- colour: the six that matter ---------------------------------- */
  --cream:        #FAF7EF;   /* cards, sheets, the light ground             */
  --sand:         #F1EDE2;   /* page background on the public site          */
  --espresso:     #16120C;   /* dark sections, the site header, dark buttons */
  --ink:          #201B13;   /* headlines, primary text                     */
  --charcoal:     #4A4437;   /* body copy                                   */
  --gold:         #A5793F;   /* the ONE action colour: primary buttons, links, active marks */
  --champagne:    #E3C795;   /* labels on espresso only. Never on cream.    */
  --khaki:        #8B8371;   /* labels, captions, outlines, muted text      */

  /* ---- colour: the team app (admin) ground --------------------------- */
  --paper:        #F6F3EC;   /* admin page background, a touch cooler than sand */
  --card:         #FFFFFF;   /* admin cards                                 */
  --line:         rgba(32, 27, 19, 0.06);   /* hairlines between rows      */
  --line-strong:  rgba(32, 27, 19, 0.14);   /* borders that must read      */

  /* ---- colour: meaning (never decoration) ---------------------------- */
  --good:         #3D8F63;   /* done, delivered, connected, calls           */
  --good-soft:    #E4F2E9;
  --warn:         #C48A1C;   /* waiting, pending, needs a look              */
  --warn-soft:    #FBF3D6;
  --bad:          #B2542F;   /* failed, stopped, refused                    */
  --bad-soft:     #F4D9CF;
  --info:         #4470B5;   /* texts, neutral highlights                   */
  --info-soft:    #E6EEF9;

  /* ---- colour: channels (one colour per kind of touch, everywhere) --- */
  --ch-text:      #4470B5;  --ch-text-soft:    #E6EEF9;
  --ch-email:     #D27A3C;  --ch-email-soft:   #FBEADB;
  --ch-call:      #3D8F63;  --ch-call-soft:    #E4F2E9;
  --ch-note:      #D9B23A;  --ch-note-soft:    #FBF3D6;
  --ch-task:      #7D68A8;  --ch-task-soft:    #ECE7F5;
  --ch-web:       #1F2A3A;  --ch-web-soft:     #E8EBEF;

  /* ---- colour: listing status ---------------------------------------- */
  --st-active:    #5B7A5E;
  --st-coming:    #7A6A8E;
  --st-pending:   #6C7A8B;
  --st-contract:  #6F8A7A;
  --st-sold:      #8B8371;
  --st-open:      #9B4B3C;

  /* ---- type: three faces, three jobs --------------------------------- */
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;   /* headlines, big numbers, names */
  --font-sans:    "Mulish", ui-sans-serif, system-ui, sans-serif;        /* body copy, table cells, UI text */
  --font-label:   "Inter", ui-sans-serif, system-ui, sans-serif;         /* labels, buttons, kickers, nav, small caps */

  /* ---- type scale (public site) -------------------------------------- */
  --fs-hero:      56px;   --fs-h1: 44px;  --fs-h2: 30px;  --fs-h3: 22px;
  --fs-body:      17.5px; --fs-ui: 15px;  --fs-small: 13px; --fs-label: 11px;
  --lh-body:      1.7;    --lh-tight: 1.05;
  --track-label:  0.2em;  --track-btn: 0.22em;

  /* ---- shape ---------------------------------------------------------- */
  --r-site:       0;      /* the public site is square-edged, editorial    */
  --r-admin:      12px;   /* team app cards                                */
  --r-control:    8px;    /* pills, inputs, small buttons in the team app  */
  --r-pill:       999px;

  /* ---- elevation (use sparingly; one lifted thing per view) ---------- */
  --shadow-lift:  0 8px 22px rgba(22, 18, 12, 0.14);
  --shadow-card:  0 2px 12px rgba(32, 27, 19, 0.06);
  --shadow-sheet: 0 12px 32px rgba(32, 27, 19, 0.16);

  /* ---- layout --------------------------------------------------------- */
  --col:          1392px; /* one site-wide column: header, home, search, listing */
  --col-narrow:   940px;  /* reading pages                                  */
  --gutter:       20px;   --gutter-sm: 28px;
  --header-h:     68px;   --header-h-lg: 78px;   /* public site */
  --admin-header: 60px;                          /* team app    */
  --admin-zoom:   1;      /* the team app is scaled 1.1 on desktop; full-height panes divide by this */

  /* ---- motion --------------------------------------------------------- */
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --dur:          .3s;    --dur-fast: .15s;
}

/* The team app is drawn a tenth larger on a desktop so 14px type reads like 15.5. Panes that fill the window
   must size against the scaled window: height: calc(100vh / var(--admin-zoom) - var(--admin-header)). */
@media (min-width: 1024px) { .tsg-admin { zoom: 1.1; } :root { --admin-zoom: 1.1; } }

/* ==========================================================================
   Base rules every portal inherits. Do not restyle these in a page.
   ========================================================================== */
html, body {
  /* Lining figures everywhere. A number never drops below the baseline. Cormorant ships oldstyle digits
     by default, so this is set on html AND body and repeated in any rule that sets font-feature-settings. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
body {
  margin: 0;
  background: var(--sand);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tsg-admin { background: var(--paper); font-size: 14px; color: var(--ink); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; }
.tsg-admin h3:not(.display) { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; font-size: 15px; }

p { margin: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
strong, b { font-weight: 600; }
.tabular { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: var(--champagne); color: var(--espresso); }

/* Keyboard focus is always visible, always gold. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }