/* Kalimi — Color tokens. Values transcribed verbatim from Kalimi.fig Variables. */
:root {
  /* ---- Brand ---- */
  --brand-yellow: #FFE500;          /* primary — rgb(255,229,0) */
  --brand-yellow-hover: #F0D700;    /* primary hover/pressed — rgb(240,215,0) */
  --brand-yellow-2: #FFCC00;        /* secondary yellow — rgb(255,204,0) selection controls, sm focus ring */
  --brand-yellow-dark: #CCA300;     /* pending-dark — rgb(204,163,0) */
  --brand-dark-blue: #030213;       /* brand main (dark) — rgb(3,2,19) */

  /* ---- Greys (neutral ramp) ---- */
  --grey-0:   #FFFFFF;
  --grey-25:  #F7F7F7;   /* surface grey */
  --grey-50:  #EDEDED;   /* border light — rgb(237,237,237) */
  --grey-100: #E8E8E8;
  --grey-200: #D9D9D9;   /* border dark */
  --grey-300: #BFBFBF;
  --grey-400: #A5A5A5;   /* placeholder / disabled text */
  --grey-500: #737373;
  --grey-600: #595959;   /* secondary text — rgb(89,89,89) */
  --grey-800: #262626;
  --grey-900: #0F0F0F;   /* primary text / near-black — rgb(15,15,15) */

  /* ---- Cream (warm surface used in hero + refer banners) ---- */
  --cream: #FFFDF0;
  --cream-200: #FFF7C4;

  /* ---- Semantic / status ---- */
  --error:         #DF3226; /* rgb(223,50,38) */
  --error-surface: #FFEBEB;
  --error-stroke:  #FECDCD;
  --success:         #22C55E; /* rgb(34,197,94) */
  --success-surface: #E3FCEE;
  --success-stroke:  #D1FADF;
  --info:         #229EFF; /* rgb(34,158,255) */
  --info-surface: #E9F5FF;
  --info-stroke:  #D3ECFF;
  --warning:         #FFE500; /* pending — brand yellow */
  --warning-surface: #FFFDEB;
  --warning-stroke:  #FFF280;

  /* ---- Accents (secondary palette) ---- */
  --accent-orange: #FF6633;   /* rgb(255,102,51) */
  --accent-purple: #936DFF;   /* rgb(147,109,255) */

  /* ---- Semantic aliases (use these in product UI) ---- */
  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-600);
  --text-tertiary:  var(--grey-500);
  --text-placeholder: var(--grey-400);
  --text-on-brand:  var(--grey-900);   /* black text on yellow */
  --text-inverse:   var(--grey-0);

  --surface:        var(--grey-0);
  --surface-grey:   var(--grey-25);
  --surface-cream:  var(--cream);
  --surface-dark:   var(--grey-900);

  --border-light:   var(--grey-50);
  --border-dark:    var(--grey-200);
  --border-focus:   var(--brand-yellow);

  --icon-default:   var(--grey-900);
  --icon-muted:     #818898;   /* input icon — rgb(129,136,152) */
}