:root {
  
  --page-max: 1440px;

  
  --font: "canada-type-gibson", Arial, Helvetica, sans-serif;

  
  --fs-h1: 31px;
  --fs-h2: 19px;
  --fs-lead: 18px;
  --fs-body: 17px;
  --fs-ui: 17px;
  --fs-label: 12.5px;  
  --fs-micro: 13px;    

  --lh-body: 1.45;
  --lh-tight: 1.2;

  --tracking-wide: 0.18em;   
  --tracking-ui: 0.02em;

  
  
  --cell: 105px;
  --cols: 10;          
  --gutter-cols: 1;    

  --frame-inset: 50px; 
  --crop-len: 25px;    
  --crop-gap: 5px;     

  --hairline: 1px;
  --rule: 2px;         

  --ruler-band: 40px;  
  --tick-minor: 5px;
  --tick-major: 11px;
  --tick-per-cell: 9;  

  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

:root,
[data-theme="paper"] {
  --bg: #e6e6d8;         
  --bg-panel: #f7f7e8;   
  --bg-modal: #ffffff;

  --ink: #01362f;        
  --ink-head: #01473d;   
  --ink-body: #493c33;   
  --ink-reverse: #e7e8ce;

  --grid-line: #b3bcb2;
  --grid-line-strong: #8fa096;
  --accent: #ef530e;     
  
  --warn: #d0021b;
  
  --notice: #1257c9;
  
  --ink-margin: #2a4ba8;
  
  --hover: #ef530e;

  --btn-face: #ffffff;
  --btn-face-ink: var(--ink-body);
  --btn-solid: var(--ink);
  --btn-solid-ink: var(--ink-reverse);

  --field-line: rgba(73, 60, 51, 0.45);
  --shadow-modal: 0 2px 40px rgba(1, 54, 47, 0.10);
}

[data-theme="mat"] {
  --bg: #24703a;
  --bg-panel: #297f3f;
  --bg-modal: #ffffff;   

  --ink: #fff800;
  --ink-head: #fff800;
  --ink-body: #fff800;
  --ink-reverse: #24703a;

  --grid-line: #b9c60a;
  --grid-line-strong: #d3dd0c;
  --accent: #fff800;
  
  --hover: #ffffff;
  
  --notice: #ffffff;
  --ink-margin: #ffffff;

  --btn-face: transparent;
  --btn-face-ink: #fff800;
  --btn-solid: #fff800;
  --btn-solid-ink: #24703a;

  --field-line: rgba(255, 248, 0, 0.55);
  --shadow-modal: 0 2px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1100px) { :root { --cols: 10; --gutter-cols: 0; --frame-inset: 40px; } }
@media (max-width: 860px)  { :root { --cols: 5;  --gutter-cols: 1; --frame-inset: 32px; } }

@media (max-width: 767px)  { :root { --cols: 4;  --gutter-cols: 1; } }

@media (max-width: 620px)  { :root { --gutter-cols: 0; --frame-inset: 24px;
                                     --tick-minor: 4px; --tick-major: 9px; } }
@media (max-width: 420px)  { :root { --frame-inset: 20px; } }