/*
 * cajd.uk shared theme
 * Dark navy + gold accent (refresh 2026-04-29). Body text stays white;
 * gold (--gold) is the brand accent — use it for favicons, brand glyphs,
 * focus rings, key actions. --green stays as a "success" semantic.
 *
 * Apps load this once via:
 *   <link rel="stylesheet" href="https://cajd.uk/static/theme.css">
 */

:root {
  /* Backgrounds — deep navy, darkest -> lightest */
  --bg:            #0a1428;
  --bg-widget:     #0e1b35;
  --bg-widget-alt: #122440;
  --bg-input:      #15294a;
  --bg-hover:      #1a3055;
  --bg-modal:      #122440;

  /* Borders (3 tiers) — navy-tinted */
  --border:        #1d345e;
  --border-focus:  #2a4a83;
  --border-strong: #3a5fa0;

  /* Text (5 tiers) — cool white -> muted blue-gray */
  --text-white:     #f1f4fa;
  --text-primary:   #d4dae6;
  --text-label:     #9ca6b8;
  --text-secondary: #707b91;
  --text-muted:     #444f66;

  /* Brand accent — gold (the refresh) */
  --gold:           #d4af37;
  --gold-bright:    #f5c518;
  --gold-dim:       rgba(212, 175, 55, 0.15);

  /* Backwards compat: legacy apps used --green for brand. Re-point to gold so
     existing var(--green) callsites pick up the new accent automatically.
     Apps that want true "success green" should use --success instead. */
  --green:          var(--gold);
  --green-dim:      var(--gold-dim);

  /* Semantic status colours — kept (tuned for navy bg where needed) */
  --success:        #22c55e;
  --success-dim:    rgba(34, 197, 94, 0.15);
  --amber:          #f59e0b;
  --amber-dim:      rgba(245, 158, 11, 0.15);
  --red:            #ef4444;
  --red-dim:        rgba(239, 68, 68, 0.15);
  --blue:           #5b9eff;             /* slightly brighter so it pops on navy */
  --blue-dim:       rgba(91, 158, 255, 0.15);
  --purple:         #a78bfa;
  --purple-dim:     rgba(167, 139, 250, 0.15);
  --cyan:           #67e8f9;

  /* Geometry */
  --radius: 2px;
  --header-h: 40px;

  /* Typography (unchanged) */
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', monospace;
  --font-ui:   system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="light"] {
  /* Light theme — warm off-white that complements gold */
  --bg:             #f5f3ee;
  --bg-widget:      #ffffff;
  --bg-widget-alt:  #fbf8f0;
  --bg-input:       #ffffff;
  --bg-hover:       #f0ece2;
  --bg-modal:       #ffffff;

  --border:         #e6e0d2;
  --border-focus:   #c9bfa8;
  --border-strong:  #b3a684;

  --text-white:     #0a1428;            /* "white" => nearly-black for inversion */
  --text-primary:   #1a2640;
  --text-label:     #4a566e;
  --text-secondary: #6d7a92;
  --text-muted:     #a8b0c0;

  --gold:           #b8941f;            /* darker gold for contrast on light bg */
  --gold-bright:    #d4a017;
  --gold-dim:       rgba(184, 148, 31, 0.12);

  --green:          var(--gold);
  --green-dim:      var(--gold-dim);

  --success:        #16a34a;
  --success-dim:    rgba(22, 163, 74, 0.10);
  --amber:          #d97706;
  --amber-dim:      rgba(217, 119, 6, 0.10);
  --red:            #dc2626;
  --red-dim:        rgba(220, 38, 38, 0.10);
  --blue:           #2563eb;
  --blue-dim:       rgba(37, 99, 235, 0.10);
  --purple:         #7c3aed;
  --purple-dim:     rgba(124, 58, 237, 0.10);
  --cyan:           #0891b2;
}

/* Base typography */
html {
  font-size: 13px;
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-primary);
  color-scheme: dark light;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); text-decoration: underline; }
strong, b { color: var(--text-white); }
::selection { background: var(--gold-dim); color: var(--text-white); }

/* Form controls — uniform 12px baseline (matches REMINDERS, the canonical app).
   Per-app CSS can tweak appearance but the size stays consistent so body
   text and input text read at the same scale across every app. */
input, select, textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}
button { font-family: var(--font-mono); }