/* =========================================================================
   JNC Holdings — SEMANTIC ROLES  (token tier 2)
   -------------------------------------------------------------------------
   The role layer. Every token here answers "what is this FOR", never "what
   does it look like". Components and screens consume ROLES; roles point at
   the primitives in colors_and_type.css (the --orange-* and --stone-* scales).
   Swap a primitive and the whole product re-themes — components never change.

   Architecture follows the W3C Design Tokens Community Group's 3-tier model
   (primitive → semantic → component), whose first stable spec shipped Oct
   2025. The "on-*" content-pairing pattern is adapted from Material 3 color
   roles, where each fill carries a paired text/icon color guaranteed to clear
   the contrast floor (M3 targets ≥3:1 for its role pairs).

   NOTE on the surface model: this is NOT M3's dim→bright scale. JNC is a
   warm-paper system — WHITE cards float ABOVE an IVORY page. So the surface
   ramp runs page(ivory) → surface(white) → sunken(stone) → inset(deeper),
   matching how depth actually reads on warm paper, not a generic dark-mode ramp.
   ========================================================================= */

:root {
  /* =====================================================================
     A · CONTENT-ON-FILL  (the "on-*" pairing — guarantees legible pairs)
     Text / icon color to place ON a solid role fill. Pair them only as
     named; never mix a fill with an unrelated on-* color.
     ===================================================================== */
  --on-brand:    var(--brand-contrast);   /* white — see contrast note below */
  --on-positive: #FFFFFF;                  /* on 상승/gain red */
  --on-negative: #FFFFFF;                  /* on 하락/loss blue */
  --on-warning:  var(--ink);               /* DARK on gold-amber (amber is light) */
  --on-info:     #FFFFFF;                  /* on cool slate */
  --on-error:    #FFFFFF;                  /* on UI danger red */
  --on-success:  #FFFFFF;                  /* on generic green */
  --on-gold:     var(--ink);               /* dark on foil gold */
  /* CONTRAST NOTE: --on-brand is white on orange-500 — it clears 3:1 only at
     large/bold UI sizes (button labels are 600-weight ≥14px, which is the only
     place brand-fill text appears). For brand-colored TEXT on a light surface
     use --link / --brand-stronger, or the brand CONTAINER pair below. */

  /* =====================================================================
     B · CONTAINERS  (soft tinted fill + its paired on-container text)
     Low-emphasis status surfaces: badges, banners, inline callouts. The
     on-container color is the SATURATED hue on its own pale tint — high
     legibility, quiet presence. (This is what .jtag.* already does.)
     ===================================================================== */
  --brand-container:       var(--brand-soft);     --on-brand-container:    var(--brand-stronger);
  --positive-container:    var(--positive-soft);  --on-positive-container: #C0241F; /* 대비검증: 칩 텍스트 AA(#E5342E는 tint 위 3.69 미달 → 5.1:1) */
  --negative-container:    var(--negative-soft);  --on-negative-container: #2456B0; /* 대비검증: #2F6BD6는 4.32 미달 → 5.9:1 */
  --warning-container:     var(--warning-soft);   --on-warning-container:  #8A5E0A; /* darker amber for text-on-tint AA */
  --info-container:        var(--info-soft);      --on-info-container:     var(--info);
  --error-container:       var(--error-soft);     --on-error-container:    var(--error-hover);
  --success-container:     var(--success-soft);   --on-success-container:  #166A3A;
  /* NEUTRAL container — 감사 보완. .jtag 기본·중립 칩이 stone 프리미티브를 직접 참조하던
     누락을 role로 승격(규칙 4.1 토큰화, 단방향 사슬 복원). */
  --neutral-container:     var(--stone-100);      --on-neutral-container:  var(--stone-700);
  /* PRESSED container 파생 — tonal 버튼 :active가 orphan hex(#FFD2AE)를 쓰던 누락을 치환.
     컨테이너를 brand로 한 단계 짙게(색이 아닌 토큰 연산). */
  --brand-container-pressed:    color-mix(in srgb, var(--brand-soft) 82%, var(--brand)); /* @kind color */
  --positive-container-pressed: color-mix(in srgb, var(--positive-soft) 85%, var(--positive)); /* @kind color */
  --negative-container-pressed: color-mix(in srgb, var(--negative-soft) 85%, var(--negative)); /* @kind color */

  /* =====================================================================
     C · SURFACES  (depth ramp — warm paper, low→high recession)
     ===================================================================== */
  --surface-page:    var(--bg);          /* ivory canvas — the floor */
  --surface:         var(--bg-raised);   /* white — default card/sheet, floats above page */
  --surface-sunken:  var(--bg-sunken);   /* stone-100 — wells, table headers, tracks */
  --surface-inset:   var(--stone-200);   /* deeper recess — input grooves, progress tracks */
  --surface-inverse: var(--bg-inverse);  /* ink — footers, dark hero, tooltips */

  --on-surface:         var(--fg1);          /* primary text on light surfaces */
  --on-surface-variant: var(--fg2);          /* secondary text / icons */
  --on-surface-muted:   var(--fg3);          /* tertiary / placeholder */
  --on-surface-inverse: var(--fg-oninverse); /* text on ink surfaces */
  --on-surface-inverse-variant: var(--fg-oninverse2);

  /* Borders are roles too */
  --outline:         var(--border);         /* hairlines, dividers */
  --outline-strong:  var(--border-strong);  /* emphasized separation */
  --outline-field:   var(--border-field);   /* input outlines */

  /* =====================================================================
     D · INTERACTION STATES  (semantic state overlays — layer over a surface)
     Decouples hover/press/select/disable from any one component so every
     control reacts identically. Two hover families: NEUTRAL (menus, ghost
     buttons) and BRAND (data rows, selectable items).
     ===================================================================== */
  --interactive:           var(--brand);          /* the actionable accent */
  --interactive-hover:     var(--brand-strong);   /* hover on a brand fill */
  --interactive-pressed:   var(--brand-stronger); /* active/press on a brand fill */

  /* SECONDARY action tier — 감사 보완(L0/L2). 강조 사다리에서 secondary 버튼만
     role 없이 --ink/--stone-* 프리미티브를 직접 참조하던 단방향-사슬 위반을 복원.
     ink fill + 흰 텍스트, hover/press는 stone 램프에서 한 단계씩 짙게. */
  --secondary:           var(--ink);          --on-secondary: var(--white);
  --secondary-hover:     var(--stone-800);
  --secondary-pressed:   var(--stone-700);

  --state-hover-surface:   var(--stone-100);   /* neutral wash: ghost btn, menu item */
  --state-pressed-surface: var(--stone-200);   /* neutral press */
  --state-hover-brand:     var(--brand-tint);  /* orange wash: row hover, selectable hover */

  --state-selected:        var(--ink);         /* strong selected fill (segmented, chip) */
  --on-state-selected:     #FFFFFF;
  --state-selected-subtle:     var(--brand-tint);     /* quiet selected (active nav row) */
  --on-state-selected-subtle:  var(--brand-stronger);

  --state-disabled-surface: var(--stone-200);  /* disabled control fill */
  --state-disabled-content: var(--stone-400);  /* disabled label / icon */
  --state-disabled-outline: transparent;

  --focus-ring:        var(--orange-500);   /* (re-declared as a role alias) */
  --focus-ring-shadow: var(--sh-focus);     /* 3px orange halo for :focus-visible */

  /* =====================================================================
     E · LINKS  (inline text links — distinct from button "interactive")
     Uses the DARKER orange so link text clears AA on ivory; the bright
     brand-500 is reserved for fills/marks, not running text.
     ===================================================================== */
  --link:         var(--orange-700);       /* orange-700 — AA as text on ivory (5.4:1, 대비검증: 600은 3.71 미달) */
  --link-hover:   var(--orange-800);        /* orange-800 */
  --link-visited: var(--orange-800);       /* muted, still warm */

  /* =====================================================================
     F · SELECTION & HIGHLIGHT
     ===================================================================== */
  --selection-bg: var(--brand-soft);   --selection-fg: var(--ink);   /* text selection */
  --highlight-bg: var(--warning-soft); --highlight-fg: var(--ink);   /* search-match mark */

  /* =====================================================================
     G · OVERLAY & SCRIM  (modals, popovers, sheets)
     ===================================================================== */
  --scrim:           rgba(26, 22, 19, 0.48);  /* warm-ink modal backdrop */
  --overlay-surface: var(--bg-raised);        /* dialog / popover body */
  --overlay-shadow:  var(--sh-lg);

  /* =====================================================================
     H · MEDIA / IMAGE ROLES  (the "global image resource" layer)
     Roles for the box an image lives in — NOT the image. Decorative vs
     informative is an ALT/ARIA decision, documented in the role-map card:
       · decorative  → alt="" (or aria-hidden on SVG); prefer CSS background
       · informative → meaningful alt conveying the image's purpose
     ===================================================================== */
  --media-bg:      var(--stone-200);   /* placeholder fill (loading / empty / illustrative) */
  --media-outline: var(--border);      /* hairline frame around media */
  --on-media:      #FFFFFF;            /* text/icon laid over imagery */
  --media-caption: var(--fg2);         /* caption / credit beneath media */
  /* Bottom-up scrim so caption text stays legible over any photo */
  --media-scrim:   linear-gradient(180deg, rgba(26,22,19,0) 0%, rgba(26,22,19,0.10) 45%, rgba(26,22,19,0.62) 100%); /* @kind other */

  /* =====================================================================
     I · COMPONENT SURFACES  (transient/floating surfaces — roles, not looks)
     떠 있는 면의 "지면 대비 분리"를 한 곳에서 결정. 툴팁·토스트는 ink면(반전),
     팝오버·메뉴는 흰 카드면(상승)으로 위계를 만든다(규칙 1.6 게슈탈트 분리).
     ===================================================================== */
  --surface-popover:  var(--bg-raised);   /* menu, popover, select listbox — white card */
  --on-surface-popover: var(--fg1);
  --surface-tooltip:  var(--ink);         /* tooltip — inverse, transient */
  --on-surface-tooltip: var(--fg-oninverse);
  --surface-toast:    var(--ink);         /* toast/snackbar — inverse, attention */
  --on-surface-toast: var(--fg-oninverse);
  --surface-overlay-panel: var(--bg-raised);  /* dialog/drawer body */
  --on-surface-overlay-panel: var(--fg1);

  /* Elevation roles — name the intent, not the step (consumers ask for purpose) */
  --elevation-flat:    none;
  --elevation-raised:  var(--sh-sm);   /* cards */
  --elevation-overlay: var(--sh-md);   /* menus, popovers, sticky bars */
  --elevation-modal:   var(--sh-xl);   /* dialogs, drawers */

  /* =====================================================================
     J · CONTROL ROLES  (shared sizing for any form/action control)
     버튼·입력·셀렉트가 동일 행에서 정렬되도록 높이를 역할로 노출(규칙 4.1).
     ===================================================================== */
  --control-height:  var(--control-h-md);   /* default control height */
  --control-radius:  var(--r-sm);           /* buttons (institutional small radius) */
  --field-radius:    var(--r-xs);           /* inputs (Carbon filled, bottom-border) */
  --field-bg:        var(--bg-sunken);      /* filled-field background */
  --field-border:    var(--outline-field);  /* field bottom border */
  --field-border-focus: var(--brand);       /* focus underline */
  --control-gap:     var(--sp-2);           /* gap inside a control (icon↔label) */
  --control-track:   var(--stone-300);      /* switch/slider unfilled track (감사 보완: stone 직접참조 치환) */

  /* =====================================================================
     K · TRUST-MEASUREMENT ROLES  (신뢰 계측 — AI(Artificial Intelligence·
     인공지능) 존재 · 확신도 · 프로비넌스[provenance·출처/기준시점])
     방향성 고찰 O-01 반영. 투자자문 도메인의 핵심: 추천·수치가 "어디서 왔고
     얼마나 확신하는가"를 화면에서 증명한다. 의미 분리 절대 유지(규칙 4.2):
       · AI 존재  ≠ 브랜드 액션(--brand) ≠ 시장 방향(--positive/--negative) ≠ UI 위험(--error)
       · 확신도   = 비방향 중립 등급(stone). 시장색·--error와 절대 병합 금지.
     벤치마킹(검증): Carbon for AI — 빛(glow)으로 AI를 식별 + explainability
       [설명가능성] 의무화 [carbondesignsystem.com/guidelines/carbon-for-ai] ·
       신뢰=투명성·감사추적·"왜" [weforum.org 2025 · fintech.global 2025/10].
     색만이 아닌 형태·라벨로 이중표시한다(규칙 1.7, 색각 비의존).
     ===================================================================== */
  /* AI 존재(presence) — 빛 신호. 좌측 광원 edge + 미묘한 brand 틴트 표면 */
  --ai-edge:          linear-gradient(180deg, var(--brand), var(--gold)); /* @kind other */
  --ai-surface:       color-mix(in srgb, var(--brand-tint) 64%, var(--surface)); /* @kind color */
  --ai-label-surface: var(--surface);
  --ai-label-fg:      var(--brand-stronger);
  --ai-label-outline: var(--outline-strong);
  --ai-dot:           var(--brand);
  --ai-dot-glow:      color-mix(in srgb, var(--brand) 26%, transparent); /* @kind color */

  /* 확신도(confidence) — 비방향 중립 등급(높음→낮음). 시장 red/blue 아님 */
  --confidence-high:  var(--stone-700);
  --confidence-med:   var(--stone-500);
  --confidence-low:   var(--stone-400);
  --confidence-track: var(--stone-200);

  /* 프로비넌스(provenance·출처/기준시점) — 감사 추적 캡션(mono·tabular 숫자) */
  --provenance-fg:    var(--fg3);
}

