/* ============================================
 * Autais Corporate Site — Shared Styles
 * Pattern F: Japanese SaaS Classic
 * ============================================ */

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

:root {
  --bg: #ffffff;
  --bg-2: #f6f8fc;
  --bg-3: #eef3fb;
  --paper: #fffefb;
  --fg: #0f172a;
  --fg-2: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --muted-3: #cbd5e1;
  --line: #e2e8f0;
  --p: #2563eb;
  --p-dark: #1d4ed8;
  --p-soft: #dbeafe;
  --accent: #10b981;
  --accent-soft: #ecfdf5;
  --accent-bg: #dcfce7;
  --accent-fg: #15803d;
  --accent-bg-2: #f0fdf4;
  --accent-light: #86efac;
  --accent-mid: #a7f3d0;
  --accent-deep: #065f46;
  --warm: #f59e0b;
  --warm-soft: #fef3c7;
  --warm-bg: #fde68a;
  --warm-fg: #b45309;
  --warm-bg-2: #fffbeb;
  --warm-bg-3: #fffbf2;
  --warm-deep: #92400e;
  --warm-bright: #ea580c;
  --danger: #ef4444;
  --danger-fg: #dc2626;
  --danger-soft: #fef2f2;
  --danger-bg: #fecaca;
  --danger-deep: #991b1b;
  --p-soft-2: #eff6ff;
  --p-soft-3: #bfdbfe;
  --p-fg-deep: #1e3a8a;
  --info-soft: #7dd3fc;
  --paper-2: #fffefb;
  --line-2: #e5e7eb;
  --pt-knowhow: #ea580c;
  --pt-column: #7c3aed;
  --pt-report: #0d9488;

  /* Spacing scale (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius — project rule: max 4px (pill 9999px is exception) */
  --r: 4px;
  --r-pill: 9999px;

  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 32px;
  --fs-display: 40px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10);

  /* Easing / motion */
  --ease: .18s ease;
  --ease-slow: .3s ease;

  /* Breakpoints (reference values; for use in media queries via documentation) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 980px;
  --bp-xl: 1280px;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
  line-height: 1.6;
}

/* ===== Material Icons base styles ===== */
.mi {
  font-family: "Material Symbols Outlined", "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.mi-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.mi-sm { font-size: 18px; }
.mi-lg { font-size: 32px; }
.mi-xl { font-size: 40px; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }