/* =========================================================================
   ELEMENTA — tokens.css
   디자인 토큰 단일 소스. 이 파일만 갈아끼우면 팔레트/타이포가 전부 바뀐다.
   카페24·아임웹 이식 시: 이 파일을 스킨 공통 CSS 최상단에 먼저 로드할 것.
   ========================================================================= */

:root {
  /* ---- 원소 팔레트 (고정값, 임의 변경 금지) ------------------------------ */
  --ignis-bg:      #F2E9E1;
  --ignis-ink:     #241610;
  --ignis-accent:  #E33F12;
  --ignis-dim:     #A8927F;

  --aqua-bg:       #E4EDF2;
  --aqua-ink:      #0E2230;
  --aqua-accent:   #1E63A8;
  --aqua-dim:      #7E9AAB;

  --silva-bg:      #E9EDE0;
  --silva-ink:     #16210F;
  --silva-accent:  #3F7A2E;
  --silva-dim:     #8B9A79;

  --ventus-bg:     #EEF0F3;
  --ventus-ink:    #1B1E24;
  --ventus-accent: #4A5B72;
  --ventus-dim:    #A6AEB9;

  /* ---- 활성 테마 (기본 IGNIS). js/elements.js 가 :root[data-element] 를 바꾼다 */
  --bg:     var(--ignis-bg);
  --ink:    var(--ignis-ink);
  --accent: var(--ignis-accent);
  --dim:    var(--ignis-dim);

  /* 파생 색 — 잉크의 투명도 단계 (테마 전환 시 자동 추종) */
  --ink-88: color-mix(in srgb, var(--ink) 88%, transparent);
  --ink-64: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-40: color-mix(in srgb, var(--ink) 40%, transparent);
  --ink-14: color-mix(in srgb, var(--ink) 14%, transparent);
  --ink-08: color-mix(in srgb, var(--ink) 8%, transparent);
  --bg-72:  color-mix(in srgb, var(--bg) 72%, transparent);
  --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);

  /* 어두운 미디어 위에서 쓰는 고정 색 (사진 위 타이포용) */
  --on-media:      #FBF7F3;
  --on-media-70:   rgba(251, 247, 243, 0.7);
  --on-media-45:   rgba(251, 247, 243, 0.45);
  --media-void:    #0B0705; /* 사진 로드 전 바닥색 — 딥블랙 */

  /* ---- 타이포 ---------------------------------------------------------- */
  --font-display: "Syne", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-latin:   "EB Garamond", "Pretendard Variable", Pretendard, Georgia, serif;
  --font-body:    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                  system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 유동 스케일 — 375 / 768 / 1440 세 뷰포트 기준으로 계산됨 */
  --fs-mega:  clamp(2.35rem, 10vw, 8.75rem);    /* 히어로 워드마크 — 8글자가 컨테이너에 딱 차는 비율 */
  --fs-h1:    clamp(1.8rem, 6.4vw, 4.6rem);
  --fs-h2:    clamp(1.65rem, 4.2vw, 3.1rem);
  --fs-h3:    clamp(1.18rem, 2.2vw, 1.6rem);
  --fs-lead:  clamp(1.08rem, 2vw, 1.45rem);
  --fs-body:  clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 1.05vw, 0.9375rem);
  --fs-micro: 0.75rem;

  --lh-tight: 0.92;
  --lh-snug:  1.22;
  --lh-body:  1.72;

  --ls-mega:  -0.045em;
  --ls-tight: -0.02em;
  --ls-wide:  0.16em;
  --ls-mono:  0.08em;

  /* ---- 공간 ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 10rem;

  --gutter:     clamp(1.25rem, 4.4vw, 4rem);
  --maxw:       84rem;   /* 1344px */
  --maxw-text:  38rem;
  --nav-h:      clamp(3.5rem, 7vw, 4.5rem);

  /* ---- 모션 ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  420ms;
  --dur-slow:  900ms;
  --dur-theme: 700ms;   /* 원소 테마 전환 */

  /* ---- 기타 ------------------------------------------------------------ */
  --line: 1px solid var(--ink-14);
  --radius: 2px;        /* 각진 브랜드 톤 유지 — 사진 모서리만 아주 살짝 */
  --shadow-soft: 0 18px 48px -24px color-mix(in srgb, var(--ink) 42%, transparent);
  --shadow-lift: 0 28px 70px -30px color-mix(in srgb, var(--ink) 52%, transparent);
  --grain-opacity: 0.045;
  --z-nav: 100;
  --z-dial: 90;
  --z-skip: 200;
}


