/**
 * @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 palette =====
   * Raw approved brand hues. Don't hand-pair these with arbitrary text/bg —
   * use the accessible `.swatch-*` combination classes below (or, for free
   * Tailwind composition, the `bg-brand-* / text-brand-* / border-brand-*`
   * utilities mapped in main.css). Each hue supports up to three WCAG-AA
   * combos; the five "dark" hues get all three, the six "light" hues skip the
   * coloured-text outline because the hue fails 4.5:1 on white. */
  --brand-blue: #376aef; /* Ironstar Blue — dark */
  --brand-navy: #16205b; /* Ironstar Navy — dark */
  --brand-indigo: #493beb; /* Indigo — dark */
  --brand-coral: #d34136; /* Coral — dark */
  --brand-grey-1: #516e8f; /* Grey Dark — dark */
  --brand-teal: #31a3a4; /* Teal — light */
  --brand-teal-light: #9cdee8; /* Light Teal — light */
  --brand-gold: #d9be64; /* Gold — light */
  --brand-pink: #f8c1c5; /* Pink — light */
  --brand-grey-2: #93aab9; /* Grey Medium — light */
  --brand-grey-3: #dbe2ea; /* Grey Light — light */

  /* Accessible text colour to sit ON each solid hue (the `solid` surface
   * treatment). Dark hues take white; light hues take black. Single source for
   * the .swatch-* solids and the solid surface of pillar-panel / feature-card. */
  --brand-blue-on: #ffffff;
  --brand-navy-on: #ffffff;
  --brand-indigo-on: #ffffff;
  --brand-coral-on: #ffffff;
  --brand-grey-1-on: #ffffff;
  --brand-grey-2-on: #ffffff;
  --brand-grey-3-on: #000000;
  --brand-teal-on: #ffffff;
  --brand-teal-light-on: #000000;
  --brand-gold-on: #000000;
  --brand-pink-on: #000000;

  /* "Ink" colour for the OUTLINE treatment — the hue used as heading/highlight
   * text on a white background, darkened with black only as far as needed to
   * clear 4.5:1. The five genuinely-dark hues are already legible so ink == hue
   * (your "if --*-on is white, use the hue" rule). The lighter hues are
   * progressively darkened until accessible. NOTE: teal & grey-2 carry a white
   * --*-on for solid fills, but their raw hue is NOT legible as text on white
   * (3.04:1 / 2.42:1), so their ink is darkened like the other light hues. */
  --brand-blue-ink: var(--brand-blue);
  --brand-navy-ink: var(--brand-navy);
  --brand-indigo-ink: var(--brand-indigo);
  --brand-coral-ink: var(--brand-coral);
  --brand-grey-1-ink: var(--brand-grey-1);
  --brand-teal-ink: color-mix(in srgb, var(--brand-teal) 78%, #000);
  --brand-teal-light-ink: color-mix(in srgb, var(--brand-teal-light) 54%, #000);
  --brand-gold-ink: color-mix(in srgb, var(--brand-gold) 58%, #000);
  --brand-pink-ink: color-mix(in srgb, var(--brand-pink) 54%, #000);
  --brand-grey-2-ink: color-mix(in srgb, var(--brand-grey-2) 68%, #000);
  --brand-grey-3-ink: color-mix(in srgb, var(--brand-grey-3) 50%, #000);

  /* ===== 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: 1440px;
  --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);
  }
}

:lang(ja) {
  --font-sans: "IBM Plex Sans JP", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif JP", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  word-break: normal;
  word-break: auto-phrase; /* Falls back to normal if unsupported. */
  line-break: strict;
}

/* 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;
}

/* ---------- Brand palette combination classes ----------
 * Accessible, pre-paired colour treatments. Add ONE class to an element to get a
 * guaranteed combo. Three variants per hue, all 11 hues:
 *
 *   .swatch-{hue}          solid   — hue background, --*-on text (white/black)
 *   .swatch-{hue}-outline  outline — white bg, --*-ink text + hue border
 *   .swatch-{hue}-quiet    neutral — white bg, black text, hue border
 *
 * solid uses the --brand-*-on token (the chosen text colour on the fill);
 * outline uses --brand-*-ink (the hue darkened until legible on white, == hue
 * for the dark hues). Pair only via these classes; do not hand-mix e.g.
 * bg-brand-pink with text-white. */

[class*="swatch-"] {
  border: 1px solid transparent;
}

.swatch-brand-blue {
  background: var(--brand-blue);
  color: var(--brand-blue-on);
  border-color: var(--brand-blue);
}
.swatch-brand-blue-outline {
  background: var(--iron-white);
  color: var(--brand-blue-ink);
  border-color: var(--brand-blue);
}
.swatch-brand-blue-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-blue);
}

.swatch-brand-navy {
  background: var(--brand-navy);
  color: var(--brand-navy-on);
  border-color: var(--brand-navy);
}
.swatch-brand-navy-outline {
  background: var(--iron-white);
  color: var(--brand-navy-ink);
  border-color: var(--brand-navy);
}
.swatch-brand-navy-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-navy);
}

.swatch-indigo {
  background: var(--brand-indigo);
  color: var(--brand-indigo-on);
  border-color: var(--brand-indigo);
}
.swatch-indigo-outline {
  background: var(--iron-white);
  color: var(--brand-indigo-ink);
  border-color: var(--brand-indigo);
}
.swatch-indigo-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-indigo);
}

