/* SloppyUniverse · Design Tokens
   ------------------------------------------------------------
   Paste into your global CSS or import this file.
*/

:root {
  /* Brand — Umbrella quadrants (also = module colors) */
  --su-green:   #5A7C2A;  /* SloppyFix  (olive)      */
  --su-blue:    #2E3CC6;  /* SloppyScan (royal blue) */
  --su-magenta: #B63E8E;  /* SloppyPlan (pink)       */
  --su-orange:  #C86A2E;  /* SloppyRent (terracotta) */

  /* Module tints — used for outer frame / light backdrops */
  --su-green-tint:   #8FB055;
  --su-blue-tint:    #6A78E8;
  --su-magenta-tint: #D97AB8;
  --su-orange-tint:  #E39A68;

  /* Surface / text */
  --su-ink:    #0F1233;   /* primary text, outlines              */
  --su-navy:   #1B1E4D;   /* dark hero backgrounds (login etc.)  */
  --su-navy-2: #0F1233;   /* darker navy, gradient end-stop      */
  --su-paper:  #FFFFFF;
  --su-bg:     #F6F6F2;   /* warm paper background               */
  --su-muted:  #6B6B6B;

  /* Accent on dark (used inside word "Universe") */
  --su-accent: #B88CFF;

  /* Type */
  --su-font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --su-font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --su-font-mono:    'Inter Tight', Inter, system-ui, sans-serif; /* for module monograms */
  --su-font-code:    'JetBrains Mono', ui-monospace, monospace;
}