/* cynix.jp Design Tokens — Reiwa modern × Wa-Yo fusion × IT sublime */
:root {
  /* Brand palette */
  --primary-deep-navy: #0A2540;
  --primary-midnight: #14253D;
  --tech-electric-blue: #0066FF;
  --tech-cyber-cyan: #00D4FF;
  --accent-sunrise-orange: #FF6B2B;
  --accent-gold-leaf: #FFB800;
  --accent-sakura-pink: #FF4D97;
  --neutral-washi-cream: #FAF7F0;
  --neutral-sumi-ink: #1A1D24;
  --neutral-mist-gray: #E5E8EE;
  --neutral-slate: #5A6478;

  /* Category palettes */
  --cat-server-1: #0099C7;
  --cat-server-2: #0066FF;
  --cat-server-accent: #B8C4D1;

  --cat-domain-1: #6B5BCD;
  --cat-domain-2: #9F94E0;
  --cat-domain-accent: #FFB800;

  --cat-saas-1: #4FCBA9;
  --cat-saas-2: #8DD4C0;
  --cat-saas-accent: #0066FF;

  --cat-ec-1: #FF7A8E;
  --cat-ec-2: #FFB800;
  --cat-ec-accent: #0066FF;

  --cat-ai-1: #8A4FFF;
  --cat-ai-2: #00D4FF;
  --cat-ai-accent: #FF4D97;

  --cat-rsv-1: #FFA361;
  --cat-rsv-2: #6FB6E5;
  --cat-rsv-accent: #FFB800;

  /* Type */
  --font-jp: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 24px -8px rgba(10, 37, 64, 0.18);
  --shadow-floating: 0 24px 60px -20px rgba(10, 37, 64, 0.32);

  /* Tweakable defaults — overridden by Tweaks panel */
  --time-sky-top: #FF9DC4;
  --time-sky-bottom: #0099E5;
  --time-cloud-1: #FFD4A8;
  --time-cloud-2: #FAF7F0;
  --time-cloud-3: #FFC4D6;
  --time-fuji: #8A95B5;
  --time-warm-glow: #FFB088;
  --flow-intensity: 1;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--primary-deep-navy);
  background: var(--neutral-washi-cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

/* Time-of-day variants applied at root level */
:root[data-time="dawn"] {
  --time-sky-top: #FF9DC4;
  --time-sky-bottom: #0099E5;
  --time-cloud-1: #FFD4A8;
  --time-cloud-2: #FAF7F0;
  --time-cloud-3: #FFC4D6;
  --time-fuji: #8A95B5;
  --time-warm-glow: #FFB088;
}
:root[data-time="day"] {
  --time-sky-top: #6FBCEA;
  --time-sky-bottom: #C8E6F5;
  --time-cloud-1: #FFFFFF;
  --time-cloud-2: #F4F7FA;
  --time-cloud-3: #DCE8F2;
  --time-fuji: #6E7C9A;
  --time-warm-glow: #E5F0FA;
}
:root[data-time="dusk"] {
  --time-sky-top: #4A2C6E;
  --time-sky-bottom: #FF6B2B;
  --time-cloud-1: #FF8A5C;
  --time-cloud-2: #FFB088;
  --time-cloud-3: #C45A8E;
  --time-fuji: #3E2A4E;
  --time-warm-glow: #FF7A2B;
}

/* Reusable utilities */
.copyable {
  cursor: copy;
  position: relative;
  user-select: none;
  transition: transform 120ms ease;
}
.copyable:active { transform: scale(0.97); }
.copyable::after {
  content: "Copied!";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: var(--primary-deep-navy);
  color: var(--neutral-washi-cream);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.copyable.copied::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}