/* ==========================================================================
   1. Typography Imports
   ========================================================================== */
/* Fraunces (Variable), DM Sans (Body), JetBrains Mono (Accents) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=JetBrains+Mono:wght@400&display=swap');

/* ==========================================================================
   2. Design Tokens (Custom Properties)
   ========================================================================== */
:root {
  /* Color Palette - Core */
  --color-bg: #F7F6F3;
  --color-background: var(--color-bg);
  --color-surface: #EFEDE8;
  --color-surface-elevated: #FFFFFF;
  --color-ink: #1C1C1A;
  --color-ink-muted: #6B6860;
  --color-ink-faint: #A8A59F;
  --color-border: rgba(28, 28, 26, 0.10);
  --color-header-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --color-input-bg: var(--color-surface-elevated);

  /* Brändisilta: Skillhiven & SwarmMindin Turkoosi */
  --color-signal: #259E92; /* Tyylikäs, syvä turkoosi (vastaa painikkeitasi) */
  --color-signal-lt: #E4F3F2; /* Erittäin vaalea turkoosi taustoihin */
  --color-signal-contrast: #FFFFFF;
  --color-signal-hover: color-mix(in srgb, var(--color-signal) 85%, black);
  --color-cta-bg: var(--color-signal-lt);
  --color-success-bg: color-mix(in srgb, var(--color-signal) 10%, var(--color-bg));
  --color-success-border: color-mix(in srgb, var(--color-signal) 32%, transparent);
  --color-positive-ink: #059669;
  --color-positive-bg: color-mix(in srgb, #10B981 10%, transparent);
  --color-positive-border: #10B981;
  --color-warning-ink: #D97706;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-selection-bg: var(--color-signal-lt);
  --color-selection-ink: var(--color-signal);

  --color-toggle-track: color-mix(in srgb, var(--color-ink) 10%, var(--color-surface));
  --color-toggle-thumb: var(--color-surface-elevated);
  --color-toggle-label: var(--color-ink-muted);
  --color-hero-label: rgba(30, 30, 30, 0.55);
  --color-on-dark-band: #F7F6F3;
  --color-on-dark-band-muted: rgba(247, 246, 243, 0.72);

  --color-canvas-particle-rgb: 168, 165, 159;
  --color-canvas-ecosystem-signal: var(--color-signal);
  --color-canvas-ecosystem-pulse: rgba(37, 158, 146, 0.12);
  --color-canvas-ecosystem-muted: var(--color-ink-muted);
  --color-canvas-ecosystem-ring: rgba(28, 28, 26, 0.10);
  --color-canvas-ecosystem-connection: rgba(28, 28, 26, 0.04);
  --color-diagram-node-fill: var(--color-surface-elevated);
  --color-diagram-node-core: #9CA3AF;
  --color-diagram-shadow: #1C1C1A;

  /* Brändisilta: SwarmMind App Agentit */
  --color-pulse: #3A5A8C; /* Neo (Sininen) */
  --color-agent-purple: #9D4EDD; /* STAR-0 (Violetti) */
  --color-agent-orange: #FF7D00; /* Spark (Oranssi) */

  /* Uusi sivistynyt tumma tausta (Pehmennetty musta -> Syvä yö/petrooli) */
  --color-bg-dark: #131F22;

  /* ... muut värit ... */

/* Pehmeämpi, sivistynyt tumma liukuväri, joka kuvaa siirtymää turkoosista purppuraan */
  --color-grad-teal-deep: #1A433A;   /* Syvä, petrooliin vivahtava turkoosi */
  --color-grad-blue-deep: #2E3A6B;   /* Pehmeä, syvänsininen välisävy */
  --color-grad-purple-deep: #3E1F5C; /* Sivistynyt, syvä luumu-purppura */

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Grid & Spacing */
  --max-width: 1200px;
  --padding-x-desktop: 80px;
  --padding-x-mobile: 24px;
  --section-padding-y-desktop: 120px;
  --section-padding-y-mobile: 72px;

  /* Motion */
  --transition-slow: 600ms cubic-bezier(0.215, 0.610, 0.355, 1);
  --transition-base: 300ms ease;
  
  /* Brändisilta: SwarmMind App Agentit */
  --color-agent-neo: #2563EB;     /* Neo - Sininen */
  --color-agent-star: #9D4EDD;    /* STAR-0 - Violetti */
  --color-agent-level: #EF4444;   /* LevelMe - Punainen/Koralli */
  --color-agent-teach: #10B981;   /* TeachMe - Vihreä */
  --color-agent-spark: #F59E0B;   /* Spark - Oranssi */

}

html[data-theme="dark"] {
  --color-bg: #131F22;
  --color-background: var(--color-bg);
  --color-surface: #1A292D;
  --color-surface-elevated: #22353A;
  --color-ink: #F3EEE5;
  --color-ink-muted: #D3CBC0;
  --color-ink-faint: #AAB4AE;
  --color-border: rgba(243, 238, 229, 0.16);
  --color-header-bg: color-mix(in srgb, var(--color-bg) 86%, transparent);
  --color-input-bg: var(--color-surface-elevated);

  --color-signal: #44B7AA;
  --color-signal-lt: color-mix(in srgb, var(--color-signal) 14%, var(--color-bg));
  --color-signal-contrast: #FFFFFF;
  --color-signal-hover: color-mix(in srgb, var(--color-signal) 82%, white);
  --color-cta-bg: color-mix(in srgb, var(--color-signal) 18%, var(--color-bg));
  --color-success-bg: color-mix(in srgb, var(--color-signal) 18%, var(--color-bg));
  --color-success-border: color-mix(in srgb, var(--color-signal) 40%, transparent);
  --color-positive-ink: #72E2B8;
  --color-positive-bg: color-mix(in srgb, #10B981 18%, var(--color-bg));
  --color-positive-border: color-mix(in srgb, #72E2B8 44%, transparent);
  --color-warning-ink: #F6C36B;
  --color-warning-bg: color-mix(in srgb, #D97706 18%, var(--color-bg));
  --color-warning-border: color-mix(in srgb, #F6C36B 42%, transparent);
  --color-selection-bg: color-mix(in srgb, var(--color-signal) 28%, var(--color-bg));
  --color-selection-ink: var(--color-ink);

  --color-toggle-track: color-mix(in srgb, var(--color-ink) 12%, var(--color-surface));
  --color-toggle-thumb: #F3EEE5;
  --color-toggle-label: var(--color-ink-muted);
  --color-hero-label: rgba(243, 238, 229, 0.68);
  --color-on-dark-band: #F7F6F3;
  --color-on-dark-band-muted: rgba(247, 246, 243, 0.72);

  --color-canvas-particle-rgb: 199, 193, 182;
  --color-canvas-ecosystem-signal: var(--color-signal);
  --color-canvas-ecosystem-pulse: rgba(68, 183, 170, 0.18);
  --color-canvas-ecosystem-muted: #D2CABD;
  --color-canvas-ecosystem-ring: rgba(243, 238, 229, 0.14);
  --color-canvas-ecosystem-connection: rgba(243, 238, 229, 0.08);
  --color-diagram-node-fill: var(--color-surface-elevated);
  --color-diagram-node-core: #C0BBB1;
  --color-diagram-shadow: #000000;
}

/* ==========================================================================
   3. CSS Reset & Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Typography Base Rules */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

h1 { font-size: clamp(3rem, 5vw, 4.5rem); } /* 48px mobile, 72px desktop */
h2 { font-size: clamp(2.5rem, 4vw, 3rem); }  /* 40px mobile, 48px desktop */
h3 { font-size: clamp(1.5rem, 2vw, 2.5rem); } /* 24px mobile, 40px desktop */

p {
  color: var(--color-ink-muted);
  max-width: 65ch;
  margin-bottom: 1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-signal);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. Polish & Micro-interactions (Pass 6)
   ========================================================================== */

/* Brand-aligned Text Selection */
::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-ink);
}

::-moz-selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-ink);
}

/* Enhanced Focus States */
*:focus-visible {
    outline: 2px solid var(--color-signal);
    outline-offset: 4px;
    border-radius: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Calm Hover States for Cards */
.works-card, .audience-card {
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    will-change: transform;
}

.works-card:hover, .audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px var(--color-border);
}

/* Ecosystem Label Hover Polish */
.label-item {
    transition: opacity var(--transition-base);
}

.ecosystem-labels:hover .label-item {
    opacity: 0.4;
}

.ecosystem-labels .label-item:hover {
    opacity: 1;
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-faint);
}