/* Kisholoy — color tokens
   ─────────────────────────────────────────────────────────────────
   CORE FOUNDATIONAL RULE: the palette is a closed set of 14 tokens —
   3 families (Amber, Green, Grey) × 4 shades (900/600/300/100), plus
   White and Black. Nothing outside these 14 hexes is used anywhere in
   the product. Darkest/Lightest per family were supplied directly;
   the 600/300 mid-shades are evenly interpolated between them. White
   and Black are general-purpose — use them wherever needed, no
   reservation. Do not introduce any other hex value — remap to the
   nearest of these 14 instead. */

:root {
  /* ---- Amber — warm neutral: buttons, structure, warmth ---- */
  --amber-900: #755851; /* darkest */
  --amber-600: #a1887d; /* mid-dark */
  --amber-300: #ceb9a8; /* mid-light */
  --amber-100: #fae9d4; /* lightest */

  /* ---- Green — brand accent: identity, action, growth ---- */
  --green-900: #387563; /* darkest */
  --green-600: #6a987c; /* mid-dark */
  --green-300: #9bba96; /* mid-light */
  --green-100: #cdddaf; /* lightest */

  /* ---- Grey — neutral: text, surfaces, structure ---- */
  --grey-900: #3b3432; /* darkest */
  --grey-600: #76706e; /* mid-dark */
  --grey-300: #b1abaa; /* mid-light */
  --grey-100: #ece7e6; /* lightest */

  /* ---- White & Black — general-purpose, use anywhere ---- */
  --white: #f1f1f1;
  --black: #101010;

  /* ---- Legacy alias names → remapped to the closest of the 14 tokens above.
     Kept so existing components don't need per-file edits; the 14 tokens
     above are the only source of truth going forward. ---- */
  --kh-cream: var(--amber-100);      /* exact match */
  --kh-white: var(--white);          /* exact role match — general white surface */
  --kh-mocha-700: var(--amber-900);  /* exact match */
  --kh-tan-500: var(--amber-600);
  --kh-sage-600: var(--green-600);
  --kh-leaf-400: var(--green-300);   /* closest available — the system has no vivid/saturated green */
  --kh-mint-100: var(--green-100);
  --kh-red-600: var(--amber-900);    /* closest available — the system has no red family */
  --kh-ink-700: var(--grey-900);
  --kh-ink-400: var(--grey-300);
  --kh-line-200: var(--grey-100);    /* distinct from white so borders stay visible */
  --kh-shadow-tint: rgba(177, 171, 170, 0.25); /* grey-300 tint */
  --kh-flag-green: var(--green-900); /* closest available — Bangladesh-flag icon accent */
  --kh-flag-red: var(--amber-900);   /* closest available */

  /* ---- Semantic aliases — reference these in components ---- */
  --surface-page: var(--white);
  --surface-warm: var(--amber-100);         /* splash / auth / onboarding backdrops */
  --surface-highlight: var(--green-100);    /* featured post backgrounds */
  --surface-card: var(--white);

  --border-default: var(--grey-100);
  --border-strong: var(--amber-900);

  --text-primary: var(--grey-900);
  --text-secondary: var(--grey-300);
  --text-on-brand: var(--white);
  --text-link: var(--green-600);
  --text-brand-strong: var(--amber-900);

  --brand-primary: var(--amber-900);   /* primary buttons (login, next, publish) */
  --brand-secondary: var(--amber-600); /* secondary buttons, inactive nav */
  --brand-active: var(--green-600);    /* active nav / follow / links */
  --brand-accent: var(--green-300);    /* logo sprout, sparing icon accents */
  --brand-alert: var(--amber-900);     /* no red in the system — the darkest amber stands in */

  --shadow-header: 0px 3px 4px 0px var(--kh-shadow-tint);
  --shadow-card: 0px 2px 2px 0px var(--grey-100);
  --scrim-dark: rgba(16, 16, 16, 0.35); /* black scrim, e.g. drawer backdrop */
}