.swatch-coral {
  background: var(--brand-coral);
  color: var(--brand-coral-on);
  border-color: var(--brand-coral);
}
.swatch-coral-outline {
  background: var(--iron-white);
  color: var(--brand-coral-ink);
  border-color: var(--brand-coral);
}
.swatch-coral-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-coral);
}

.swatch-grey-1 {
  background: var(--brand-grey-1);
  color: var(--brand-grey-1-on);
  border-color: var(--brand-grey-1);
}
.swatch-grey-1-outline {
  background: var(--iron-white);
  color: var(--brand-grey-1-ink);
  border-color: var(--brand-grey-1);
}
.swatch-grey-1-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-grey-1);
}

.swatch-teal {
  background: var(--brand-teal);
  color: var(--brand-teal-on);
  border-color: var(--brand-teal);
}
.swatch-teal-outline {
  background: var(--iron-white);
  color: var(--brand-teal-ink);
  border-color: var(--brand-teal);
}
.swatch-teal-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-teal);
}

.swatch-teal-light {
  background: var(--brand-teal-light);
  color: var(--brand-teal-light-on);
  border-color: var(--brand-teal-light);
}
.swatch-teal-light-outline {
  background: var(--iron-white);
  color: var(--brand-teal-light-ink);
  border-color: var(--brand-teal-light);
}
.swatch-teal-light-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-teal-light);
}

.swatch-gold {
  background: var(--brand-gold);
  color: var(--brand-gold-on);
  border-color: var(--brand-gold);
}
.swatch-gold-outline {
  background: var(--iron-white);
  color: var(--brand-gold-ink);
  border-color: var(--brand-gold);
}
.swatch-gold-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-gold);
}

.swatch-pink {
  background: var(--brand-pink);
  color: var(--brand-pink-on);
  border-color: var(--brand-pink);
}
.swatch-pink-outline {
  background: var(--iron-white);
  color: var(--brand-pink-ink);
  border-color: var(--brand-pink);
}
.swatch-pink-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-pink);
}

.swatch-grey-2 {
  background: var(--brand-grey-2);
  color: var(--brand-grey-2-on);
  border-color: var(--brand-grey-2);
}
.swatch-grey-2-outline {
  background: var(--iron-white);
  color: var(--brand-grey-2-ink);
  border-color: var(--brand-grey-2);
}
.swatch-grey-2-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-grey-2);
}

.swatch-grey-3 {
  background: var(--brand-grey-3);
  color: var(--brand-grey-3-on);
  border-color: var(--brand-grey-3);
}
.swatch-grey-3-outline {
  background: var(--iron-white);
  color: var(--brand-grey-3-ink);
  border-color: var(--brand-grey-3);
}
.swatch-grey-3-quiet {
  background: var(--iron-white);
  color: var(--iron-black);
  border-color: var(--brand-grey-3);
}

/* ---------- 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;
}