/**
 * gaskb_style - tokens.css
 * Core design tokens and variables based on Material Design 3 (M3).
 */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  /* Typography */
  --md-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --md-font-brand: var(--md-font-sans);

  /* Geometry & Shapes */
  --md-shape-xs: 4px;
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
  --md-shape-full: 9999px;

  /* Elevation (Soft M3 Shadows) */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
  --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 6px 2px rgba(0, 0, 0, 0.10);
  --md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-standard: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Mobile Safe Areas */
  --md-safe-top: env(safe-area-inset-top, 0px);
  --md-safe-right: env(safe-area-inset-right, 0px);
  --md-safe-bottom: env(safe-area-inset-bottom, 0px);
  --md-safe-left: env(safe-area-inset-left, 0px);

  /* Target minimum size for comfortable touch interactions (accessibility) */
  --md-touch-target: 44px;

  /* Default Color Roles - Light (Amber / Cozy baseline fallback) */
  --md-primary: #8a5a00;
  --md-on-primary: #ffffff;
  --md-primary-container: #ffddb0;
  --md-on-primary-container: #2b1700;
  --md-background: #fff8f2;
  --md-on-background: #201a12;
  --md-surface: #fff8f2;
  --md-on-surface: #201a12;
  --md-surface-container: #f4e8d8;
  --md-surface-container-high: #eee1d0;
  --md-surface-variant: #f0e0cc;
  --md-on-surface-variant: #4f4539;
  --md-outline: #817567;
  --md-outline-variant: #d3c4b4;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
}

/* Default Color Roles - Dark (Auto via prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #ffb955;
    --md-on-primary: #452b00;
    --md-primary-container: #653f00;
    --md-on-primary-container: #ffddb0;
    --md-background: #17130d;
    --md-on-background: #ede0d4;
    --md-surface: #17130d;
    --md-on-surface: #ede0d4;
    --md-surface-container: #241e15;
    --md-surface-container-high: #2e2720;
    --md-surface-variant: #4f4539;
    --md-on-surface-variant: #d3c4b4;
    --md-outline: #9c8f80;
    --md-outline-variant: #4f4539;
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
  }
}

/* Explicit Dark Override via [data-theme="dark"] */
:root[data-theme="dark"] {
  --md-primary: #ffb955;
  --md-on-primary: #452b00;
  --md-primary-container: #653f00;
  --md-on-primary-container: #ffddb0;
  --md-background: #17130d;
  --md-on-background: #ede0d4;
  --md-surface: #17130d;
  --md-on-surface: #ede0d4;
  --md-surface-container: #241e15;
  --md-surface-container-high: #2e2720;
  --md-surface-variant: #4f4539;
  --md-on-surface-variant: #d3c4b4;
  --md-outline: #9c8f80;
  --md-outline-variant: #4f4539;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
}

/* Base Body Styling */
body {
  margin: 0;
  padding: 1rem;
  padding-bottom: calc(1rem + var(--md-safe-bottom));
  font-family: var(--md-font-sans);
  background-color: var(--md-background);
  color: var(--md-on-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessible focus ring defaults */
:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}