/* Design tokens -- single source of truth. Edit here to change site-wide. */
:root {
  /* Spacing scale (Refactoring UI 8-step) */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;

  /* Type scale (px anchors; rem values grandfathered elsewhere) */
  --text-12: 12px; --text-14: 14px; --text-16: 16px; --text-18: 18px;
  --text-24: 24px; --text-30: 30px; --text-36: 36px; --text-48: 48px; --text-60: 60px;

  /* Line heights */
  --leading-tight: 1.15; --leading-snug: 1.35;
  --leading-normal: 1.5; --leading-loose: 1.7;

  /* Font weights */
  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  /* Green -- primary brand (CTAs, success) */
  --color-green-50:#f5faf7; --color-green-100:#e4f6ed; --color-green-200:#c2f4dc;
  --color-green-300:#8ff5c2; --color-green-400:#48f39e; --color-green-500:#22f08a;
  --color-green-600:#0ed573; --color-green-700:#0fa55b; --color-green-800:#0e7844;
  --color-green-900:#0b4c2c; --color-green-950:#062315;

  /* Cyan -- secondary accent (links, info) */
  --color-cyan-50:#f4f9fa; --color-cyan-100:#e2f3f8; --color-cyan-200:#bfebf8;
  --color-cyan-300:#88e1fc; --color-cyan-400:#6eddff; --color-cyan-500:#45d4ff;
  --color-cyan-600:#0cc7ff; --color-cyan-700:#059fcd; --color-cyan-800:#087292;
  --color-cyan-900:#07475a; --color-cyan-950:#041d25;

  /* Violet -- tertiary accent (categorical tags) */
  --color-violet-50:#f7f5fa; --color-violet-100:#ebe4f6; --color-violet-200:#d5c4f3;
  --color-violet-300:#b592f1; --color-violet-400:#d0b9f8; --color-violet-500:#b794f4;
  --color-violet-600:#8c54ed; --color-violet-700:#631ddf; --color-violet-800:#49189d;
  --color-violet-900:#2d115e; --color-violet-950:#110722;

  /* Gold -- warning / premium accent */
  --color-gold-50:#faf9f4; --color-gold-100:#f8f1e2; --color-gold-200:#f8e7bf;
  --color-gold-300:#fcd988; --color-gold-400:#ffdd8f; --color-gold-500:#ffd166;
  --color-gold-600:#ffbe27; --color-gold-700:#e19f06; --color-gold-800:#9f7208;
  --color-gold-900:#604608; --color-gold-950:#251b04;

  /* Navy -- dark-mode neutral ramp (does 90% of the work) */
  --color-navy-50:#eaf3ff;  --color-navy-100:#d0e0ff; --color-navy-200:#a8bfe3;
  --color-navy-300:#8ba6cc; --color-navy-400:#607a9e; --color-navy-500:#3c5478;
  --color-navy-600:#263e60; --color-navy-700:#0e2247; --color-navy-800:#0d2145;
  --color-navy-900:#07142b; --color-navy-950:#050d1c;

  /* Semantic color aliases */
  --color-bg-page:      var(--color-navy-900);
  --color-bg-surface:   var(--color-navy-800);
  --color-bg-elevated:  var(--color-navy-700);
  --color-text-primary: var(--color-navy-50);
  --color-text-muted:   var(--color-navy-300);
  --color-danger:  #df4444;
  --color-success: #62e85a;
  --color-warning: var(--color-gold-500);

  /* Shadow scale */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-modal: 0 20px 40px rgba(0,0,0,0.30), 0 6px 12px rgba(0,0,0,0.18);
  --shadow-hero:  0 40px 80px rgba(0,0,0,0.40), 0 12px 24px rgba(0,0,0,0.24);

  /* Border radius scale */
  --radius-4: 4px;  --radius-6: 6px;   --radius-8: 8px;
  --radius-12: 12px; --radius-16: 16px;
  --radius-sm: var(--radius-4);  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-12); --radius-xl: var(--radius-16);
  --radius-full: 9999px;

  /* Legacy short-name aliases -- kept for backward compat with existing page CSS.
     New CSS should reference the full names above. */
  --bg:     var(--color-navy-900);
  --card:   var(--color-navy-700);
  --ink:    var(--color-navy-50);
  --muted:  var(--color-navy-300);
  --go:     var(--color-green-500);
  --acc:    var(--color-cyan-500);
  --accent: var(--color-cyan-500);
  --vio:    var(--color-violet-500);
  --warn:   #FACC15;
  --miss:   #DF4444;
}

/* 7.26 review: lock brand sizing across all pages to prevent /free vs /follow drift */
.otat-nav-bar .otat-nav-brand {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  padding: 4px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700;
}