:root {
   
  --art-noir-lunaire:  #05070E;
  --art-nuit:          #0A1628;
  --art-nuit-2:        #101F38;
  --art-nuit-3:        #22344F;
  --art-argent:        #C7D3E0;
  --art-blanc-lunaire: #F4F7FB;
  --art-cuivre-profond:#AD581A;
  --art-cuivre-fonce:  #C9611D;
  --art-cuivre:        #E07A2F;
  --art-cuivre-vif:    #FFB25E;

   
  --art-paper:        #FFFFFF;
  --art-mist-1:       #EDF0F4;
  --art-mist-2:       #E9ECF1;
  --art-mist-3:       #E7EAEF;
  --art-mist-4:       #DFE3E9;
  --art-slate-1:      #44505F;
  --art-slate-2:      #5A6675;
  --art-slate-3:      #8792A1;
  --art-rouge:        #B3261E;
  --art-rouge-clair:  #E4604F;
  --art-rouge-voile:  #FBE9E7;
  --art-cuivre-voile: #FDF0E4;
  --art-vert:         #28642F;
  --art-vert-mark:    #2E7D32;
  --art-vert-clair:   #5DBA61;
  --art-vert-voile:   #E6F0E8;
  --art-edge-light:   #748498;
  --art-edge-dark:    #647489;
  --art-cuivre-noir:  #8F4715;
  --art-cuivre-pale:  #FFC98A;

   
  --art-surface-page:     var(--art-blanc-lunaire);   
  --art-surface-card:     var(--art-blanc-lunaire);
  --art-surface-sunken:   var(--art-mist-1);
  --art-surface-chip:     var(--art-mist-2);
  --art-surface-inverse:  var(--art-nuit);
  --art-surface-document: var(--art-paper);           

  --art-text-display:    var(--art-noir-lunaire);     
  --art-text-primary:    var(--art-nuit);             
  --art-text-secondary:  var(--art-slate-1);          
  --art-text-muted:      var(--art-slate-2);          
  --art-text-link:       var(--art-cuivre-profond);   
  --art-text-link-hover: var(--art-cuivre-noir);      
  --art-text-on-accent:  var(--art-nuit);             
  --art-text-inverse:    var(--art-blanc-lunaire);

  --art-border-subtle:        var(--art-mist-3);
  --art-border-default:       var(--art-mist-4);
  --art-border-strong:        var(--art-nuit-3);
  --art-border-control:       var(--art-edge-light);  
  --art-border-control-hover: var(--art-nuit-3);

  --art-action-bg:          var(--art-cuivre);
  --art-action-bg-hover:    var(--art-cuivre-fonce);
  --art-action-bg-active:   var(--art-cuivre-fonce);
  --art-action-fg:          var(--art-nuit);          
  --art-action-bg-disabled: var(--art-mist-2);
  --art-action-fg-disabled: var(--art-slate-2);

  --art-focus-ring:   var(--art-nuit);
  --art-focus-offset: var(--art-surface-page);

  --art-status-verified-fg:   var(--art-vert);        
  --art-status-verified-mark: var(--art-vert-mark);
  --art-status-verified-bg:   var(--art-vert-voile);

   
  --art-echelle-critique:      var(--art-rouge);      
  --art-echelle-critique-bg:   var(--art-rouge);      
  --art-echelle-critique-fg:   var(--art-blanc-lunaire);
  --art-echelle-corriger:      var(--art-cuivre-fonce);  
  --art-echelle-corriger-bg:   var(--art-cuivre-voile);
  --art-echelle-corriger-fg:   var(--art-nuit);       
  --art-echelle-surveiller:    var(--art-nuit-3);     
  --art-echelle-surveiller-bg: var(--art-surface-chip);
  --art-echelle-surveiller-fg: var(--art-nuit);

  --art-shadow-overlay: 0 16px 40px -12px rgba(5, 7, 14, 0.28);
  --art-shadow-float:   0 24px 64px -24px rgba(5, 7, 14, 0.32);
  --art-shadow-glass:   inset 0 1px 0 rgba(244, 247, 251, 0.6), 0 12px 40px -20px rgba(5, 7, 14, 0.25);

  

  --art-glass-bg:        rgba(10, 22, 40, 0.04);
  --art-glass-bg-strong: rgba(10, 22, 40, 0.07);
  

  --art-glass-bg-dense:  rgba(244, 247, 251, 0.92);
  --art-glass-border:    rgba(10, 22, 40, 0.12);
  --art-glass-highlight: rgba(244, 247, 251, 0.7);
  --art-glass-blur:      18px;

  

  --art-light-x: 72%;
  --art-light-y: 18%;
  --art-light-copper: rgba(224, 122, 47, 0.10);
  --art-light-argent: rgba(199, 211, 224, 0.06);
  --art-light-field:
    radial-gradient(60vmax 60vmax at var(--art-light-x) var(--art-light-y), var(--art-light-copper), transparent 60%),
    radial-gradient(48vmax 48vmax at calc(100% - var(--art-light-x)) calc(100% - var(--art-light-y)), var(--art-light-argent), transparent 60%);
  --art-copper-glow: 0 0 24px rgba(255, 178, 94, 0.45);
  --art-light-hatch: repeating-linear-gradient(135deg, transparent 0 6px, rgba(10, 22, 40, 0.06) 6px 7px);

   
  --art-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --art-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  

  --art-font-mono:    ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --art-type-display:     clamp(44px, 6.6vw, 96px);    
  --art-type-h1:          clamp(38px, 5vw, 68px);
  --art-type-h2:          clamp(32px, 4vw, 54px);
  --art-type-h3:          clamp(24px, 2.4vw, 30px);
  --art-type-h4:          clamp(19px, 1.6vw, 21px);
  --art-type-figure:      clamp(56px, 8.4vw, 120px);    
  --art-type-figure-sm:   clamp(36px, 4.4vw, 60px);
  --art-type-lede:        clamp(19px, 1.7vw, 22px);
  --art-type-body-lg:     clamp(18px, 1.5vw, 19px);
  --art-type-body:        17px;
  --art-type-data:        16px;
  --art-type-label:       15px;
  --art-type-caption:     14px;
  --art-type-overline:    clamp(12px, 1vw, 13px);
  --art-type-micro:       13px;

  --art-lh-display: 0.98;  --art-lh-h1: 1.02;   --art-lh-h2: 1.06;
  --art-lh-h3: 1.18;       --art-lh-h4: 1.25;   --art-lh-lede: 1.4;
  --art-lh-figure: 0.9;
  --art-lh-body: 1.6;      --art-lh-data: 1.5;  --art-lh-caption: 1.53;
  --art-lh-overline: 1.33; --art-lh-label: 1.4; --art-lh-micro: 1.45;

  

  --art-weight-display: 700;
  --art-weight-heading: 700;
  --art-weight-sub:     500;

  --art-track-display: -0.035em;
  --art-track-h1:      -0.03em;
  --art-track-h2:      -0.025em;
  --art-track-figure:  -0.04em;
  --art-track-overline: 0.11em;

  --art-measure-prose: 68ch;
  --art-measure-dense: 52ch;

   
  --art-space-1: 4px;   --art-space-2: 8px;   --art-space-3: 12px;
  --art-space-4: 16px;  --art-space-5: 24px;  --art-space-6: 32px;
  --art-space-7: 48px;  --art-space-8: 64px;  --art-space-9: 96px;
  --art-space-10: 128px; --art-space-11: 160px;

   
  --art-grid-columns: 12;
  --art-grid-gutter: 24px;
  --art-container-max:   1200px;
  --art-container-wide:  1360px;
  --art-container-prose:  720px;
  --art-page-margin: 24px;

   
  --art-radius-0: 0;       
  --art-radius-1: 2px;     
  --art-radius-2: 4px;     
  --art-radius-tile: 13%;  
  --art-radius-dot: 50%;   
  

  --art-radius-3: 10px;
  --art-radius-pill: 999px;

  --art-border-hair: 1px;
  --art-border-emphasis: 2px;
  --art-border-bar: 3px;
  --art-touch-min: 44px;   

   
  --mo-d-tap:        90ms;
  --mo-d-quick:     140ms;
  --mo-d-base:      220ms;    
  --mo-d-considered:320ms;
  --mo-d-long:      480ms;
  --mo-d-read:      700ms;    
  --mo-d-draw:     1400ms;    
  --mo-d-scene:    2400ms;    
  --mo-d-ambient:    28s;     

  --mo-e-enter:  cubic-bezier(0, 0, 0.2, 1);
  --mo-e-exit:   cubic-bezier(0.4, 0, 1, 1);
  --mo-e-move:   cubic-bezier(0.4, 0, 0.2, 1);
  --mo-e-settle: cubic-bezier(0.16, 1, 0.3, 1);   
  --mo-e-scrub:  linear;
  --mo-e-draw:   cubic-bezier(0.65, 0, 0.35, 1);    
  --mo-e-out:    cubic-bezier(0.22, 1, 0.36, 1);    

  --mo-x-hair:  4px;
  --mo-x-short: 8px;
  --mo-x-base: 12px;    
  --mo-x-long: 16px;
  --mo-x-max:  24px;    
  --mo-x-line: 1.1em;   

  --mo-s-tight: 40ms;
  --mo-s-base:  60ms;
  --mo-s-wide:  90ms;
  --mo-delay-guard: 80ms;   
}