/* =========================================================================
   ROLE-DRIVEN ELEMENT DEFAULTS & HELPERS
   Safe, opt-in conveniences that consume the roles above. Class-scoped where
   clobbering a kit would be a risk; global only where it's universally wanted.
   ========================================================================= */

/* Text selection — global, low risk, on-brand */
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Search / filter match highlight */
mark, .jmark { background: var(--highlight-bg); color: var(--highlight-fg);
  padding: 0 .15em; border-radius: var(--r-xs); }

/* Inline link role (opt-in class — avoids restyling kit nav/logo links) */
.jlink {
  color: var(--link); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: color .14s ease, text-decoration-color .14s ease;
}
.jlink:hover  { color: var(--link-hover);  text-decoration-color: currentColor; }
.jlink:visited{ color: var(--link-visited); }
.jlink:focus-visible { outline: none; border-radius: var(--r-xs); box-shadow: var(--focus-ring-shadow); }

/* Status container helper (banner / inline callout) — pairs fill + on-container */
.jstatus { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-family: var(--font-sans);
  font-size: var(--fs-body-sm); line-height: var(--lh-body-sm);
  background: var(--info-container); color: var(--on-info-container); }
.jstatus.pos   { background: var(--positive-container); color: var(--on-positive-container); }
.jstatus.neg   { background: var(--negative-container); color: var(--on-negative-container); }
.jstatus.warn  { background: var(--warning-container);  color: var(--on-warning-container); }
.jstatus.error { background: var(--error-container);    color: var(--on-error-container); }
.jstatus.success { background: var(--success-container); color: var(--on-success-container); }
.jstatus.brand { background: var(--brand-container);    color: var(--on-brand-container); }

