/* ============================================================
   Design tokens — 1:1 with the app's AppTheme.swift (dev).
   The one law: affect color appears ONLY as light the visitor
   earned. Chrome is strictly achromatic. Never violet #7B61FF.
   ============================================================ */

:root {
  /* --- Backgrounds (AppColors) ------------------------------ */
  --bg:        #000000;   /* Backgrounds / App                  */
  --card:      #232323;   /* Backgrounds / Card                 */
  --cell:      #232323;   /* Affect Grid / Cell Inactive        */
  --textarea:  #131313;   /* Backgrounds / TextArea             */
  --sheet:     #0b0b0b;   /* daySheetBackground                 */
  --hair:      rgba(255, 255, 255, 0.08);
  --hair-2:    rgba(255, 255, 255, 0.14);

  /* --- Text (AppColors) ------------------------------------- */
  --text:      #ffffff;   /* Text / Primary                     */
  --text-2:    #898989;   /* Text / Secondary                   */
  --text-3:    #575757;   /* borderSubtle — whisper copy        */
  --btn-label: #1A1A1A;   /* Liquid Glass button text           */
  --border:    #404040;   /* bordersDefault                     */

  /* --- Affect palette (AppColors — light only, never chrome)  */
  --pink:      #F7717D;   /* pleasantHigh */
  --orange:    #F38816;   /* energyHigh   */
  --blue:      #5386E4;   /* energyLow    */
  --umber:     #645854;   /* pleasantLow  */
  --seed:      #FF826B;   /* cellGlow — pre-ink accent          */

  /* --- Ink (set live by hero.js on commit) ------------------ */
  --ink:       var(--seed);
  --ink-soft:  rgba(255, 130, 107, 0.30);
  --ink-faint: rgba(255, 130, 107, 0.16);

  /* --- Type: SF only, sentence case, Joi poster metrics ------ */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Segoe UI', 'Helvetica Neue', sans-serif;
  --t-display: clamp(46px, 8.4vw, 108px);  /* the one sentence  */
  --t-statement: clamp(22px, 3vw, 36px);   /* manifesto paras   */
  --t-body:  17px;
  --t-nav:   15px;
  --t-micro: 12px;

  /* --- Spacing (AppSpacing, px = pt) ------------------------- */
  --s-grid-gap:   4px;    /* xs — grid large cell gap           */
  --s-grid-label: 24px;   /* xxl — grid-to-label                */
  --s-screen-pad: 32px;   /* xxxl — screen horizontal padding   */
  --s-section:    48px;   /* section                            */
  --s-checkin:    64px;   /* sectionCheckIn                     */
  --s-home:       84px;   /* sectionHome                        */

  /* --- Shape (AppCornerRadius) -------------------------------- */
  --r-cell-ratio: 0.327;  /* gridCellCornerRadiusRatio 17/52    */
  --r-card: 24px;
  --r-pill: 999px;

  /* --- Motion -------------------------------------------------- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ink-time: 1.3s;
}