/* ==========================================================================
   NexStep Case — design tokens
   Every colour, type face, radius and spacing step lives here. Nothing else
   in the project should hardcode a hex value.

   Palette: pink + white + black. The storefront leans soft and friendly
   (young / women-first audience); the dark tiles stay near-black.
   ========================================================================== */

:root {
  /* --- surfaces ---------------------------------------------------------- */
  --bg:            #FFFFFF;
  --canvas:        #FFF4F8;   /* soft pink page behind the cards */
  --surface:       #FFFFFF;
  --surface-soft:  #FFF8FB;
  --surface-mute:  #FCEEF4;
  --surface-tint:  #FBE7F0;
  --dark:          #16121A;   /* warm near-black */
  --dark-2:        #1B1420;
  --dark-3:        #271B2D;

  /* --- text -------------------------------------------------------------- */
  --ink:           #0E1116;
  --ink-2:         #14181F;
  --ink-3:         #2A313D;
  --ink-4:         #3F4653;
  --muted:         #6E7684;
  --muted-2:       #6B7280;
  --muted-3:       #8A93A3;
  --muted-4:       #9AA0AA;

  /* --- lines ------------------------------------------------------------- */
  --line:          #F1E1EA;
  --line-2:        #EEDDE7;
  --line-3:        #E8D5E0;
  --line-4:        #F7EAF1;
  --line-5:        #F1E1EA;
  --line-6:        #F9EEF4;
  --line-dash:     #E0C6D5;

  /* --- accent: pink ----------------------------------------------------- */
  --accent:        #DB2777;
  --accent-hover:  #EC4899;
  --accent-tint:   #FCE7F1;
  --accent-tint-2: #FDEEF5;
  --accent-line:   #F7C7DE;

  /* --- status ------------------------------------------------------------ */
  --success:       #12724A;
  --success-bg:    #E6F6EC;
  --success-dot:   #2FBF71;
  --warning:       #B4690E;
  --warning-bg:    #FDF1DC;
  --danger:        #D11F35;
  --danger-bg:     #FDECEE;
  --danger-line:   #F6C9CF;
  --neutral:       #6E7684;
  --neutral-bg:    #F3E7EE;
  --highlight:     #F9A8D4;   /* the soft pink used on dark tiles */

  /* --- type -------------------------------------------------------------- */
  /* Neither Latin face has Myanmar glyphs, so the browser would otherwise
     fall back to whatever thin default the OS ships - Noto Sans Myanmar
     covers that script properly and only kicks in for Myanmar codepoints,
     Latin text keeps using Space Grotesk / IBM Plex as before. */
  --font-head: 'Space Grotesk', 'Noto Sans Myanmar', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Noto Sans Myanmar', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Noto Sans Myanmar', ui-monospace, monospace;

  /* --- radii ------------------------------------------------------------- */
  --r-card:   16px;
  --r-card-2: 13px;
  --r-input:  12px;
  --r-btn:    14px;
  --r-sm:     10px;
  --r-pill:   999px;

  /* --- spacing ----------------------------------------------------------- */
  --pad-card:  15px;
  --gap-grid:  12px;
  --gap-sect:  16px;
  --page-x:    18px;

  /* --- elevation --------------------------------------------------------- */
  --shadow-card: 0 6px 16px -12px rgba(14, 17, 22, .30);
  --shadow-pop:  0 12px 28px -14px rgba(14, 17, 22, .50);
  --shadow-bar:  0 -2px 14px rgba(14, 17, 22, .06);

  /* --- layout ------------------------------------------------------------ */
  --shell-max: 1180px;
  --tabbar-h:  60px;
}