/* ===================================================================
 * oasis/theme.css  —  OASIS brand theme tokens + base reset
 *
 * Extracted from customer mockups (oasis_signup_v05.html, etc.) so all
 * Thymeleaf templates share one source of truth for colors, spacing,
 * shadows, and typography. Update the values here, not in templates.
 *
 * Loaded by layouts/main.html AFTER bootstrap.min.css, BEFORE forms.css.
 *
 * Reference: oasis-docs/01_customer-supplied/OASIS/oasis_signup_v05.html
 *            § :root CSS custom properties
 * =================================================================== */

/* Google Fonts: Noto Sans JP (Japanese) + IBM Plex Sans (Latin) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------
 * Design tokens  —  single source of truth for OASIS look & feel
 * ------------------------------------------------------------- */
:root {
  /* Header */
  --hdr-bg: #01ad6e;
  --hdr-text: #E8F0EB;
  --hdr-accent: #7CCCA0;

  /* Surfaces */
  --bg: #ECEEE9;
  --surface: #FFFFFF;
  --surface-alt: #F6F7F4;

  /* Borders */
  --border: #CDD0C8;
  --border-light: #E2E4DE;

  /* Text */
  --text: #1C1F1A;
  --text-sec: #5A5F56;
  --text-muted: #8E938A;

  /* Accents (OASIS green) */
  --accent: #2D6A4F;
  --accent-hover: #245238;

  /* Status colors */
  --good: #2B8A3E;
  --danger: #DC3545;
  /* Matches the mockup (oasis_signup_v05.html § --orange). */
  --orange: #FF9900;
  --orange-hover: #E68A00;
  --info-blue: #2196F3;

  /* Form input background (subtle green tint) */
  --field-bg: #E8F5E9;
  --field-bg-readonly: #F3F4F1;

  /* Inspection-specific */
  --hdr-bg-light: #02C47D;
  --col-inspect-active: #F0FAF3;
  --footer-bg: #434343;
  --shadow-pop: 0 12px 40px rgba(28,31,26,0.20);
  --banner-bg: #FFF8E7;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(28, 31, 26, 0.06);
  --shadow-sm: 0 1px 4px rgba(28, 31, 26, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 31, 26, 0.10);
  --shadow-lg: 0 8px 32px rgba(28, 31, 26, 0.14);

  /* Geometry */
  --radius: 6px;
  --radius-lg: 10px;
  --transition: 0.18s ease;
}

/* ---------------------------------------------------------------
 * Base reset + typography
 * ------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Anchor-based buttons (<a class="…btn…">) are used for native GET navigation
 * but must look like real buttons, so strip the browser's default link underline
 * in every state. Ordinary text links keep their underline (their anchors have
 * no "btn" class). <button> elements are not underlined by default. */
a[class*="btn"],
a[class*="btn"]:hover,
a[class*="btn"]:active,
a[class*="btn"]:visited,
a[class*="btn"]:focus {
  text-decoration: none;
}

html { font-size: 15.5px; scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
               'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content area — pushed below the fixed header + step bar.
 * Override per-page when the layout doesn't use the global header. */
.main-content {
  flex: 1;
  padding: 124px 16px 100px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}