/* ---- 다크 팔레트 ---------------------------------------------------------
   같은 원소를 어두운 바탕에서 다시 짠 값. 액센트는 어두운 배경에서 대비를
   확보하려고 라이트보다 한 단계 밝게 잡았다.                                */
:root[data-theme="dark"] {
  --ignis-bg:      #15100C;
  --ignis-ink:     #F4EBE3;
  --ignis-accent:  #FF6337;
  --ignis-dim:     #8A7767;

  --aqua-bg:       #0B141B;
  --aqua-ink:      #E6EEF3;
  --aqua-accent:   #57A6EC;
  --aqua-dim:      #6C8496;

  --silva-bg:      #0E1409;
  --silva-ink:     #EBEFE2;
  --silva-accent:  #7BC062;
  --silva-dim:     #79886A;

  --ventus-bg:     #101217;
  --ventus-ink:    #EFF1F4;
  --ventus-accent: #93A8C4;
  --ventus-dim:    #737B87;

  /* 사진 위 고정색과 바닥색도 다크에 맞춰 조정 */
  --on-media:      #F7F2EC;
  --on-media-70:   rgba(247, 242, 236, 0.72);
  --on-media-45:   rgba(247, 242, 236, 0.48);
  --media-void:    #070504;

  --grain-opacity: 0.07;
  --shadow-soft: 0 18px 48px -24px rgba(0, 0, 0, 0.72);
  --shadow-lift: 0 28px 70px -30px rgba(0, 0, 0, 0.85);
}

/* 사용자가 직접 고르지 않았으면 기기 설정을 따른다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ignis-bg:      #15100C;
    --ignis-ink:     #F4EBE3;
    --ignis-accent:  #FF6337;
    --ignis-dim:     #8A7767;

    --aqua-bg:       #0B141B;
    --aqua-ink:      #E6EEF3;
    --aqua-accent:   #57A6EC;
    --aqua-dim:      #6C8496;

    --silva-bg:      #0E1409;
    --silva-ink:     #EBEFE2;
    --silva-accent:  #7BC062;
    --silva-dim:     #79886A;

    --ventus-bg:     #101217;
    --ventus-ink:    #EFF1F4;
    --ventus-accent: #93A8C4;
    --ventus-dim:    #737B87;

    --on-media:      #F7F2EC;
    --on-media-70:   rgba(247, 242, 236, 0.72);
    --on-media-45:   rgba(247, 242, 236, 0.48);
    --media-void:    #070504;

    --grain-opacity: 0.07;
    --shadow-soft: 0 18px 48px -24px rgba(0, 0, 0, 0.72);
    --shadow-lift: 0 28px 70px -30px rgba(0, 0, 0, 0.85);
  }
}

/* 원소 스코프는 라이트/다크 어느 쪽이든 위에서 정해진 값을 그대로 쓴다 */
/* ---- 원소별 테마 스코프 --------------------------------------------------
   :root 또는 임의의 섹션에 data-element 를 걸면 그 하위가 해당 팔레트로 전환.
   섹션 단위 스코프가 가능해야 카페24 위젯 안에서도 재사용된다.            */
[data-element="ignis"] {
  --bg: var(--ignis-bg);  --ink: var(--ignis-ink);
  --accent: var(--ignis-accent); --dim: var(--ignis-dim);
}
[data-element="aqua"] {
  --bg: var(--aqua-bg);   --ink: var(--aqua-ink);
  --accent: var(--aqua-accent);  --dim: var(--aqua-dim);
}
[data-element="silva"] {
  --bg: var(--silva-bg);  --ink: var(--silva-ink);
  --accent: var(--silva-accent); --dim: var(--silva-dim);
}
[data-element="ventus"] {
  --bg: var(--ventus-bg); --ink: var(--ventus-ink);
  --accent: var(--ventus-accent); --dim: var(--ventus-dim);
}