/**
 * MMS V2 Design Tokens
 * Panasonic Precision Industrial Design System
 * Typography: Geist Sans / Plus Jakarta Sans (Primary UI) + Geist Mono (Tabular/Codes)
 * Color Palette: Calm Industrial (Canvas #f4f7fa, Surface #ffffff, Panasonic Blue #0057b8)
 * Guidelines: DESIGN.md & REBUILD.md
 */

/* ========================================================================
   TYPOGRAPHY: Local WOFF2 Offline Fonts (Zero External CDN Dependency)
   ======================================================================== */

@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/v2/fonts/geist/geist-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/v2/fonts/geist/geist-medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/v2/fonts/geist/geist-semibold.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/v2/fonts/geist/geist-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/v2/fonts/geist/geist-mono.woff2') format('woff2');
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/v2/fonts/jakarta/plus-jakarta-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/v2/fonts/jakarta/plus-jakarta-sans-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================================================================
   DESIGN TOKENS: Official Panasonic Industrial Precision Palette
   ======================================================================== */

:root {
  /* Official DESIGN.md System Tokens */
  --panasonic-blue: #0057b8;
  --color-brand: var(--panasonic-blue, #0057b8);
  --color-brand-strong: #00458f;
  --color-brand-soft: #ebf3fb;
  --color-brand-border: #b8d4f2;
  --color-ink: #122033;
  --color-ink-muted: #536276;
  --color-ink-faint: #8a99ad;
  --color-canvas: #f4f7fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-surface-hover: #f1f5f9;
  --color-surface-active: #e2e8f0;
  --color-line: #d7dee8;
  --color-line-strong: #b8c4d2;
  --color-attention: #b56a00;
  --color-attention-bg: #fdf5ea;
  --color-attention-border: #f7d5a5;
  --color-success: #087f5b;
  --color-success-bg: #e6f6ef;
  --color-success-border: #a3e5c7;
  --color-danger: #b42318;
  --color-danger-bg: #fdf2f2;
  --color-danger-border: #f8c8c8;
  --color-focus: #0057b8;

  /* Backward Compatible MMS-Prefixed Mapping */
  --mms-canvas: var(--color-canvas);
  --mms-surface: var(--color-surface);
  --mms-surface-subtle: var(--color-surface-subtle);
  --mms-surface-hover: var(--color-surface-hover);
  --mms-surface-active: var(--color-surface-active);
  --mms-border: var(--color-line);
  --mms-border-strong: var(--color-line-strong);

  /* Text & Ink */
  --mms-obsidian: var(--color-ink);
  --mms-obsidian-muted: var(--color-ink-muted);
  --mms-obsidian-subtle: var(--color-ink-faint);
  --mms-obsidian-faint: var(--color-line);

  /* Brand Primary */
  --mms-brand-primary: var(--color-brand);
  --mms-brand-primary-hover: var(--color-brand-strong);
  --mms-brand-primary-active: #003366;
  --mms-brand-primary-soft: var(--color-brand-soft);
  --mms-brand-primary-border: var(--color-brand-border);

  /* Accents */
  --mms-accent-indigo: var(--color-brand);
  --mms-accent-indigo-hover: var(--color-brand-strong);
  --mms-accent-indigo-active: #003366;
  --mms-accent-indigo-soft: var(--color-brand-soft);
  --mms-accent-indigo-border: var(--color-brand-border);

  --mms-accent-azure: var(--color-brand);
  --mms-accent-azure-hover: var(--color-brand-strong);
  --mms-accent-azure-active: #003366;
  --mms-accent-azure-soft: var(--color-brand-soft);
  --mms-accent-azure-border: var(--color-brand-border);

  --mms-accent-machine: #1e3a8a;
  --mms-accent-machine-soft: #eff6ff;
  --mms-accent-machine-border: #bfdbfe;

  --mms-accent-crimson: var(--color-danger);
  --mms-accent-crimson-hover: #91180f;
  --mms-accent-crimson-soft: var(--color-danger-bg);
  --mms-accent-crimson-border: var(--color-danger-border);

  /* Status Colors */
  --mms-status-success: var(--color-success);
  --mms-status-success-hover: #066649;
  --mms-status-success-bg: var(--color-success-bg);
  --mms-status-success-border: var(--color-success-border);

  --mms-status-warning: var(--color-attention);
  --mms-status-warning-hover: #8f5300;
  --mms-status-warning-bg: var(--color-attention-bg);
  --mms-status-warning-border: var(--color-attention-border);

  --mms-status-danger: var(--color-danger);
  --mms-status-danger-hover: #91180f;
  --mms-status-danger-bg: var(--color-danger-bg);
  --mms-status-danger-border: var(--color-danger-border);

  --mms-status-info: var(--color-brand);
  --mms-status-info-hover: var(--color-brand-strong);
  --mms-status-info-bg: var(--color-brand-soft);
  --mms-status-info-border: var(--color-brand-border);

  --mms-status-neutral: var(--color-ink-muted);
  --mms-status-neutral-hover: var(--color-ink);
  --mms-status-neutral-bg: var(--color-surface-subtle);
  --mms-status-neutral-border: var(--color-line);

  /* Typography Tokens: Geist Sans & Geist Mono (Offline) */
  --mms-font-sans: 'Geist Sans', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mms-font-tabular: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', monospace;

  /* Typography Tracking */
  --mms-tracking-tighter: -0.02em;
  --mms-tracking-tight: -0.01em;
  --mms-tracking-normal: 0em;
  --mms-tracking-wide: 0.02em;
  --mms-tracking-wider: 0.04em;

  /* Border Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Elevation Shadows (Restrained Industrial Elevation) */
  --shadow-xs: 0 1px 2px 0 rgba(18, 32, 51, 0.04);
  --shadow-subtle: 0 1px 3px 0 rgba(18, 32, 51, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(18, 32, 51, 0.05);
  --shadow-elevated: 0 4px 12px 0 rgba(18, 32, 51, 0.08);
  --shadow-overlay: 0 12px 24px 0 rgba(18, 32, 51, 0.12);
  --shadow-station: 0 4px 12px 0 rgba(18, 32, 51, 0.08);

  /* Layout Dimension Tokens */
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 68px;
  --topbar-height: 54px;
  --station-header-height: 52px;

  /* Touch Target Minimum (WCAG AAA Compliant >= 44px) */
  --touch-target-min: 44px;
  --touch-target-station: 52px;

  /* Transition Tokens (No transition: all) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================
   BASE RESET & TYPOGRAPHY
   ======================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden],
[hidden="true"],
.v2-alert[hidden],
.v2-alert-banner[hidden],
.hidden {
  display: none !important;
}

html {
  font-family: var(--mms-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  background: var(--mms-canvas);
  color: var(--mms-obsidian);
  font-family: var(--mms-font-sans);
  overflow-x: hidden;
}

/* Universal Form Control Font Inheritance */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ========================================================================
   TABULAR NUMERALS (Force Monospace Digits)
   ======================================================================== */

.tabular-nums,
table td,
table th,
.metric-value,
.kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ========================================================================
   ACCESSIBILITY: Keyboard Focus Ring Indicator (WCAG AA Compliance)
   ======================================================================== */

:focus-visible {
  outline: 2px solid var(--color-focus, var(--mms-brand-primary, #0057b8));
  outline-offset: 2px;
}