/* ============================================================
   L'origine du thé — Color tokens
   Sampled from the boutique: sage walls, celadon & qingbai
   glazes, indigo blue-and-white (青花), warm walnut, cream
   graph paper, ink cursive, and vermilion seal-red (印章).
   ============================================================ */

:root {
  /* ---------- Paper & ink (warm neutrals) ---------- */
  --paper-50:  #FDF9EC;   /* lightest card / lifted surface */
  --paper-100: #F7EDD8;   /* page background — warm sand-cream */
  --paper-200: #F0E4C8;   /* sunken wash */
  --paper-300: #E6D6B6;   /* hairline on paper */
  --paper-400: #D6C49B;   /* borders / graph-paper lines */

  --ink-900: #2A2723;     /* primary text — warm near-black */
  --ink-700: #4D483F;     /* strong secondary */
  --ink-500: #746D60;     /* secondary text */
  --ink-300: #9C9483;     /* muted / placeholder */

  /* ---------- Sage — primary brand (the calm wall) ---------- */
  --sage-900: #2C403C;
  --sage-800: #38534D;
  --sage-700: #466761;
  --sage-600: #5E7E79;    /* the boutique wall */
  --sage-500: #728E88;
  --sage-300: #A6BDB6;
  --sage-100: #DBE6E1;
  --sage-50:  #EDF2EF;

  /* ---------- Celadon — jade glaze (青瓷) ---------- */
  --celadon-700: #5B8E76;
  --celadon-600: #6FA088;
  --celadon-500: #8AB39C;   /* jade */
  --celadon-300: #B4D2C1;
  --celadon-100: #DCEBE2;

  /* ---------- Qingbai — pale ice-blue glaze ---------- */
  --qingbai-400: #AFD0CE;
  --qingbai-300: #C5DAD9;
  --qingbai-200: #D7E6E4;
  --qingbai-100: #E8F1F0;

  /* ---------- Indigo — blue & white porcelain (青花) ---------- */
  --indigo-900: #1A2E44;
  --indigo-700: #233C57;    /* porcelain navy */
  --indigo-500: #355C81;    /* cobalt */
  --indigo-300: #7B9BB8;
  --indigo-100: #D5E0EA;

  /* ---------- Cinnabar — seal red (印章 / 福) ---------- */
  --seal-800: #7C271E;
  --seal-700: #942E23;
  --seal-600: #B23A2E;      /* vermilion chop */
  --seal-300: #D98C82;
  --seal-100: #F0D9D4;

  /* ---------- Terracotta — Yixing clay (紫砂) ---------- */
  --clay-700: #87412E;
  --clay-600: #9C4A33;
  --clay-400: #BE7058;
  --clay-200: #E4C4B5;

  /* ---------- Gold — frames, 福 leaf (used sparingly) ---------- */
  --gold-600: #9C7838;
  --gold-500: #B08A4F;
  --gold-300: #D2B886;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components & kits
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--paper-100);
  --surface-card:      var(--paper-50);
  --surface-sunken:    var(--paper-200);
  --surface-ink:       var(--ink-900);    /* near-black sections */
  --surface-sage:      var(--sage-600);   /* primary brand fill */
  --surface-sage-deep: var(--sage-900);
  --surface-indigo:    var(--indigo-700); /* feature / night sections */
  --surface-celadon:   var(--celadon-100);
  --surface-qingbai:   var(--qingbai-200);

  /* Text */
  --text-strong:        var(--ink-900);
  --text-body:          var(--ink-700);
  --text-muted:         var(--ink-500);
  --text-faint:         var(--ink-300);
  --text-on-dark:       var(--paper-100);
  --text-on-dark-muted: #BFC9C4;
  --text-on-sage:       #F3F6F2;
  --text-on-indigo:     #E4ECF2;

  /* Brand & accents */
  --brand:           var(--sage-600);
  --brand-deep:      var(--sage-900);
  --accent-celadon:  var(--celadon-500);
  --accent-indigo:   var(--indigo-700);
  --accent-seal:     var(--seal-600);     /* primary actions, the chop */
  --accent-clay:     var(--clay-600);
  --accent-gold:     var(--gold-500);

  /* Lines, borders, grids */
  --border-soft:   var(--paper-300);
  --border:        var(--paper-400);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(243,246,242,0.18);
  --graph-line:    rgba(70,103,97,0.22);   /* graph-paper grid */
  --rule-ink:      rgba(42,39,35,0.14);

  /* States */
  --focus-ring:    var(--seal-600);
  --selection-bg:  var(--celadon-300);
  --selection-fg:  var(--ink-900);
}