/* ============================================================================
   skilowgue Design System — Tokens
   Sharp · Futuristic · Mincho-accented · Lilac/Lavender base
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── BRAND ─────────────────────────────────────────────────────────────── */
  --skg-lilac:           #A59ACA;     /* primary */
  --skg-lilac-glow:      #C9BEFF;     /* hover */
  --skg-lilac-deep:      #6E5FA0;     /* pressed / dark accent */

  --skg-cyan:            #7DF9FF;     /* secondary neon */
  --skg-cyan-soft:       #A8FBFF;
  --skg-magenta:         #FF6EC7;     /* match success / edge */

  /* ── DARK SCALE ────────────────────────────────────────────────────────── */
  --skg-night-0:         #07050D;     /* deepest */
  --skg-night-1:         #0B0814;     /* default body */
  --skg-night-2:         #15111F;     /* card */
  --skg-night-3:         #1E1830;     /* elevated */
  --skg-night-4:         #2A2240;     /* hover surface */
  --skg-night-5:         #3A2F58;     /* border emphasis */

  /* ── LIGHT SCALE ───────────────────────────────────────────────────────── */
  --skg-day-0:           #FFFFFF;
  --skg-day-1:           #F8F6FC;
  --skg-day-2:           #EFEBF7;
  --skg-day-3:           #E2DBF0;
  --skg-day-4:           #C9BFE0;
  --skg-day-5:           #6E5FA0;

  /* ── SEMANTIC (Dark — default) ─────────────────────────────────────────── */
  --bg-0:                var(--skg-night-1);
  --bg-1:                var(--skg-night-2);
  --bg-2:                var(--skg-night-3);
  --bg-3:                var(--skg-night-4);

  --fg-1:                rgba(255, 255, 255, 1.00);
  --fg-2:                rgba(231, 224, 255, 0.72);
  --fg-3:                rgba(231, 224, 255, 0.48);
  --fg-4:                rgba(231, 224, 255, 0.24);

  --border-1:            rgba(165, 154, 202, 0.14);
  --border-2:            rgba(165, 154, 202, 0.28);
  --border-glow:         rgba(165, 154, 202, 0.56);

  --accent:              var(--skg-lilac);
  --accent-glow:         var(--skg-lilac-glow);
  --accent-fg:           #0B0814;          /* on-accent text */

  --success:             var(--skg-cyan);
  --warning:             #F4B860;
  --danger:              var(--skg-magenta);
  --info:                var(--skg-lilac);

  /* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
  --font-serif:          "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:           "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono:           "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* size scale */
  --fs-xxs:   11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-2xl:   22px;
  --fs-3xl:   28px;
  --fs-4xl:   36px;
  --fs-5xl:   48px;
  --fs-6xl:   64px;
  --fs-7xl:   88px;

  /* line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.6;
  --lh-loose:   1.8;

  /* tracking */
  --tr-tight:   -0.02em;
  --tr-base:    0em;
  --tr-wide:    0.04em;
  --tr-wider:   0.12em;

  /* ── SPACING ───────────────────────────────────────────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    24px;
  --sp-6:    32px;
  --sp-7:    48px;
  --sp-8:    64px;
  --sp-9:    96px;
  --sp-10:   128px;

  /* ── RADII ─────────────────────────────────────────────────────────────── */
  --r-0:     0px;
  --r-1:     2px;
  --r-2:     4px;
  --r-full:  9999px;

  /* ── SHADOWS / GLOW ────────────────────────────────────────────────────── */
  --glow-soft:    0 0 24px rgba(165, 154, 202, 0.35);
  --glow-sharp:   0 0 0 1px rgba(165, 154, 202, 0.6), 0 0 16px rgba(165, 154, 202, 0.5);
  --glow-cyan:    0 0 16px rgba(125, 249, 255, 0.5);
  --glow-magenta: 0 0 16px rgba(255, 110, 199, 0.45);
  --inner-edge:   inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --ease-sharp:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:     120ms;
  --dur-base:      240ms;
  --dur-entrance:  480ms;
}

/* ── LIGHT THEME ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-0:        var(--skg-day-1);
  --bg-1:        var(--skg-day-0);
  --bg-2:        var(--skg-day-2);
  --bg-3:        var(--skg-day-3);

  --fg-1:        #0B0814;
  --fg-2:        rgba(11, 8, 20, 0.72);
  --fg-3:        rgba(11, 8, 20, 0.48);
  --fg-4:        rgba(11, 8, 20, 0.24);

  --border-1:    rgba(110, 95, 160, 0.18);
  --border-2:    rgba(110, 95, 160, 0.32);
  --border-glow: rgba(110, 95, 160, 0.55);

  --accent:      var(--skg-lilac-deep);
  --accent-fg:   #FFFFFF;
}

/* ============================================================================
   SEMANTIC ELEMENTS — typographic primitives
   ============================================================================ */

.skg-display,
h1.skg, .skg h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.skg-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.skg-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.skg-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.skg-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.skg-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.skg-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.skg-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
}

.skg-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.skg-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

.skg-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   GLOBAL RESETS / DEFAULTS
   ============================================================================ */

.skg-reset, .skg-reset * { box-sizing: border-box; }

.skg-bg {
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(165, 154, 202, 0.10), transparent 60%),
    radial-gradient(600px 400px at 95% 100%, rgba(125, 249, 255, 0.06), transparent 60%),
    var(--bg-0);
  color: var(--fg-1);
  min-height: 100vh;
  font-family: var(--font-sans);
}

.skg-grid-bg {
  background-image:
    linear-gradient(to right, rgba(165, 154, 202, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(165, 154, 202, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

.skg-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
}