:root {
  
  --px: 2px;
  --tile: 32px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  

  
  --ink-900: #382C24;   
  --ink-700: #5A483C;   
  --ink-500: #71594A;   
  --ink-300: #927F6E;   
  

  
  --cream-050: #FBF8F2;  
  --cream-100: #F7F3EB;  
  --cream-200: #EFE7DA;  
  --cream-300: #E4D8C8;  
  --cream-400: #D5C6B2;  

  
  --oak-100: #DCC3A3;
  --oak-300: #C6A47D;   /* LIGHT OAK */
  --oak-500: #967256;   /* MID WOOD */
  --oak-700: #6B513C;
  --oak-900: #4F3D30;   

  
  --apricot-100: #F0CBAB;
  --apricot-300: #D9A278;  /* SOFT APRICOT */
  --apricot-500: #BF7F4E;
  --apricot-700: #945C33;

  
  --brass-100: #E3CCA2;
  --brass-300: #C9A878;
  --brass-500: #B18A55;   /* BRASS */
  --brass-700: #86653A;

  
  --sage-100: #D2DACB;
  --sage-300: #AAB4A1;   /* MUTED SAGE */
  --sage-500: #7E8C74;
  --sage-700: #566049;

  
  --frost-100: #E2EAE9;
  --frost-300: #C7D4D2;  /* SOFT FROST */
  --frost-500: #91A6A4;
  --frost-700: #5E7372;

  
  --berry-100: #DFBCBC;
  --berry-300: #A86F70;  /* MUTED BERRY */
  --berry-500: #8A4F50;
  --berry-700: #5F3435;

  
  --brand-line: #06C755;
  --brand-line-lo: #05A84B;
  --brand-line-hi: #3BD37F;

  
  --gate-in: 18px;
  --gate-arch: 111px;
  --gate-thr: 21px;
  --tabs-h: 96px;
  --glint: none;       
  --c: 0;              
  --r: 0;              

  

  --bg-app: var(--cream-300);     
  --bg-room: var(--cream-100);    
  --bg-card: var(--cream-050);    
  --bg-sunken: var(--cream-300);  
  

  --fg: var(--ink-900);
  --fg-soft: var(--ink-500);
  --fg-dim: var(--ink-300);
  --fg-on-oak: var(--cream-050);  

  
  --action: var(--apricot-300);   
  --action-hi: var(--apricot-100);
  --action-lo: var(--apricot-500);
  --on-action: var(--ink-900);

  --done: var(--sage-300);        
  --done-hi: var(--sage-100);
  --done-lo: var(--sage-500);
  --on-done: var(--ink-900);

  --rest: var(--frost-300);       
  --rest-hi: var(--frost-100);
  --rest-lo: var(--frost-500);
  --on-rest: var(--ink-900);

  
  --warn: var(--berry-500);
  --warn-hi: var(--berry-300);
  --warn-lo: var(--berry-700);
  --on-warn: var(--cream-050);

  --line: var(--cream-400);       
  --line-strong: var(--oak-900);  

  

  
  --scene-wash: transparent;
  --scene-tint: var(--cream-200);
  --scene-window: var(--frost-100);   
}






[data-time="morning"] {
  --scene-wash: linear-gradient(170deg,
      rgba(251,248,242,.50) 0%,  rgba(251,248,242,.50) 26%,
      rgba(251,248,242,.22) 26%, rgba(251,248,242,.22) 52%,
      transparent 52%);
  --scene-window: #EDF3F1;
}


[data-time="day"] {
  --scene-wash: transparent;
  --scene-window: var(--frost-100);
}


[data-time="rain"] {
  --scene-wash: linear-gradient(180deg,
      rgba(145,166,164,.16) 0%,  rgba(145,166,164,.16) 48%,
      rgba(145,166,164,.08) 48%, rgba(145,166,164,.08) 100%);
  --scene-window: var(--frost-300);
}


[data-time="evening"] {
  --scene-wash: radial-gradient(46% 30% at 80% 14%,
                  rgba(217,162,120,.22) 0%,  rgba(217,162,120,.22) 34%,
                  rgba(217,162,120,.11) 34%, rgba(217,162,120,.11) 62%,
                  rgba(217,162,120,.04) 62%, rgba(217,162,120,.04) 84%,
                  transparent 84%);
  --scene-window: #8E9BA3;
}



[data-season="spring"] { --scene-tint: #F2EADB; }  
[data-season="summer"] { --scene-tint: #EFEFE4; }  
[data-season="autumn"] { --scene-tint: #EBDCC6; }  
[data-season="winter"] { --scene-tint: #EDEBE4; }  


:root {
  
  --dither-15: repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(56,44,36,.15) 0deg 90deg,
      transparent 90deg 180deg) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);
  --dither-30: repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(56,44,36,.30) 0deg 90deg,
      transparent 90deg 180deg) 0 0 / calc(var(--px) * 2) calc(var(--px) * 2);

  
  --tex-wall: repeating-linear-gradient(180deg,
      var(--cream-100) 0 calc(var(--px) * 7),
      var(--cream-050) calc(var(--px) * 7) calc(var(--px) * 8));

  
  --tex-floor: repeating-linear-gradient(90deg,
      var(--oak-100) 0 calc(var(--px) * 11),
      var(--oak-300) calc(var(--px) * 11) calc(var(--px) * 12));

  
  --tex-rug: repeating-linear-gradient(90deg,
      var(--cream-300) 0 calc(var(--px) * 3),
      var(--cream-400) calc(var(--px) * 3) calc(var(--px) * 4));

  
  --tex-linen: repeating-linear-gradient(90deg,
      var(--cream-050) 0 var(--px),
      var(--cream-200) var(--px) calc(var(--px) * 2));
}


:root {
  --fs-scale: 1;

  --fs-hero: 30px;                             
  --fs-h1: calc(22px * var(--fs-scale));       
  --fs-h2: calc(18px * var(--fs-scale));       
  --fs-dialogue: calc(18px * var(--fs-scale)); 
  --fs-body: calc(16px * var(--fs-scale));
  --fs-small: calc(14px * var(--fs-scale));
  --fs-micro: calc(12px * var(--fs-scale));    

  --fs-num: 18px;      
  --fs-num-lg: 26px;

  --lh-tight: 1.3;
  --lh-body: 1.8;      
  --lh-dialogue: 2;    
}

[data-fontsize="small"]  { --fs-scale: .9; }
[data-fontsize="large"]  { --fs-scale: 1.15; }


:root {
  
  --shadow-1: drop-shadow(var(--px) var(--px) 0 rgba(79,61,48,.22));
  --shadow-2: drop-shadow(calc(var(--px) * 2) calc(var(--px) * 2) 0 rgba(79,61,48,.26));

  --ease-step: steps(3, end);
  --t-fast: 90ms;
  --t-base: 160ms;
  --t-slow: 420ms;   

  --app-max: 420px;
  --bar-top: 56px;
  --bar-tab: 64px;
  --touch: 48px;     

  
  --scene-h: 300px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}