/* ============================================================
   tokens.css — THE ONE SHARED SOURCE OF LOOK (contract layer)
   apna.co-inspired system: green primary · deep-purple ink ·
   Inter · soft pastel tints · friendly rounded corners.
   Variable NAMES kept stable so every other file still works.
   ============================================================ */

/* ---- Font (Inter, open-source, bundled locally) ---- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand — apna green + deep-purple ink */
  --c-primary:        #1f8268;   /* apna signature green */
  --c-primary-hover:  #196b56;
  --c-primary-soft:   #e6f5f0;   /* light green surface */
  --c-primary-softer: #f1faf7;

  /* Secondary accents */
  --c-accent:         #1f8268;
  --c-accent-bright:  #bde9dd;   /* mint highlight */
  --c-lime:           #fff9db;   /* butter highlight */
  --c-pink:           #cb2f4b;

  /* Status colors + soft pastel tints */
  --c-green:   #1f8268;  --c-green-soft:  #e0f3ec;
  --c-red:     #cb2f4b;  --c-red-soft:    #fde8ec;
  --c-amber:   #8a6d00;  --c-amber-soft:  #fff9db;
  --c-purple:  #6b3fd4;  --c-purple-soft: #f9f4ff;

  /* Neutrals */
  --c-ink:     #190a28;   /* deep purple-black headings */
  --c-body:    #4a4458;   /* body text */
  --c-muted:   #8c8594;   /* meta text */
  --c-line:    #e8e7ea;   /* borders */
  --c-line-2:  #dddbe1;
  --c-bg:      #ffffff;
  --c-bg-soft: #f4f2f6;   /* section tint */
  --c-bg-blue: #e0f3ec;   /* mint tint (kept name) */
  --c-white:   #ffffff;
  --c-dark:    #190a28;

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  30px;
  --fs-3xl:  42px;
  --fs-hero: 52px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Radius — friendly rounded */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 22px;  --r-full: 999px;

  /* Shadow — soft, neutral */
  --sh-sm: 0 2px 10px rgba(25,10,40,.05);
  --sh:    0 12px 30px rgba(25,10,40,.08);
  --sh-lg: 0 22px 55px rgba(25,10,40,.13);

  /* Layout */
  --container: 1200px;
  --header-h: 76px;
  --sidebar-w: 280px;
  --transition: .22s ease;
}