/* Media frame + placeholder role. Use for image slots; set role/alt per the
   decorative-vs-informative rule in the role-map card. */
.jmedia {
  position: relative; overflow: hidden; background: var(--media-bg);
  border: 1px solid var(--media-outline); border-radius: var(--r-lg);
}
.jmedia > img, .jmedia > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Aspect-ratio modifiers — 일관된 크롭(글로벌 이미지 리소스 시스템). object-fit:cover로 채움. */
.jmedia.ar-square    { aspect-ratio: var(--ar-square); }
.jmedia.ar-landscape { aspect-ratio: var(--ar-landscape); }
.jmedia.ar-photo     { aspect-ratio: var(--ar-photo); }
.jmedia.ar-wide      { aspect-ratio: var(--ar-wide); }
.jmedia.ar-cinema    { aspect-ratio: var(--ar-cinema); }
.jmedia.ar-portrait  { aspect-ratio: var(--ar-portrait); }
.jmedia.scrim::after { content: ""; position: absolute; inset: 0;
  background: var(--media-scrim); pointer-events: none; }
.jmedia-caption { font-size: var(--fs-caption); color: var(--media-caption); margin-top: var(--sp-2); }
/* Striped placeholder (no real asset yet) — institutional, monospace label */
.jmedia.placeholder {
  display: grid; place-items: center; color: var(--on-surface-muted);
  background-image: var(--media-bg),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(26,22,19,0.035) 11px 22px);
  background-color: var(--media-bg);
}
.jmedia.placeholder .label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-surface-muted);
}

/* Disabled state role — shared shape any control can adopt */
.is-disabled, [aria-disabled="true"]:not(button):not(a) {
  background: var(--state-disabled-surface); color: var(--state-disabled-content);
  border-color: var(--state-disabled-outline); cursor: not-allowed;
}