:root {
  
  --code-fire:  #ff000a;
  --code-water: #007eff;
  --code-wind:  #00ff23;
  --code-elec:  #ff00ff;
  --code-iron:  #ffa910;
  
  --heart: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23000%27 d=%27M12 20.7 10.6 19.4C5.4 14.6 2 11.5 2 7.9 2 5 4.4 2.6 7.3 2.6c1.7 0 3.2.8 4.2 2 1-1.2 2.5-2 4.2-2C18.6 2.6 21 5 21 7.9c0 3.6-3.4 6.7-8.6 11.5z%27/%3E%3C/svg%3E");
  
  --funnel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23000%27 d=%27M2 3h20l-8 9v9l-4-2v-7Z%27/%3E%3C/svg%3E");
  
  --color-stage:        oklch(21% 0.006 260);
  --color-stage-2:      oklch(26% 0.008 260);
  --color-stage-3:      oklch(32% 0.010 260);
  --color-stage-ink:    oklch(96% 0.004 250);
  --color-stage-ink-2:  oklch(72% 0.010 255);
  --color-stage-line:   oklch(38% 0.012 260);

  --color-roster:       oklch(97% 0.003 250);
  --color-roster-2:     oklch(93% 0.005 250);
  --color-roster-ink:   oklch(24% 0.010 260);
  --color-roster-ink-2: oklch(52% 0.012 258);
  --color-roster-line:  oklch(86% 0.006 252);

  
  --color-accent:       oklch(70% 0.145 235);
  --color-accent-deep:  oklch(56% 0.150 240);
  --color-accent-soft:  oklch(70% 0.145 235 / 0.16);
  --color-accent-ink:   var(--color-stage);
  --color-amber:        oklch(80% 0.130 85);
  --color-amber-deep:   oklch(66% 0.135 72);
  
  --color-lab:          oklch(84% 0.160 92);
  --color-lab-ink:      var(--color-stage);
  --color-magenta:      oklch(58% 0.215 320);   
  --color-museum:       oklch(82% 0.125 90);    
  --color-alert:        oklch(58% 0.200 25);    
  --color-ok:           oklch(72% 0.150 150);
  --color-info:         oklch(74% 0.120 195);   

  
  --color-dororong-paper:     oklch(99% 0.006 5);
  --color-dororong-paper-2:   oklch(97% 0.012 5);
  --color-dororong-pink:      oklch(70% 0.200 355);
  --color-dororong-pink-deep: oklch(54% 0.220 355);
  --color-dororong-ink:       oklch(22% 0.006 5);

  
  
  --color-cp-stage:   oklch(98% 0.004 290);
  --color-cp-stage-2: oklch(93% 0.014 292);
  --color-cp-stripe:  oklch(86% 0.032 292 / 0.75);
  --color-cp:        oklch(95% 0.004 250);
  
  --color-cp-veil:   oklch(95% 0.004 250 / 0.62);
  --color-cp-2:      oklch(90% 0.005 250);
  --color-cp-3:      oklch(85% 0.007 252);
  --color-cp-ink:    oklch(22% 0.010 260);
  --color-cp-ink-2:  oklch(46% 0.012 258);
  --color-cp-line:   oklch(76% 0.008 252);
  --color-cp-fill:   oklch(22% 0.010 260 / 0.06);
  --color-cp-fill-2: oklch(22% 0.010 260 / 0.14);
  
  --color-cp-chip:      oklch(26% 0.008 260);
  --color-cp-chip-line: oklch(40% 0.012 260);
  --color-cp-chip-ink:  oklch(96% 0.004 250);
  
  --color-cp-accent:    oklch(38% 0.150 248);
  --color-cp-amber:     oklch(45% 0.130  60);   
  --color-cp-grade-r:   oklch(40% 0.130 238);
  --color-cp-grade-sr:  oklch(40% 0.200 305);
  --color-cp-grade-ssr: oklch(42% 0.140  50);

  
  --color-ovl-glow:      oklch(62% 0.240 358 / 0.35);   
  --color-ovl-plate:     oklch(18% 0.015 260 / 0.82);   
  --color-ovl-blue:      oklch(38% 0.150 250);   
  --color-ovl-black:     oklch(17% 0.020 260);
  --color-ovl-label-fg:  oklch(95% 0.005 250);   
  --color-ovl-blue-ink:  oklch(93% 0.030 235);   
  --color-ovl-black-ink: oklch(78% 0.140 232);

  
  --cat-attacker:  oklch(66% 0.135  72);   
  --cat-defender:  oklch(62% 0.150 245);   
  --cat-supporter: oklch(64% 0.140 150);   

  
  
  --color-grade-r:      #30c4fd;
  --color-grade-sr:     #aa31e7;
  --color-grade-ssr:    #ff7403;
  
  --color-item-light:   oklch(96% 0.004 250);
  --color-item-dark:    oklch(21% 0.006 260);

  
  --color-code-fire:    oklch(62% 0.190  35);
  --color-code-water:   oklch(66% 0.140 240);
  --color-code-wind:    oklch(70% 0.140 155);
  --color-code-elect:   oklch(62% 0.180 300);
  --color-code-iron:    oklch(78% 0.120  95);

  
  --font-display: "Chakra Petch", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --font-body:    "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-num:     "Chakra Petch", ui-monospace, monospace;

  --text-xs:    0.6875rem;  
  --text-sm:    0.8125rem;  
  --text-base:  0.9375rem;  
  --text-lg:    1.125rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-num:   1.5rem;     
  --text-num-l: 2rem;       

  --track-label: 0.14em;    
  --track-tight: -0.01em;

  
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  
  --chamfer:    10px;   
  --chamfer-sm:  6px;   
  --radius-hair: 2px;   
  --rule:       1px;
  --rule-bold:  2px;

  
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 320ms;
  --dur-dororong-hop: 440ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --focus-ring: var(--color-accent);
  --z-dororong: 50;
}


