/* ============================================================================
   TrueNorth — Brand tokens
   File: tn-brand.css
   Host: https://cdn.tnmeridian.com/tn-brand.css   (Pages project: tn-shared)

   Import this instead of copying hex values. Every app that pastes its own
   palette is a place the brand drifts — that is how four different greens
   ended up in production.

   IN EVERY APP, before your own stylesheet:
     <link rel="stylesheet" href="https://cdn.tnmeridian.com/tn-brand.css?v=1">
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@400..700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap" rel="stylesheet">

   ⚠ Pages replaces ALL files on deploy. Uploading this alone would delete
     tn-auth.js. Always upload both together.

   Written standard: BRAND.md
   ============================================================================ */

:root{
  /* ── navy ladder — depth comes from these four steps, not from shadows ── */
  --navy:      #001026;   /* page */
  --navy-2:    #0A1B34;   /* headers, nav, sticky bars */
  --surface:   #0E2140;   /* cards, inputs, tiles */
  --raised:    #13294A;   /* pressed states, avatars, chips */
  --line:      #1C3157;   /* every border, 1px */

  /* ── green ────────────────────────────────────────────────────────────── */
  --green:     #729D20;   /* fills: buttons, bars, solid blocks */
  --green-br:  #86B92B;   /* accent TEXT and icons — brighter, legible on navy */

  /* ── text ─────────────────────────────────────────────────────────────── */
  --text:      #F5F7FA;
  --muted:     #9AA4B8;
  --faint:     #5F728C;   /* placeholders, disabled, fine print */

  /* ── neutral ──────────────────────────────────────────────────────────── */
  --ice:       #CFE3F7;   /* light blue — informational emphasis */
  --on-green:  #04240F;   /* label colour sitting on a green fill */

  /* ── status: FOUR states, named for MEANING, never for appearance ──────
     A colour named "gold" or "amber" gets reused for something unrelated
     within a month. A colour named --warn cannot. Four is the whole set —
     a fifth state is a design decision, not a code decision.              */
  --ok:        #729D20;   /* same as --green. Success, complete, on target. */
  --ok-bg:     rgba(114,157,32,.14);
  --warn:      #E5A23D;   /* attention needed. Holds, mid scores, untiered.  */
  --warn-bg:   rgba(229,162,61,.14);
  --warn-ink:  #4A3D00;   /* text on a solid --warn fill */
  --danger:    #E5624D;   /* rejected, failed, destructive */
  --danger-bg: rgba(229,98,77,.12);
  --danger-ink:#FFD7D2;
  --info:      #CFE3F7;   /* neutral notice */
  --info-bg:   rgba(207,227,247,.10);

  /* ── shape ────────────────────────────────────────────────────────────── */
  --r-card:  16px;
  --r-input: 11px;
  --r-chip:  9px;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-name:    'Cinzel', Georgia, serif;      /* company name only */
  --font-display: 'Bebas Neue', sans-serif;      /* big numerals only */
}

/* ============================================================================
   The company name, wherever it is set as TEXT rather than shown as the logo
   image. Display use only — never buttons, labels, body copy, or anything
   under ~16px. Set in caps; mixed case fights the letterforms.
   ============================================================================ */
.tn-name{
  font-family: var(--font-name);
  font-weight: 700;
  letter-spacing: .02em;
}

/* The lockup pattern from the logo: serif company name over a small tracked-out
   sans descriptor. Same relationship as TRUENORTH / HOME SOLUTIONS. */
.tn-lockup{ display:flex; flex-direction:column; line-height:1.05; }
.tn-lockup .tn-name{ font-size:19px; }
.tn-lockup .tn-sub{
  font-family: var(--font-name);            /* Meridian is part of the name */
  font-size:10px; font-weight:400; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted); margin-top:5px;
}

/* Interface type. DM Sans, always — Cinzel is display only and gets hard to
   read fast at button and label sizes. */
button, input, textarea, select { font-family: var(--font-ui); }
.tn-btn{
  font-family: var(--font-ui); font-weight:700; font-size:15px;
  background:var(--green); color:#04240F; border:0;
  border-radius:var(--r-input); padding:14px 18px; min-height:44px;
}
.tn-btn:active{ background:#86B92B; }

/* Section labels. NOT Bebas — an all-caps poster face at every heading level
   stops being an accent and becomes shouting. */
.tn-eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================================
   No glows. Coloured shadow effects date a design instantly. A 1px border does
   the same job and reads as considered rather than decorated.
   ============================================================================ */
.tn-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* Tap targets never below 44px — used one-handed, outdoors, sometimes gloved. */
.tn-tap{ min-height:44px; min-width:44px; }

/* ============================================================================
   ALIASES — apps written before this file existed use these names. Keeping
   them means an app can import this stylesheet and DELETE its own :root block
   without touching a single rule. Prefer the canonical names in new code.
   ============================================================================ */
:root{
  --bg:         var(--navy);
  --navy-2:     #0A1B34;
  --navy-deep:  var(--navy);
  --panel:      var(--surface);
  --ink:        var(--navy);
  --white:      #fff;
  --line2:      rgba(255,255,255,.06);
  --glow:       var(--green-br);   /* historical name. There are no glows. */
  --red:        var(--danger);
}