/**
 * Sophisticated Middle-Contrast Grayscale Design Tokens - Subtle Neumorphism
 * Soft dual-shadow elevations, gentle tactile highlights, and tranquil monochrome aesthetic.
 */

:root {
  /* Light Theme - Soft Neumorphic Grayscale */
  --md-sys-color-primary: #27272a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e4e4e7;
  --md-sys-color-on-primary-container: #18181b;

  --md-sys-color-secondary: #52525b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ebecee;
  --md-sys-color-on-secondary-container: #27272a;

  --md-sys-color-tertiary: #71717a;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e4e4e7;
  --md-sys-color-on-tertiary-container: #18181b;

  --md-sys-color-background: #eceef1;
  --md-sys-color-on-background: #18181b;

  --md-sys-color-surface: #f4f5f7;
  --md-sys-color-on-surface: #18181b;
  --md-sys-color-surface-variant: #ebecee;
  --md-sys-color-on-surface-variant: #52525b;
  --md-sys-color-surface-container: #eaebef;
  --md-sys-color-surface-container-high: #e2e4e8;

  --md-sys-color-outline: #9ca3af;
  --md-sys-color-outline-variant: #dcdfe4;

  /* Card Colors */
  --card-bg-normal: #ffffff;
  --card-border-normal: #dcdfe4;
  --card-accent-normal: #3f3f46;

  --card-bg-super: #f2f3f6;
  --card-border-super: #a1a1aa;
  --card-accent-super: #18181b;

  --card-bg-pe: #f9fafb;
  --card-border-pe: #dcdfe4;
  --card-accent-pe: #71717a;

  --card-bg-conflict: #f4f4f7;
  --card-border-conflict: #71717a;

  --color-lunch-bg: #eaebef;
  --color-lunch-border: #dcdfe4;

  /* Subtle Neumorphic Dual Shadows (Light) */
  --neumorph-flat: 2px 2px 5px rgba(166, 171, 189, 0.28), -2px -2px 5px rgba(255, 255, 255, 0.85);
  --neumorph-raised: 3px 4px 8px rgba(166, 171, 189, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.9);
  --neumorph-card: 2px 3px 7px rgba(166, 171, 189, 0.25), -2px -2px 6px rgba(255, 255, 255, 0.85);
  --neumorph-hover: 4px 6px 14px rgba(166, 171, 189, 0.4), -3px -3px 9px rgba(255, 255, 255, 0.95);
  --neumorph-inset: inset 2px 2px 4px rgba(166, 171, 189, 0.22), inset -2px -2px 4px rgba(255, 255, 255, 0.85);

  /* Spacing Metrics */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;

  --radius-xs: 12px;
  --radius-sm: 20px;
  --radius-md: 28px;
  --radius-lg: 36px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Sans", "Meiryo", sans-serif;
  --font-size-xs: 0.8125rem;  /* 13px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 0.9375rem;  /* 15px */
  --font-size-lg: 1.0625rem;  /* 17px */
  --font-size-xl: 1.25rem;    /* 20px */

  --shadow-sm: var(--neumorph-flat);
  --shadow-md: var(--neumorph-raised);

  --transition-smooth: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
 * Heroicons Vector Icon Styles
 * ========================================================= */
.heroicon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.heroicon-xs {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
  stroke-width: 2;
}

.heroicon-sm {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.heroicon-md {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.2em;
}

.heroicon-lg {
  width: 1.6em;
  height: 1.6em;
  vertical-align: -0.25em;
}

/* Dark Theme - Quiet Neumorphic Charcoal */
[data-theme="dark"] {
  --md-sys-color-primary: #f4f4f5;
  --md-sys-color-on-primary: #18181b;
  --md-sys-color-primary-container: #3f3f46;
  --md-sys-color-on-primary-container: #f4f4f5;

  --md-sys-color-secondary: #a1a1aa;
  --md-sys-color-on-secondary: #18181b;
  --md-sys-color-secondary-container: #232328;
  --md-sys-color-on-secondary-container: #f4f4f5;

  --md-sys-color-tertiary: #d4d4d8;
  --md-sys-color-on-tertiary: #18181b;
  --md-sys-color-tertiary-container: #27272a;
  --md-sys-color-on-tertiary-container: #f4f4f5;

  --md-sys-color-background: #121215;
  --md-sys-color-on-background: #f4f4f5;

  --md-sys-color-surface: #18181c;
  --md-sys-color-on-surface: #f4f4f5;
  --md-sys-color-surface-variant: #222226;
  --md-sys-color-on-surface-variant: #a1a1aa;
  --md-sys-color-surface-container: #1b1b1f;
  --md-sys-color-surface-container-high: #242429;

  --md-sys-color-outline: #52525b;
  --md-sys-color-outline-variant: #27272c;

  --card-bg-normal: #1d1d22;
  --card-border-normal: #2a2a30;
  --card-accent-normal: #d4d4d8;

  --card-bg-super: #232329;
  --card-border-super: #52525b;
  --card-accent-super: #ffffff;

  --card-bg-pe: #1d1d22;
  --card-border-pe: #3f3f46;
  --card-accent-pe: #a1a1aa;

  --card-bg-conflict: #242429;
  --card-border-conflict: #a1a1aa;

  --color-lunch-bg: #151518;
  --color-lunch-border: #242429;

  /* Subtle Neumorphic Dual Shadows (Dark) */
  --neumorph-flat: 2px 2px 5px rgba(0, 0, 0, 0.45), -2px -2px 5px rgba(255, 255, 255, 0.03);
  --neumorph-raised: 3px 4px 9px rgba(0, 0, 0, 0.55), -2px -2px 6px rgba(255, 255, 255, 0.04);
  --neumorph-card: 2px 3px 6px rgba(0, 0, 0, 0.45), -1px -1px 4px rgba(255, 255, 255, 0.03);
  --neumorph-hover: 4px 6px 12px rgba(0, 0, 0, 0.65), -2px -2px 7px rgba(255, 255, 255, 0.05);
  --neumorph-inset: inset 2px 2px 5px rgba(0, 0, 0, 0.55), inset -2px -2px 5px rgba(255, 255, 255, 0.03);
}