/* pyroclastic.cloud design tokens
   OKLCH-first with hex fallbacks. Light is
   default; dark via prefers-color-scheme
   and [data-theme]. */

:root {
  /* Neutral scale (ash / basalt / steam) */
  --ash-0:   #ffffff;
  --ash-25:  #f7fafc;
  --ash-50:  #edf1f5;
  --ash-100: #dce3ea;
  --ash-200: #c2ccd6;
  --ash-300: #a0aebb;
  --ash-400: #7c8b98;
  --ash-500: #5a6b78;
  --ash-600: #3d4c5a;
  --ash-700: #26333f;
  --ash-800: #16212a;
  --ash-900: #0e1519;
  --ash-950: #080c0f;

  /* Brand + supporting (hex fallback) */
  --sky-primary:      #1a5f8a;
  --sky-primary-dark: #74b6e0;
  --sky-tint:         #8fc5e8;
  --ember:            #e8763b;
  --lava:             #b4341f;
  --steam:            #f3ece4;
  --caldera:          #2e7d5b;
  --peach:            #f4c79b;

  /* Semantic (light) */
  --color-bg:            var(--ash-25);
  --color-surface:       var(--ash-0);
  --color-surface-elev:  var(--ash-0);
  --color-border:        var(--ash-100);
  --color-horizon:       #1f4f75;
  --color-text:          #14202b;
  --color-text-2:        var(--ash-600);
  --color-text-muted:    var(--ash-500);
  --color-link:          var(--sky-primary);
  --color-focus:         var(--sky-primary);
  --color-success:       var(--caldera);
  --color-warning:       #b8791e;
  --color-danger:        var(--lava);
  --color-info:          var(--sky-primary);
  --color-on-primary:    #ffffff;

  /* Per-volcano accent (default: Vesuvius) */
  --volcano-accent:      var(--sky-primary);
  --volcano-accent-dark: var(--sky-primary-dark);

  /* Typography */
  --font-body: "IBM Plex Sans", system-ui,
    sans-serif;
  --font-display: "Space Grotesk",
    "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono",
    ui-monospace, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.75rem;
  --fs-3xl:  3.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows (light) */
  --shadow-1: 0 1px 2px rgba(14,21,25,.08);
  --shadow-2: 0 2px 8px rgba(14,21,25,.10);
  --shadow-3: 0 8px 24px rgba(14,21,25,.12);

  /* Motion */
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
}

/* OKLCH upgrade for capable browsers */
@supports (color: oklch(0.5 0.1 240)) {
  :root {
    --sky-primary:      oklch(0.49 0.09 240);
    --sky-primary-dark: oklch(0.75 0.09 240);
    --sky-tint:         oklch(0.80 0.08 236);
    --ember:            oklch(0.68 0.16 47);
    --lava:             oklch(0.51 0.17 33);
    --caldera:          oklch(0.55 0.10 160);
    --peach:            oklch(0.85 0.07 66);
  }
}

/* Dark via system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:           var(--ash-900);
    --color-surface:      var(--ash-800);
    --color-surface-elev: var(--ash-700);
    --color-border:       var(--ash-700);
    --color-horizon:      #12293b;
    --color-text:         #e6edf3;
    --color-text-2:       #aab9c6;
    --color-text-muted:   var(--ash-400);
    --color-link:         var(--sky-primary-dark);
    --color-focus:        var(--sky-primary-dark);
    --color-success:      #5fc79a;
    --color-warning:      #e6b45a;
    --color-danger:       #f08a5d;
    --color-info:         var(--sky-primary-dark);
    --color-on-primary:   #0e1519;
    --volcano-accent:     var(--volcano-accent-dark);
    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 2px 8px rgba(0,0,0,.55);
    --shadow-3: 0 8px 24px rgba(0,0,0,.6);
  }
}

/* Explicit dark override */
[data-theme="dark"] {
  --color-bg:           var(--ash-900);
  --color-surface:      var(--ash-800);
  --color-surface-elev: var(--ash-700);
  --color-border:       var(--ash-700);
  --color-horizon:      #12293b;
  --color-text:         #e6edf3;
  --color-text-2:       #aab9c6;
  --color-text-muted:   var(--ash-400);
  --color-link:         var(--sky-primary-dark);
  --color-focus:        var(--sky-primary-dark);
  --color-success:      #5fc79a;
  --color-warning:      #e6b45a;
  --color-danger:       #f08a5d;
  --color-info:         var(--sky-primary-dark);
  --color-on-primary:   #0e1519;
  --volcano-accent:     var(--volcano-accent-dark);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,.55);
  --shadow-3: 0 8px 24px rgba(0,0,0,.6);
}

/* Per-volcano overrides */
[data-volcano="stromboli"] {
  --volcano-accent:      oklch(0.52 0.10 47);
  --volcano-accent-dark: oklch(0.75 0.10 47);
}
[data-volcano="kilauea"] {
  --volcano-accent:      oklch(0.50 0.09 160);
  --volcano-accent-dark: oklch(0.75 0.09 160);
}
[data-volcano="hekla"] {
  --volcano-accent:      oklch(0.50 0.09 300);
  --volcano-accent-dark: oklch(0.75 0.09 300);
}

/* Reduced motion */
@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;
  }
}