@media (prefers-color-scheme: dark) {
  :root {
    --color-roster:       oklch(27% 0.007 260);
    --color-roster-2:     oklch(32% 0.009 260);
    --color-roster-ink:   oklch(94% 0.004 250);
    --color-roster-ink-2: oklch(70% 0.010 255);
    --color-roster-line:  oklch(40% 0.012 260);
  }
}




:root[data-mode="union"] {
  --color-stage:        oklch(17% 0.040 305);
  --color-stage-2:      oklch(22% 0.050 303);
  --color-stage-3:      oklch(28% 0.055 302);
  --color-stage-ink:    oklch(96% 0.010 320);
  --color-stage-ink-2:  oklch(74% 0.035 315);
  --color-stage-line:   oklch(40% 0.060 305);

  --color-accent:       oklch(74% 0.190 330);
  --color-accent-deep:  oklch(58% 0.200 335);
  --color-accent-soft:  oklch(74% 0.190 330 / 0.18);

  
  --union-grid:  oklch(74% 0.190 330 / 0.07);
  --union-veil:  oklch(30% 0.090 320 / 0.55);
}


:root[data-mode="museum"] {
  --color-stage:        oklch(18% 0.012 60);
  --color-stage-2:      oklch(23% 0.014 60);
  --color-stage-3:      oklch(29% 0.016 60);
  --color-stage-ink:    oklch(96% 0.012 85);
  --color-stage-ink-2:  oklch(74% 0.022 80);
  --color-stage-line:   oklch(40% 0.022 65);

  --color-accent:       var(--color-museum);
  --color-accent-deep:  oklch(66% 0.125 82);
  
  --color-accent-soft:  oklch(82% 0.125 90 / 0.09);
  --color-amber:        oklch(72% 0.055 62);
  --color-amber-deep:   oklch(60% 0.060 58);
  
  --color-lab:          oklch(78% 0.105 90);
  --color-lab-ink:      var(--color-stage);
}


:root[data-mode="arena"] {
  --color-stage:        oklch(16% 0.010 265);
  --color-stage-2:      oklch(21% 0.012 265);
  --color-stage-3:      oklch(27% 0.014 265);
  --color-stage-ink:    oklch(96% 0.006 265);
  --color-stage-ink-2:  oklch(73% 0.012 265);
  --color-stage-line:   oklch(38% 0.016 265);

  --color-accent:       oklch(69% 0.195 20);
  --color-accent-deep:  oklch(56% 0.200 22);
  
  --color-accent-soft:  oklch(69% 0.195 20 / 0.10);

  
  --arena-foe:   oklch(69% 0.195 20);
  --arena-mine:  oklch(76% 0.115 235);
}



:root[data-dororong="on"][data-mode] {
  --color-stage:        var(--color-dororong-paper);
  --color-stage-2:      var(--color-dororong-paper-2);
  --color-stage-3:      oklch(94% 0.030 5);
  --color-stage-ink:    var(--color-dororong-ink);
  --color-stage-ink-2:  oklch(44% 0.006 5);
  --color-stage-line:   oklch(86% 0.045 5);

  --color-roster:       var(--color-dororong-paper);
  --color-roster-2:     oklch(97% 0.012 5);
  --color-roster-ink:   var(--color-dororong-ink);
  --color-roster-ink-2: oklch(46% 0.006 5);
  --color-roster-line:  oklch(89% 0.028 5);

  --color-accent:       var(--color-dororong-pink);
  --color-accent-deep:  var(--color-dororong-pink-deep);
  --color-accent-soft:  oklch(70% 0.200 355 / 0.14);
  --color-accent-ink:   var(--color-dororong-ink);
  
  --arena-foe:          oklch(56% 0.200 20);
  --arena-mine:         oklch(52% 0.150 245);
  --color-amber:        oklch(62% 0.180 355);
  --color-amber-deep:   oklch(48% 0.200 355);
  
  --color-lab:          oklch(88% 0.125 95);
  --color-lab-ink:      var(--color-stage-ink);
  --focus-ring:         var(--color-dororong-pink-deep);
}