/* ══════════════════════════════════════════════
   NXTHARBOR — BRAND VARIABLES
   Navy + gold palette, light and dark.
   Change brand colours here only.
   ══════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Surfaces & text */
  --bg:      #F6F4EE;   /* page background, inputs   */
  --surface: #FFFFFF;   /* cards, panels             */
  --ink:     #1C1E1B;   /* headings, body            */
  --muted:   #5E6058;   /* labels, secondary text    */
  --faint:   #6F7168;   /* hints, meta               */
  --line:    #DCDFD6;   /* borders                   */

  /* Brand */
  --navy:      #071528;
  --navy-ink:  #071528;   /* navy that stays readable as text */
  --navy-tint: color-mix(in srgb, var(--navy) 12%, var(--surface));
  --on-navy:   #FFFFFF;   /* text on navy fills        */
  --head-text:  #C9D3E3;   /* paragraph text on the navy header */
  --gold:       #A9832E;
  --gold-soft:  #F1E6CB;
  --gold-deep:  #7A5A12;   /* gold that stays readable as text on gold-soft */
  --tag-ink:    var(--navy-ink);

  /* Status */
  --danger:      #B14B36;
  --danger-tint: color-mix(in srgb, var(--danger) 12%, var(--surface));

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  80px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast: 0.22s ease;
  --transition-med:  0.35s ease;
  --transition-slow: 0.72s ease;
}

/* Dark palette (follows the phone's setting) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #071528;  --surface: #0A1C37;  --ink: #F2F1EA;
    --muted: #A9B6CC;  --faint: #8A99B3;  --line: #1B2F52;
    --navy: #16315C;  --navy-ink: #DCE6F5;
    --gold: #D8B565;  --gold-soft: #2D2A1C;  --gold-deep: #D8B565;
    --tag-ink: #F1E6CB;
    --danger: #E28066;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071528;  --surface: #0A1C37;  --ink: #F2F1EA;
  --muted: #A9B6CC;  --faint: #8A99B3;  --line: #1B2F52;
  --navy: #16315C;  --navy-ink: #DCE6F5;
  --gold: #D8B565;  --gold-soft: #2D2A1C;  --gold-deep: #D8B565;
  --tag-ink: #F1E6CB;
  --danger: #E28066;
}