/* ============================================================================
   Barmaso — design tokens
   ----------------------------------------------------------------------------
   Carried over from the v1 Search app so the Firebase rebuild reads as the
   same product: cool neutral surfaces, deep navy ink, warm signal orange,
   and the Barmaso yellow reserved for the brand mark itself.
   ============================================================================ */

:root {
  /* --- Color --- */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-alt: #ECF0F5;
  --ink: #10203A;
  --ink-soft: #52607A;
  --ink-faint: #5E6A7F; /* was #8793A8: 3.1:1 on white, under the 4.5 text needs */
  --border: #DFE4EC;

  /* Highlight tone — icons, active states, hover borders, focus rings.
     Always sits on --accent-soft, never carries body text on its own. */
  --accent: #0E6B52;
  --accent-soft: #E2F1EB;
  --accent-deep: #0A4C3B;

  /* Action tone — primary buttons. Kept separate from the highlight tone so
     each can be chosen for its own job: the highlight only ever has to read
     against its own soft tint, while a button has to carry white label text
     at full contrast. Changing one no longer drags the other with it. */
  --action: #10203A;
  --action-hover: #1D3357;
  --action-ink: #FFFFFF;

  /* The Barmaso mark keeps the brand yellow regardless of the accent tone. */
  --brand-color: #FFFB01;

  --success: #17A673;
  /* --success is for fills and marks: as words on white it is 3.1:1. Words take this (7.3:1). */
  --success-ink: #0B6B49;
  --success-soft: #DCF5EB;
  --danger: #B9322B; /* was #E0473F: 3.4:1 on --danger-soft */
  --danger-soft: #FBE4E2;
  --warning: #855D00; /* was #B5820A: 3.1:1 on --warning-soft */
  --warning-soft: #FFF3D4;
  --highlight-bg: #FFE1A8;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Noto Sans Myanmar', sans-serif;
  --font-body: 'Noto Sans Myanmar', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* --- Shape --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(16, 32, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 32, 58, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 32, 58, 0.14);

  /* --- Layout --- */
  --header-h: 64px;
  --content-max: 1080px;
  --drawer-w: 300px;
  --gutter: 20px;
}

@media (max-width: 640px) {
  :root {
    --header-h: 56px;
    --gutter: 16px;
  }
}