/* Thapala Box — brand tokens
   Single source of truth for documents and web pages.
   Everything downstream should reference these variables, never raw hex.

   Mirrors the brand/tokens.css from the ThapalaBox brand redesign
   (claude.ai/design project dcec0c2c-11ba-425b-b62e-c952cc05f205).
   If one changes, change both.
*/

:root {
  /* ---- Sage: the brand, and every action -------------------------------- */
  --tb-primary-50:  #F2F5EE;
  --tb-primary-100: #E1E8D8;
  --tb-primary-200: #C7D2B6;   /* text/fills on dark surfaces */
  --tb-primary-300: #A8B792;
  --tb-primary-400: #869770;
  --tb-primary-500: #56633F;   /* SAGE — the brand colour */
  --tb-primary-600: #46522F;   /* pressed / hover-darken */
  --tb-primary-700: #374024;
  --tb-primary-800: #262D19;
  --tb-primary-900: #171B0F;

  /* ---- Warm grounds (documents, marketing, packaging) ------------------- */
  --tb-cream:       #F5EAD8;   /* page ground */
  --tb-paper:       #F9F4ED;   /* inset panels on cream */
  --tb-cream-deep:  #EBDDC5;   /* cards on cream */
  --tb-white:       #FFFFFF;   /* letterheads and forms print on WHITE */

  /* ---- Ink ------------------------------------------------------------- */
  --tb-ink:         #201E1D;   /* headings */
  --tb-body:        #2B2926;   /* body copy */
  --tb-ink-70:      rgba(32, 30, 29, .72);
  --tb-ink-55:      rgba(32, 30, 29, .58);

  /* ---- Terracotta: the one warm accent. Labels, kickers, links --------- */
  --tb-terracotta:      #C67139;
  --tb-terracotta-deep: #8C491A;  /* use this at text sizes — #C67139 fails contrast */

  /* ---- Gold ------------------------------------------------------------ */
  --tb-gold-800: #6B5300;

  /* ---- Category colours (the four services) ---------------------------- */
  --tb-cat-food:          var(--tb-primary-500); /* the launch hero shares the brand */
  --tb-cat-grocery:       var(--tb-gold-800);
  --tb-cat-parcel:        #2C332A;
  --tb-cat-medicine:      #B0521F;
  --tb-cat-medicine-soft: #FBEDE4;
  --tb-cat-medicine-dark: #8A3F16;

  /* ---- Status. NEVER a step of the sage ramp — it would read as a button */
  --tb-success:       #0D8A4E;
  --tb-success-fill:  #075633;   /* filled pill w/ white label: 8.8:1 */
  --tb-success-dark:  #5AB88A;   /* dark mode */
  --tb-veg:           #0D8A4E;   /* regulatory mark; bordered square only */
  --tb-warning:       #B8860B;
  --tb-error:         #A32E22;

  /* ---- Dark surfaces --------------------------------------------------- */
  --tb-dark-bg:      #0F1F14;
  --tb-dark-surface: #1A2519;
  --tb-dark-raised:  #2A3828;
  --tb-dark-text:    #FAFDF8;
  --tb-dark-muted:   #8FA88B;

  /* ---- Watermark: sage, never grey. 7% floor, 10% ceiling -------------- */
  --tb-watermark: rgba(86, 99, 63, .09);

  /* ---- Type ------------------------------------------------------------ */
  --tb-font-display: Caprasimo, Georgia, serif;      /* headings ONLY, never body */
  --tb-font-body:    Figtree, system-ui, sans-serif;
  --tb-font-telugu:  'Noto Sans Telugu', 'Nirmala UI', sans-serif;
  --tb-font-hindi:   'Noto Sans Devanagari', 'Nirmala UI', sans-serif;

  /* ---- Radius. Over-round, but buttons are NOT pills in the app -------- */
  --tb-radius-sm:  8px;
  --tb-radius-md:  10px;
  --tb-radius-lg:  16px;
  --tb-radius-xl:  24px;
  --tb-radius-pill: 999px;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --tb-space-1: 4px;   --tb-space-2: 8px;   --tb-space-3: 12px;
  --tb-space-4: 16px;  --tb-space-5: 20px;  --tb-space-6: 24px;
  --tb-space-8: 32px;  --tb-space-10: 40px; --tb-space-12: 48px;
  --tb-space-16: 64px;

  /* ---- Elevation. Sage-tinted, never neutral grey ---------------------- */
  --tb-shadow-sm: 0 1px 3px rgba(86, 99, 63, .10);
  --tb-shadow-md: 0 6px 18px rgba(86, 99, 63, .13);
  --tb-shadow-lg: 0 18px 44px rgba(32, 30, 29, .14);
}

a { color: var(--tb-terracotta-deep); text-underline-offset: 2px; }
a:hover { color: #6D3712; }

:focus-visible {
  outline: 2px solid var(--tb-primary-500);
  outline-offset: 2px;
}

::selection { background: var(--tb-primary-100); color: var(--tb-ink); }