/* ==========================================================================
   創造空間株式会社 / SOZOKUKAN Co., LTD — Design System v1.0
   Brand attribute: Luxury —「静謐な余白と、真鍮の一線」
   Legacy #EF7800 を彩度・明度調整し Brass #C08A33 として継承。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&family=Inter:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root {
  /* ---------- 1. PRIMITIVE COLOR ---------- */
  /* Ink / 墨 — primary */
  --sk-ink-950:#0A0C0F; --sk-ink-900:#12151A; --sk-ink-800:#1A1E25; --sk-ink-700:#252A33;
  --sk-ink-600:#343A45; --sk-ink-500:#4A515D; --sk-ink-400:#6B7280; --sk-ink-350:#858C95;
  --sk-ink-300:#9AA1AB; --sk-ink-200:#C4C9D0; --sk-ink-100:#E4E7EA; --sk-ink-50:#F4F5F7; --sk-ink-0:#FFFFFF;

  /* Brass / 真鍮 — accent */
  --sk-brass-900:#4A3010; --sk-brass-800:#6B4514; --sk-brass-700:#8A5A18; --sk-brass-600:#9C6720;
  --sk-brass-500:#C08A33; --sk-brass-400:#D2A155; --sk-brass-300:#E0BB84; --sk-brass-200:#EFDCBB;
  --sk-brass-100:#F7EEDF; --sk-brass-50:#FBF7F0;

  /* Stone / 石・シャンパン — secondary */
  --sk-stone-700:#6E6355; --sk-stone-500:#A2968A; --sk-stone-300:#CFC4B6;
  --sk-stone-200:#E7DCCB; --sk-stone-100:#F1EBE2; --sk-stone-50:#FAF8F4;

  /* Semantic */
  --sk-success:#1F6B4A; --sk-success-on-dark:#4CAF87; --sk-success-surface:#EAF3EF;
  --sk-warning:#9A6B12; --sk-warning-on-dark:#E0B457; --sk-warning-surface:#FAF2E2;
  --sk-error:#A32B2B;   --sk-error-on-dark:#E27272;   --sk-error-surface:#F8ECEC;
  --sk-info:#2A5A7A;    --sk-info-on-dark:#7FB4D6;    --sk-info-surface:#EBF2F7;

  /* Alpha & gradient */
  --sk-alpha-ink-08:rgba(10,12,15,.08); --sk-alpha-ink-16:rgba(10,12,15,.16); --sk-alpha-ink-64:rgba(10,12,15,.64);
  --sk-alpha-white-08:rgba(255,255,255,.08); --sk-alpha-white-16:rgba(255,255,255,.16);
  --sk-alpha-brass-16:rgba(192,138,51,.16); --sk-alpha-brass-32:rgba(192,138,51,.32);
  --sk-gradient-brass:linear-gradient(100deg,#8A5A18 0%,#C08A33 42%,#E0BB84 62%,#C08A33 100%);
  --sk-gradient-scrim:linear-gradient(180deg,rgba(10,12,15,0) 0%,rgba(10,12,15,.72) 100%);
  --sk-gradient-ink:linear-gradient(160deg,#12151A 0%,#0A0C0F 100%);

  /* ---------- 2. SEMANTIC / LIGHT THEME ---------- */
  --sk-bg-canvas:var(--sk-ink-0);
  --sk-bg-subtle:var(--sk-stone-50);
  --sk-bg-muted:var(--sk-ink-50);
  --sk-bg-inverse:var(--sk-ink-950);
  --sk-bg-accent-subtle:var(--sk-brass-50);

  --sk-surface:var(--sk-ink-0);
  --sk-surface-raised:var(--sk-ink-0);
  --sk-surface-sunken:var(--sk-stone-50);
  --sk-surface-overlay:var(--sk-alpha-ink-64);

  --sk-text-primary:var(--sk-ink-900);
  --sk-text-secondary:var(--sk-ink-500);
  --sk-text-tertiary:var(--sk-ink-400);
  --sk-text-disabled:var(--sk-ink-300);
  --sk-text-inverse:var(--sk-ink-0);
  --sk-text-accent:var(--sk-brass-600);
  --sk-text-on-accent:var(--sk-ink-950);

  --sk-border-subtle:var(--sk-ink-100);
  --sk-border:var(--sk-ink-200);
  --sk-border-strong:var(--sk-ink-350);
  --sk-border-accent:var(--sk-brass-500);

  --sk-action-primary-bg:var(--sk-ink-900);
  --sk-action-primary-bg-hover:var(--sk-ink-700);
  --sk-action-primary-bg-active:var(--sk-ink-950);
  --sk-action-primary-fg:var(--sk-ink-0);
  --sk-action-accent-bg:var(--sk-brass-500);
  --sk-action-accent-bg-hover:var(--sk-brass-600);
  --sk-action-accent-fg:var(--sk-ink-950);
  --sk-action-disabled-bg:var(--sk-ink-100);
  --sk-action-disabled-fg:var(--sk-ink-300);

  --sk-focus-ring:var(--sk-brass-500);
  --sk-focus-offset:var(--sk-ink-0);
  --sk-shadow-focus:0 0 0 2px var(--sk-focus-offset),0 0 0 4px var(--sk-focus-ring);

  /* ---------- 3. TYPOGRAPHY ---------- */
  --sk-font-display:"Cormorant Garamond","Noto Serif JP","Yu Mincho",YuMincho,serif;
  --sk-font-sans:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --sk-font-label:"Jost","Montserrat","Inter",sans-serif;
  --sk-font-numeric:"Inter",sans-serif;

  --sk-fw-light:300; --sk-fw-regular:400; --sk-fw-medium:500; --sk-fw-semibold:600; --sk-fw-bold:700;

  --sk-track-tightest:-0.03em; --sk-track-tight:-0.015em; --sk-track-normal:0em;
  --sk-track-wide:0.04em; --sk-track-wider:0.12em; --sk-track-widest:0.22em;

  --sk-lh-none:1; --sk-lh-display:1.12; --sk-lh-heading:1.4; --sk-lh-snug:1.6; --sk-lh-body:1.9; --sk-lh-loose:2.1;

  /* 9-step scale (fluid) */
  --sk-fs-display-01:clamp(2.75rem,1.55rem + 4.2vw,4.5rem);   /* 44 → 72 */
  --sk-fs-display-02:clamp(2.25rem,1.65rem + 2.1vw,3.5rem);   /* 36 → 56 */
  --sk-fs-headline-01:clamp(1.75rem,1.4rem + 1.25vw,2.5rem);  /* 28 → 40 */
  --sk-fs-headline-02:clamp(1.5rem,1.35rem + 0.6vw,2rem);     /* 24 → 32 */
  --sk-fs-title-01:clamp(1.25rem,1.18rem + 0.3vw,1.5rem);     /* 20 → 24 */
  --sk-fs-body-lg:1.125rem;  /* 18 */
  --sk-fs-body:1rem;         /* 16 */
  --sk-fs-body-sm:0.875rem;  /* 14 */
  --sk-fs-caption:0.75rem;   /* 12 */
  --sk-fs-overline:0.6875rem;/* 11 — 複合スタイル */

  /* ---------- 4. SPACING (8px grid) ---------- */
  --sk-space-0:0px;   --sk-space-05:4px;  --sk-space-1:8px;   --sk-space-15:12px;
  --sk-space-2:16px;  --sk-space-3:24px;  --sk-space-4:32px;  --sk-space-5:40px;
  --sk-space-6:48px;  --sk-space-8:64px;  --sk-space-10:80px; --sk-space-12:96px;
  --sk-space-15x:120px; --sk-space-20:160px; --sk-space-25:200px;
  --sk-section-y:var(--sk-space-10);
  --sk-gutter:20px;

  /* ---------- 5. SIZE / RADIUS / BORDER / ELEVATION ---------- */
  --sk-control-sm:40px; --sk-control-md:48px; --sk-control-lg:56px; --sk-control-xl:64px;
  --sk-icon-xs:16px; --sk-icon-sm:20px; --sk-icon-md:24px; --sk-icon-lg:32px;
  --sk-tap-min:44px;
  --sk-container-narrow:720px; --sk-container-content:1120px; --sk-container-wide:1280px; --sk-container-full:1536px;
  --sk-header-h:64px;

  --sk-radius-none:0px; --sk-radius-xs:2px; --sk-radius-sm:4px; --sk-radius-md:8px;
  --sk-radius-lg:12px; --sk-radius-pill:999px; --sk-radius-circle:50%;

  --sk-border-hairline:1px; --sk-border-thin:1px; --sk-border-thick:2px;

  --sk-elevation-0:none;
  --sk-elevation-1:0 1px 2px rgba(10,12,15,.04);
  --sk-elevation-2:0 2px 8px rgba(10,12,15,.06);
  --sk-elevation-3:0 8px 24px -8px rgba(10,12,15,.12);
  --sk-elevation-4:0 20px 48px -16px rgba(10,12,15,.18);
  --sk-elevation-5:0 32px 80px -24px rgba(10,12,15,.24);

  /* ---------- 6. MOTION ---------- */
  --sk-dur-instant:0ms; --sk-dur-fast:150ms; --sk-dur-base:250ms; --sk-dur-slow:400ms;
  --sk-dur-slower:600ms; --sk-dur-reveal:900ms; --sk-dur-ambient:1600ms;
  --sk-ease-standard:cubic-bezier(.4,0,.2,1);
  --sk-ease-decelerate:cubic-bezier(.215,.61,.355,1);
  --sk-ease-accelerate:cubic-bezier(.55,.055,.675,.19);
  --sk-ease-emphasized:cubic-bezier(.16,1,.3,1);
  --sk-ease-luxe:cubic-bezier(.65,0,.35,1);
  --sk-stagger:80ms;
  --sk-reveal-y:24px;

  /* ---------- 7. Z-INDEX ---------- */
  --sk-z-base:0; --sk-z-raised:10; --sk-z-sticky:100; --sk-z-header:200; --sk-z-drawer:300;
  --sk-z-overlay:400; --sk-z-modal:500; --sk-z-toast:600; --sk-z-tooltip:700;

  color-scheme:light dark;
}

/* ---------- RESPONSIVE TOKEN SHIFTS ---------- */
@media (min-width:768px){ :root{ --sk-gutter:32px; --sk-section-y:var(--sk-space-15x); --sk-header-h:88px; } }
@media (min-width:1280px){ :root{ --sk-gutter:48px; --sk-section-y:var(--sk-space-20); } }

/* ==========================================================================
   DARK MODE —「夜のショールーム」。純黒は使わない。
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sk-bg-canvas:var(--sk-ink-950); --sk-bg-subtle:var(--sk-ink-900); --sk-bg-muted:var(--sk-ink-800);
    --sk-bg-inverse:var(--sk-ink-0); --sk-bg-accent-subtle:rgba(192,138,51,.10);
    --sk-surface:var(--sk-ink-900); --sk-surface-raised:var(--sk-ink-800); --sk-surface-sunken:var(--sk-ink-950);
    --sk-surface-overlay:rgba(10,12,15,.80);
    --sk-text-primary:var(--sk-ink-0); --sk-text-secondary:var(--sk-ink-200); --sk-text-tertiary:var(--sk-ink-300);
    --sk-text-disabled:var(--sk-ink-500); --sk-text-inverse:var(--sk-ink-950);
    --sk-text-accent:var(--sk-brass-400); --sk-text-on-accent:var(--sk-ink-950);
    --sk-border-subtle:rgba(255,255,255,.08); --sk-border:rgba(255,255,255,.16); --sk-border-strong:var(--sk-ink-400);
    --sk-border-accent:var(--sk-brass-400);
    --sk-action-primary-bg:var(--sk-ink-0); --sk-action-primary-bg-hover:var(--sk-ink-100);
    --sk-action-primary-bg-active:var(--sk-ink-200); --sk-action-primary-fg:var(--sk-ink-950);
    --sk-action-accent-bg:var(--sk-brass-400); --sk-action-accent-bg-hover:var(--sk-brass-300);
    --sk-action-accent-fg:var(--sk-ink-950);
    --sk-action-disabled-bg:var(--sk-ink-800); --sk-action-disabled-fg:var(--sk-ink-500);
    --sk-focus-ring:var(--sk-brass-400); --sk-focus-offset:var(--sk-ink-950);
    --sk-success:var(--sk-success-on-dark); --sk-warning:var(--sk-warning-on-dark);
    --sk-error:var(--sk-error-on-dark); --sk-info:var(--sk-info-on-dark);
    --sk-elevation-1:0 1px 2px rgba(0,0,0,.40);
    --sk-elevation-2:0 2px 8px rgba(0,0,0,.48);
    --sk-elevation-3:0 8px 24px -8px rgba(0,0,0,.56);
    --sk-elevation-4:0 20px 48px -16px rgba(0,0,0,.64);
    --sk-elevation-5:0 32px 80px -24px rgba(0,0,0,.72);
    --sk-gradient-scrim:linear-gradient(180deg,rgba(10,12,15,0) 0%,rgba(10,12,15,.88) 100%);
  }
}
:root[data-theme="dark"]{
  --sk-bg-canvas:var(--sk-ink-950); --sk-bg-subtle:var(--sk-ink-900); --sk-bg-muted:var(--sk-ink-800);
  --sk-bg-inverse:var(--sk-ink-0); --sk-bg-accent-subtle:rgba(192,138,51,.10);
  --sk-surface:var(--sk-ink-900); --sk-surface-raised:var(--sk-ink-800); --sk-surface-sunken:var(--sk-ink-950);
  --sk-surface-overlay:rgba(10,12,15,.80);
  --sk-text-primary:var(--sk-ink-0); --sk-text-secondary:var(--sk-ink-200); --sk-text-tertiary:var(--sk-ink-300);
  --sk-text-disabled:var(--sk-ink-500); --sk-text-inverse:var(--sk-ink-950);
  --sk-text-accent:var(--sk-brass-400); --sk-text-on-accent:var(--sk-ink-950);
  --sk-border-subtle:rgba(255,255,255,.08); --sk-border:rgba(255,255,255,.16); --sk-border-strong:var(--sk-ink-400);
  --sk-border-accent:var(--sk-brass-400);
  --sk-action-primary-bg:var(--sk-ink-0); --sk-action-primary-bg-hover:var(--sk-ink-100);
  --sk-action-primary-bg-active:var(--sk-ink-200); --sk-action-primary-fg:var(--sk-ink-950);
  --sk-action-accent-bg:var(--sk-brass-400); --sk-action-accent-bg-hover:var(--sk-brass-300);
  --sk-action-accent-fg:var(--sk-ink-950);
  --sk-action-disabled-bg:var(--sk-ink-800); --sk-action-disabled-fg:var(--sk-ink-500);
  --sk-focus-ring:var(--sk-brass-400); --sk-focus-offset:var(--sk-ink-950);
  --sk-success:var(--sk-success-on-dark); --sk-warning:var(--sk-warning-on-dark);
  --sk-error:var(--sk-error-on-dark); --sk-info:var(--sk-info-on-dark);
  --sk-elevation-1:0 1px 2px rgba(0,0,0,.40);
  --sk-elevation-2:0 2px 8px rgba(0,0,0,.48);
  --sk-elevation-3:0 8px 24px -8px rgba(0,0,0,.56);
  --sk-elevation-4:0 20px 48px -16px rgba(0,0,0,.64);
  --sk-elevation-5:0 32px 80px -24px rgba(0,0,0,.72);
  --sk-gradient-scrim:linear-gradient(180deg,rgba(10,12,15,0) 0%,rgba(10,12,15,.88) 100%);
}

/* ==========================================================================
   BASE & TYPOGRAPHY UTILITIES
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--sk-bg-canvas); color:var(--sk-text-primary);
  font-family:var(--sk-font-sans); font-size:var(--sk-fs-body); line-height:var(--sk-lh-body);
  letter-spacing:.01em; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
}
.sk-display-01{font:var(--sk-fw-light) var(--sk-fs-display-01)/var(--sk-lh-display) var(--sk-font-display);letter-spacing:var(--sk-track-tight)}
.sk-display-02{font:var(--sk-fw-light) var(--sk-fs-display-02)/1.2 var(--sk-font-display);letter-spacing:var(--sk-track-tight)}
.sk-headline-01{font:var(--sk-fw-regular) var(--sk-fs-headline-01)/1.35 var(--sk-font-display);letter-spacing:-.01em}
.sk-headline-02{font:var(--sk-fw-regular) var(--sk-fs-headline-02)/1.45 var(--sk-font-display)}
.sk-title-01{font:var(--sk-fw-semibold) var(--sk-fs-title-01)/1.5 var(--sk-font-sans)}
.sk-body-lg{font:var(--sk-fw-regular) var(--sk-fs-body-lg)/var(--sk-lh-body) var(--sk-font-sans)}
.sk-body{font:var(--sk-fw-regular) var(--sk-fs-body)/var(--sk-lh-body) var(--sk-font-sans)}
.sk-body-sm{font:var(--sk-fw-regular) var(--sk-fs-body-sm)/1.8 var(--sk-font-sans);letter-spacing:var(--sk-track-wide)}
.sk-caption{font:var(--sk-fw-medium) var(--sk-fs-caption)/1.6 var(--sk-font-sans);letter-spacing:var(--sk-track-wide)}
.sk-overline{font:var(--sk-fw-medium) var(--sk-fs-overline)/1.4 var(--sk-font-label);letter-spacing:var(--sk-track-widest);text-transform:uppercase;color:var(--sk-text-accent)}
.sk-num{font-family:var(--sk-font-numeric);font-variant-numeric:tabular-nums;letter-spacing:0}

/* Layout */
.sk-container{width:100%;max-width:calc(var(--sk-container-wide) + var(--sk-gutter)*2);margin-inline:auto;padding-inline:var(--sk-gutter)}
.sk-container--content{max-width:calc(var(--sk-container-content) + var(--sk-gutter)*2)}
.sk-container--narrow{max-width:calc(var(--sk-container-narrow) + var(--sk-gutter)*2)}
.sk-section{padding-block:var(--sk-section-y)}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sk-space-2)}
@media(min-width:768px){.sk-grid{grid-template-columns:repeat(8,1fr);gap:var(--sk-space-3)}}
@media(min-width:1024px){.sk-grid{grid-template-columns:repeat(12,1fr);gap:var(--sk-space-4)}}

