/* v3 n3 — colour. Loads after v3-structure.css.
   Light: the porcelain / graphite / brass identity is unchanged. The only light-mode edit is that the two raw
   shadow colours in g.css now come from tokens with the same values, so dark mode can remap them.
   Dark (prefers-color-scheme): "night reading", built from the brand's own graphites, not inverted cream.
     ground #131518 (--deep-2), stone band #1B1D21 (--deep), graphite statement band #30333A (--deep-hover).
     Text is warm porcelain (#ECE8DF), not cool white. Brass stays the single accent: rules, numerals and the
     button matte; brass *text* uses --deep-accent. The primary action is filled with porcelain, the way it
     already is on the graphite band in light mode. Contrast table: notes/v3-n3-color.md. */
:root{
  --shadow-menu:0 12px 32px rgba(27,29,33,.12);
  --shadow-float:0 12px 32px rgba(27,29,33,.18);
}
.me-menu{box-shadow:var(--shadow-menu)}
.kakao{box-shadow:0 0 0 1px var(--accent),var(--shadow-float)}

/* theme: follows the system unless the header toggle stored a choice (data-theme on <html>) */
:root[data-theme=light]{color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;               /* native file button, scrollbars, form text */
    --night-body:#C8C2B6;            /* porcelain #ECE8DF / --soft toned to the ground: long-read body, 11.0:1 */
    --night-muted:#A7A39A;           /* labels and captions, 7.3:1 on ground, 5.0:1 even on #30333A */
    --surface:var(--deep-2);
    --surface-band:var(--deep);
    --surface-dark:var(--deep);      /* header, footer, floating consult */
    --text:var(--paper);
    --text-body:var(--night-body);
    --text-muted:var(--night-muted);
    --text-on-dark:var(--paper);
    --text-on-dark-muted:var(--night-body);
    --rule:var(--deep-line);
    --rule-dark:var(--deep-line);
    --line:rgba(236,232,223,.10);    /* photo hairline: a faint porcelain edge instead of a dark one */
    --main-dark:var(--deep-accent);  /* brass text */
    --main-tint:#3A3326;             /* brass tint as a dark chip (placeholder .fill) */
    --shadow-menu:0 12px 32px rgba(0,0,0,.5);
    --shadow-float:0 12px 32px rgba(0,0,0,.55);}
  :where(:root:not([data-theme=light])){
  /* the graphite statement band sits one step above the ground so it still reads as a band */
  .dark{background:var(--deep-hover)}

  /* primary action: porcelain fill, graphite text, brass matte kept. !important because make/process carry
     an inline background:var(--surface) on the band button, which would turn into a ground-coloured hole */
  .btn:not(.ghost):not(.apply){background:var(--paper)!important;color:var(--deep-2)!important}
  @media (hover:hover){.btn:not(.ghost):not(.apply):hover{background:var(--paper-card)!important}}

  /* rules that fill with the (now light) text colour need dark lettering */
  @media (hover:hover){
    .btn-line:hover,.btn.ghost:hover,.top .btn-line:hover,.dark .btn-line:hover,.scta .btn.ghost:hover{color:var(--deep-2)}
  }
  .top .btn-line.apply{color:var(--deep-2)}
  @media (hover:hover){.top .btn-line.apply:hover{color:var(--text-on-dark)}}
  .fill{color:var(--text)}

  /* photographs: same grayscale, about 10% dimmer so they do not glow on the night ground */
  .plate img{filter:grayscale(1) contrast(1.03) brightness(.9)}
  .team-plate img{filter:grayscale(1) contrast(1.03) brightness(.9)}

  /* table scroll cue: the edge shadow is black on the night ground (v3-structure tints it with --ink) */
  .table-wrap{background:
    linear-gradient(to right,var(--surface) 40%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 40%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.6),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),transparent) right center/14px 100% no-repeat scroll}
}
}
:root[data-theme=dark]{
    color-scheme:dark;               /* native file button, scrollbars, form text */
    --night-body:#C8C2B6;            /* porcelain #ECE8DF / --soft toned to the ground: long-read body, 11.0:1 */
    --night-muted:#A7A39A;           /* labels and captions, 7.3:1 on ground, 5.0:1 even on #30333A */
    --surface:var(--deep-2);
    --surface-band:var(--deep);
    --surface-dark:var(--deep);      /* header, footer, floating consult */
    --text:var(--paper);
    --text-body:var(--night-body);
    --text-muted:var(--night-muted);
    --text-on-dark:var(--paper);
    --text-on-dark-muted:var(--night-body);
    --rule:var(--deep-line);
    --rule-dark:var(--deep-line);
    --line:rgba(236,232,223,.10);    /* photo hairline: a faint porcelain edge instead of a dark one */
    --main-dark:var(--deep-accent);  /* brass text */
    --main-tint:#3A3326;             /* brass tint as a dark chip (placeholder .fill) */
    --shadow-menu:0 12px 32px rgba(0,0,0,.5);
    --shadow-float:0 12px 32px rgba(0,0,0,.55);}
:where(:root[data-theme=dark]){
  /* the graphite statement band sits one step above the ground so it still reads as a band */
  .dark{background:var(--deep-hover)}

  /* primary action: porcelain fill, graphite text, brass matte kept. !important because make/process carry
     an inline background:var(--surface) on the band button, which would turn into a ground-coloured hole */
  .btn:not(.ghost):not(.apply){background:var(--paper)!important;color:var(--deep-2)!important}
  @media (hover:hover){.btn:not(.ghost):not(.apply):hover{background:var(--paper-card)!important}}

  /* rules that fill with the (now light) text colour need dark lettering */
  @media (hover:hover){
    .btn-line:hover,.btn.ghost:hover,.top .btn-line:hover,.dark .btn-line:hover,.scta .btn.ghost:hover{color:var(--deep-2)}
  }
  .top .btn-line.apply{color:var(--deep-2)}
  @media (hover:hover){.top .btn-line.apply:hover{color:var(--text-on-dark)}}
  .fill{color:var(--text)}

  /* photographs: same grayscale, about 10% dimmer so they do not glow on the night ground */
  .plate img{filter:grayscale(1) contrast(1.03) brightness(.9)}
  .team-plate img{filter:grayscale(1) contrast(1.03) brightness(.9)}

  /* table scroll cue: the edge shadow is black on the night ground (v3-structure tints it with --ink) */
  .table-wrap{background:
    linear-gradient(to right,var(--surface) 40%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 40%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.6),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),transparent) right center/14px 100% no-repeat scroll}
}

/* header theme toggle */
.theme-t{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--text-on-dark)}
.theme-t::before{content:"";width:16px;height:16px;border:1px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
@media (hover:hover){.theme-t:hover{opacity:.7}}