@media (min-width: 600px)  { :root { --art-page-margin: 32px; } }
@media (min-width: 1024px) { :root { --art-page-margin: 48px; } }
@media (max-width: 599px)  { :root { --art-grid-gutter: 16px; } }

 
:root[data-theme="dark"],
.art-inverse {
  --art-surface-page:     var(--art-nuit);
  --art-surface-card:     var(--art-nuit-2);
  --art-surface-sunken:   var(--art-noir-lunaire);
  --art-surface-chip:     var(--art-nuit-3);
  --art-surface-inverse:  var(--art-blanc-lunaire);
  --art-surface-document: var(--art-paper);    

  --art-text-display:    var(--art-blanc-lunaire);
  --art-text-primary:    var(--art-blanc-lunaire);
  --art-text-secondary:  var(--art-argent);
  --art-text-muted:      var(--art-slate-3);
  --art-text-link:       var(--art-cuivre-vif);
  --art-text-link-hover: var(--art-cuivre-pale);
  --art-text-inverse:    var(--art-nuit);

  --art-border-subtle:        #16253C;
  --art-border-default:       var(--art-nuit-3);
  --art-border-strong:        var(--art-argent);
  --art-border-control:       var(--art-edge-dark);
  --art-border-control-hover: var(--art-argent);

  --art-action-bg-disabled: var(--art-nuit-3);
  --art-action-fg-disabled: var(--art-slate-3);

  --art-focus-ring:   var(--art-blanc-lunaire);
  --art-focus-offset: var(--art-surface-page);

  --art-status-verified-fg:   var(--art-vert-clair);
  --art-status-verified-mark: var(--art-vert-clair);
  --art-status-verified-bg:   transparent;

  --art-echelle-critique:      var(--art-rouge-clair);
  --art-echelle-critique-bg:   transparent;
  --art-echelle-critique-fg:   var(--art-blanc-lunaire);
  --art-echelle-corriger:      var(--art-cuivre);
  --art-echelle-corriger-bg:   transparent;
  --art-echelle-corriger-fg:   var(--art-blanc-lunaire);
  --art-echelle-surveiller:    var(--art-argent);
  --art-echelle-surveiller-bg: transparent;
  --art-echelle-surveiller-fg: var(--art-blanc-lunaire);

  --art-shadow-overlay: 0 16px 40px -12px rgba(5, 7, 14, 0.64);
  --art-shadow-float:   0 32px 80px -32px rgba(5, 7, 14, 0.9);
  --art-shadow-glass:   inset 0 1px 0 rgba(244, 247, 251, 0.10), 0 24px 64px -32px rgba(5, 7, 14, 0.8);

  --art-glass-bg:        rgba(244, 247, 251, 0.045);
  --art-glass-bg-strong: rgba(244, 247, 251, 0.08);
  --art-glass-bg-dense:  rgba(10, 22, 40, 0.92);
  --art-glass-border:    rgba(199, 211, 224, 0.16);
  --art-glass-highlight: rgba(244, 247, 251, 0.12);

  --art-light-copper: rgba(224, 122, 47, 0.16);
  --art-light-argent: rgba(199, 211, 224, 0.05);
}

 
.art-light {
  --art-surface-page:     var(--art-blanc-lunaire);
  --art-surface-card:     var(--art-blanc-lunaire);
  --art-surface-sunken:   var(--art-mist-1);
  --art-surface-chip:     var(--art-mist-2);
  --art-surface-inverse:  var(--art-nuit);
  --art-text-display:    var(--art-noir-lunaire);
  --art-text-primary:    var(--art-nuit);
  --art-text-secondary:  var(--art-slate-1);
  --art-text-muted:      var(--art-slate-2);
  --art-text-link:       var(--art-cuivre-profond);
  --art-text-link-hover: var(--art-cuivre-noir);
  --art-text-inverse:    var(--art-blanc-lunaire);
  --art-border-subtle:        var(--art-mist-3);
  --art-border-default:       var(--art-mist-4);
  --art-border-strong:        var(--art-nuit-3);
  --art-border-control:       var(--art-edge-light);
  --art-border-control-hover: var(--art-nuit-3);
  --art-action-bg-disabled: var(--art-mist-2);
  --art-action-fg-disabled: var(--art-slate-2);
  --art-focus-ring:   var(--art-nuit);
  --art-focus-offset: var(--art-surface-page);
  --art-status-verified-fg:   var(--art-vert);
  --art-status-verified-mark: var(--art-vert-mark);
  --art-status-verified-bg:   var(--art-vert-voile);
  --art-echelle-critique:      var(--art-rouge);
  --art-echelle-critique-bg:   var(--art-rouge);
  --art-echelle-critique-fg:   var(--art-blanc-lunaire);
  --art-echelle-corriger:      var(--art-cuivre-fonce);
  --art-echelle-corriger-bg:   var(--art-cuivre-voile);
  --art-echelle-corriger-fg:   var(--art-nuit);
  --art-echelle-surveiller:    var(--art-nuit-3);
  --art-echelle-surveiller-bg: var(--art-surface-chip);
  --art-echelle-surveiller-fg: var(--art-nuit);
  --art-shadow-overlay: 0 16px 40px -12px rgba(5, 7, 14, 0.28);
  --art-shadow-float:   0 24px 64px -24px rgba(5, 7, 14, 0.32);
  --art-shadow-glass:   inset 0 1px 0 rgba(244, 247, 251, 0.6), 0 12px 40px -20px rgba(5, 7, 14, 0.25);
  --art-glass-bg:        rgba(10, 22, 40, 0.04);
  --art-glass-bg-strong: rgba(10, 22, 40, 0.07);
  --art-glass-bg-dense:  rgba(244, 247, 251, 0.92);
  --art-glass-border:    rgba(10, 22, 40, 0.12);
  --art-glass-highlight: rgba(244, 247, 251, 0.7);
  --art-light-copper: rgba(224, 122, 47, 0.10);
  --art-light-argent: rgba(199, 211, 224, 0.06);
}