/* ============================================================
   Nambikkai · Ground News — Citizen Journalism Platform
   Design tokens derived from the Nambikkai Figma source.
   ============================================================ */

:root {
  /* Brand */
  --red:        #D30000;   /* brand red — alerts, reject, held, logo accent */
  --blue:       #0044BB;   /* brand navy — app chrome, primary actions      */
  --blue-mid:   #0571B3;   /* figma button blue — secondary primary         */
  --blue-soft:  #BADFFF;   /* figma mobile navbar band                       */
  --blue-tint:  #E8F3FF;   /* faint blue wash                                */

  /* Neutrals */
  --bg-app:     #F4F6F9;   /* page / app container                          */
  --bg-card:    #FFFFFF;   /* cards & workspaces                             */
  --bg-sunken:  #F8FAFC;   /* inset surfaces                                 */
  --text:       #1A1A1A;   /* primary text                                  */
  --text-2:     #475569;   /* secondary                                     */
  --subtext:    #666666;   /* metadata                                      */
  --border:     #E2E8F0;   /* hairline borders                              */
  --border-2:   #CBD5E1;

  /* Status */
  --st-draft:   #0088FF;
  --st-review:  #FF8D28;
  --st-approve: #34C759;
  --st-held:    #FF383C;

  --radius:     8px;
  --radius-sm:  6px;
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
  --shadow-md:  0 4px 14px rgba(15,23,42,0.08);
  --shadow-lg:  0 24px 60px rgba(15,23,42,0.14);

  /* --- Three-typeface system ---------------------------------
     serif  → article names / headlines only
     ui     → ALL other content (UI, meta, badges, labels)
     brand  → "Ground News" masthead + logo lockup only        */
  --ff-serif:  "Source Serif 4", "Noto Serif Tamil", Georgia, serif;
  --ff-ui:     "Inter", "Noto Sans Tamil", system-ui, sans-serif;
  --ff-brand:  "Archivo", "Noto Sans Tamil", system-ui, sans-serif;
  /* legacy aliases — collapsed onto the single sans */
  --ff-mono:   var(--ff-ui);
  --ff-meta:   var(--ff-ui);
}

/* ---------- dark mode ---------- */
.dark {
  --bg-app:    #0C111B;
  --bg-card:   #141B27;
  --bg-sunken: #1B2433;
  --text:      #F1F5F9;
  --text-2:    #AEBACA;
  --subtext:   #8A99AD;
  --border:    #25303F;
  --border-2:  #33404F;
  --blue-soft: #18324F;
  --blue-tint: #14263C;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--ff-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

/* thin custom scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(120,135,155,0.4); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

::selection { background: rgba(0,68,187,0.18); }