/* ===================================================================
 * mildsolt design tokens — 2026 Earth Tone palette (Phase 1 V2 ACCEPT)
 * Shared across all 17 pages for unified portfolio visual identity.
 *
 * Load order: this file FIRST, then page-specific <style> block.
 * Page-level rules using var(--color-*) will pick up these tokens.
 * =================================================================== */

:root {
  /* Brand identity — preserved across portfolio for CTA / link continuity */
  --color-brand: #127cc1;
  --color-brand-light: #82c2ec;
  --color-brand-dark: #0d5a8f;
  --color-blue: #127cc1;
  --color-blue-light: #82c2ec;
  --color-blue-dark: #0d5a8f;

  /* 2026 Earth Tone palette (anti-AI-slop, warm neutral) */
  --color-bg-base: #faf8f3;       /* warm off-white (Cloud Dancer) */
  --color-bg-section: #f4f0e8;    /* warm sand */
  --color-bg-gray: #ede8dd;       /* warm light grey */
  --color-bg-muted: #ede8dd;
  --color-base: #ede8dd;
  --color-text: #2a2723;          /* warm dark (NOT pure black) */
  --color-text-muted: #6b6660;
  --color-text-light: #fff;
  --color-gray: #6b6660;
  --color-white: #fff;
  --color-black: #000;
  --color-border: rgba(42, 39, 35, 0.12);

  /* Accent — eyebrow / illustration / data viz only. NEVER on CTA. */
  --color-accent-clay: #b87654;
  --color-accent-clay-hover: #9c5d3f;
  --color-accent-ink: #1f3a5f;    /* deep ink navy, 3rd color to escape pure-warm slop */
  --color-accent-sage: #8a9b7e;

  /* Legacy red → migrated to clay accent (bridge for existing selectors) */
  --color-red: var(--color-accent-clay);
  --color-red-hover: var(--color-accent-clay-hover);

  /* Typography — Zen Kaku Gothic New / Noto Sans JP / Barlow Condensed */
  --font-en: "Barlow Condensed", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

  /* Spacing */
  --container-width: 1200px;
  --section-padding: 120px 0;

  /* Radius — 2026 craft: mid-range (6-20px) is the 2018 Bootstrap signature.
     Sharp 0 (neo-brutalism) or pill (999px) for craft identity. */
  --radius-sharp: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-sharp: 1px solid var(--color-border);
  --border-ink: 1px solid var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base: #1c1a17;
    --color-bg-section: #252220;
    --color-bg-gray: #2e2a26;
    --color-bg-muted: #2e2a26;
    --color-base: #2e2a26;
    --color-text: #e8e3d8;
    --color-text-muted: #a8a39a;
    --color-gray: #a8a39a;
    --color-brand: #4ea3d6;
    --color-brand-light: #6fbce3;
    --color-brand-dark: #2a7eb3;
    --color-blue: #4ea3d6;
    --color-blue-light: #6fbce3;
    --color-blue-dark: #2a7eb3;
    --color-accent-clay: #c98a6a;
    --color-accent-clay-hover: #d99f80;
    --color-accent-ink: #5e7ba0;
    --color-accent-sage: #a0b094;
    --color-border: rgba(232, 227, 216, 0.12);
  }
}

/* -------------------------------------------------------------------
 * Low-specificity baseline — pages can override freely
 * Applies Earth Tone background + warm dark text + display font default.
 * If a page hardcodes background: #fff, that page wins (intentional).
 * ----------------------------------------------------------------- */
html {
  background-color: var(--color-bg-base);
  color: var(--color-text);
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-brand);
}
a:hover {
  color: var(--color-brand-dark);
}

/* -------------------------------------------------------------------
 * Grain texture utility — apply via class="has-grain" on any block
 * 5% opacity multiply blend, anti-AI-slop craft signal (2026 trend)
 * ----------------------------------------------------------------- */
.has-grain {
  position: relative;
  isolation: isolate;
}

.has-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.165 0 0 0 0 0.156 0 0 0 0 0.137 0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------
 * Reduced motion baseline (2026 craft baseline)
 *
 * NOTE: animation-* overrides removed intentionally — many pages on
 * mildsolt.jp use `@keyframes ... forwards` for hero entrance reveals.
 * Forcing animation-duration to 0.01ms instantly snaps to the end frame,
 * BUT browsers/headless contexts that quietly opt into reduced-motion
 * can break IntersectionObserver-driven reveal sequencing on long pages.
 * Pages that need stricter reduced-motion behavior should declare it
 * locally in their own <style> block.
 * ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}