/**
 * @file theme.css
 * =========================================================
 * Ironstar Design System — Colors & Type
 * =========================================================
 * Typography: IBM Plex Sans for Latin, IBM Plex Sans JP for CJK
 * Palette: Iron Blue, Midnight + secondary accents
 *
 * Three token layers coexist:
 *   1. Iron palette (`--iron-*`)          — raw brand colours
 *   2. Semantic tokens (`--bg`, `--fg1`…) — design-system level
 *   3. Legacy shadcn (`--background`…)    — kept for backward compatibility
 *      with existing SDCs built against the old Mercury token set; mapped
 *      to Iron palette values. Remove once all components migrate.
 */

/* ---------- Tokens ---------- */
:root {
  /* ===== Primary palette ===== */
  --iron-blue: #2553d4; /* Action / primary brand */
  --iron-midnight: #16205b; /* Deep navy, headers, dark backgrounds */
  --iron-black: #000000;
  --iron-white: #ffffff;
  --iron-steel: #405a74; /* Secondary text, UI chrome */
  --iron-mist: #5d6f7e; /* Tertiary text, disabled states */
  --iron-fog: #dbe2ea; /* Dividers, subtle surfaces */

  /* ===== Secondary palette ===== */
  --iron-electric: #493beb; /* Purple-blue, used in gradient mark */
  --iron-teal: #76c3b9; /* Accent / success-adjacent */
  --iron-teal-soft: #d1e7ea;
  --iron-coral: #d56050; /* Warn / alert */
  --iron-sand: #dcc36f; /* Highlight / caution */
  --iron-blush: #f8dedd;

  /* ===== Brand gradient (from logo) ===== */
  --iron-gradient: linear-gradient(135deg, #3d84f5 0%, #443be4 100%);
  --iron-gradient-subtle: linear-gradient(135deg, rgba(61, 132, 245, 0.08) 0%, rgba(68, 59, 228, 0.08) 100%);

  /* ===== Semantic: light theme (default) ===== */
  --bg: #ffffff;
  --bg-muted: #f6f8fb;
  --bg-subtle: #dbe2ea;
  --bg-inverse: #16205b;

  --fg1: #000000;
  --fg2: #405a74;
  --fg3: #5d6f7e;
  --fg-inverse: #ffffff;
  --fg-link: #2553d4;
  --fg-link-hover: #2553d4;

  --border: #dbe2ea;
  --border-strong: #5d6f7e;
  --border-focus: #2553d4;

  --accent: #2553d4;
  --accent-hover: #2553d4;
  --accent-press: #1c44ba;
  --accent-soft: #e6edfd;

  --success: #216f62;
  --success-soft: #d1e7ea;
  --warning: #b88a1f;
  --warning-soft: #fbefc8;
  --danger: #c4493a;
  --danger-soft: #f8dedd;

  /* ===== Typography ===== */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 72px;
  --fs-6xl: 96px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ===== Spacing (4-based) ===== */
  --space-0: 0;
  --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;
  --space-32: 128px;

  /* ===== Radii ===== */
  --r-none: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ===== Shadows (cool-navy tinted) ===== */
  --shadow-xs: 0 1px 2px rgba(22, 32, 91, 0.06);
  --shadow-sm: 0 2px 4px rgba(22, 32, 91, 0.06), 0 1px 2px rgba(22, 32, 91, 0.05);
  --shadow-md: 0 6px 16px rgba(22, 32, 91, 0.08), 0 2px 4px rgba(22, 32, 91, 0.04);
  --shadow-lg: 0 14px 32px rgba(22, 32, 91, 0.12), 0 4px 8px rgba(22, 32, 91, 0.06);
  --shadow-xl: 0 24px 56px rgba(22, 32, 91, 0.18), 0 8px 16px rgba(22, 32, 91, 0.08);
  --shadow-glow: 0 0 0 4px rgba(55, 106, 239, 0.18);
  --shadow-ring-focus: 0 0 0 3px rgba(55, 106, 239, 0.35);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-xslow: 560ms;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-wide: 1536px;

  /* ---------- Legacy shadcn compatibility (Mercury base theme) ----------
   * Existing SDCs reference these. Mapped to Iron palette.
   * Remove once every component migrates to semantic tokens above.
   */
  --background: var(--bg);
  --foreground: var(--fg1);
  --card: var(--bg-muted);
  --card-foreground: var(--iron-midnight);
  --primary: var(--iron-blue);
  --primary-foreground: var(--iron-white);
  --secondary: var(--iron-midnight);
  --secondary-foreground: var(--iron-white);
  --muted: var(--bg-muted);
  --muted-foreground: var(--fg2);
  --accent-foreground: var(--iron-white);
  --destructive: var(--danger);
  --destructive-foreground: var(--iron-white);
  --input: var(--border);
  --radius: var(--r-md);
  --shadow: var(--shadow-sm);
  --shadow-2xs: var(--shadow-xs);
  --shadow-2xl: var(--shadow-xl);

  --spacing: 0.25rem;

  /* Navbar height used by hero overlay logic in existing SDCs */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* Dark theme — midnight forward */
[data-theme="dark"] {
  --bg: #0b1133;
  --bg-muted: #131c4a;
  --bg-subtle: #1b2660;
  --bg-inverse: #ffffff;
  --fg1: #ffffff;
  --fg2: #b8c4dc;
  --fg3: #7e8db0;
  --fg-inverse: #16205b;
  --fg-link: #7aa0f7;
  --fg-link-hover: #adc5fa;
  --border: #26306a;
  --border-strong: #4a5a9e;
  --accent-soft: rgba(55, 106, 239, 0.16);
}

/* ---------- Container width / padding override ----------
 * Source design uses `<Container wide>` with maxWidth 1440 + 32px horizontal
 * padding (Primitives.jsx:4-13). Tailwind's `.container` utility caps at xl
 * (1280px) which makes content feel pressed against viewport edges at common
 * 1280-1440px laptop widths. Bump the cap to 1440 and pad to 32px each side
 * at desktop viewports so live content matches source's container. */
@media (min-width: 1024px) {
  .container {
    padding-inline: 32px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1440px;
  }
}

/* When a section SDC is nested inside another (e.g. FAQ outer wrap → inner
 * 50-50 intro grid), the inner section re-applies `.container` max-width
 * and padding-inline, doubling the indent. The outer section.twig adds the
 * `cq-full` class to inner sections to neutralise mx-auto/width, but
 * padding-inline still applies. Strip padding from a `.container` that
 * sits inside another `.container`. */
.container .container {
  padding-inline: 0;
  max-width: none;
}

/* ---------- Semantic element styles ---------- */
html,
body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Element-selector defaults are placed in @layer base so Tailwind utilities
 * in @layer utilities (e.g. .text-primary-foreground used by SDCs on dark
 * bands) win the cascade. Unlayered rules beat layered rules regardless of
 * specificity, so a plain `h2 { color: #000 }` would override any text
 * utility class. Putting these in @layer base brings them under utilities
 * in the layer order. */
@layer base {
  h1,
  .h1 {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-5xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg1);
    margin: 0 0 var(--space-6);
  }
  h2,
  .h2 {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-3xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--fg1);
    margin: 0 0 var(--space-5);
  }
  h3,
  .h3 {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--fg1);
    margin: 0 0 var(--space-4);
  }
  h4,
  .h4 {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--fg1);
    margin: 0 0 var(--space-3);
  }
  h5,
  .h5 {
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--fg1);
    margin: 0 0 var(--space-3);
  }
  h6,
  .h6 {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--fg1);
    margin: 0 0 var(--space-2);
  }

  /* `p` and `.body` intentionally don't set `color`. Body text inherits its
   * colour from the surrounding context (html/body or the SDC wrapper, e.g.
   * .text-background on inverted bands). Setting `color` here would block
   * that inheritance and force every `<p>` dark. */
  p,
  .body {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-4);
  }
}
.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  font-weight: var(--fw-light);
}
.small,
small {
  font-size: var(--fs-sm);
  color: var(--fg2);
}
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring-focus);
  border-radius: 2px;
}

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-muted);
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
  color: var(--iron-midnight);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: rgba(55, 106, 239, 0.22);
  color: var(--iron-midnight);
}

/* Drupal/canvas wraps the page body content in `.region.region-content` with
 * a max-width:1280 cap. That cap prevents section bands (heroes, status hero,
 * CTA, footer-CTA) from running edge-to-edge. The Claude Design source
 * intends full-bleed bands with content centred inside, so we drop the cap
 * and let each SDC manage its own internal content width via .container or
 * inline padding. */
.region.region-content {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}