/* Focus — 全インタラクティブ要素の既定 */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--sk-border-thick) solid var(--sk-focus-ring);
  outline-offset:2px; border-radius:var(--sk-radius-xs);
}
.sk-skip-link{position:absolute;left:-9999px}
.sk-skip-link:focus{left:var(--sk-space-2);top:var(--sk-space-2);z-index:var(--sk-z-tooltip);
  background:var(--sk-surface);color:var(--sk-text-primary);padding:var(--sk-space-15) var(--sk-space-2);
  box-shadow:var(--sk-elevation-3)}
.sk-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Motion primitives */
.sk-reveal{opacity:0;transform:translateY(var(--sk-reveal-y));
  transition:opacity var(--sk-dur-reveal) var(--sk-ease-emphasized),transform var(--sk-dur-reveal) var(--sk-ease-emphasized)}
.sk-reveal.is-in{opacity:1;transform:none}
.sk-reveal:nth-child(1){transition-delay:0ms}
.sk-reveal:nth-child(2){transition-delay:calc(var(--sk-stagger)*1)}
.sk-reveal:nth-child(3){transition-delay:calc(var(--sk-stagger)*2)}
.sk-reveal:nth-child(4){transition-delay:calc(var(--sk-stagger)*3)}
.sk-reveal:nth-child(5){transition-delay:calc(var(--sk-stagger)*4)}
.sk-reveal:nth-child(n+6){transition-delay:calc(var(--sk-stagger)*5)}
.sk-rule{height:var(--sk-border-thick);width:48px;background:var(--sk-gradient-brass);border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sk-reveal{opacity:1;transform:none}
}
@media (prefers-contrast:more){
  :root{--sk-border:var(--sk-ink-500);--sk-border-subtle:var(--sk-ink-300);--sk-text-secondary:var(--sk-ink-700)}
}