/*
 * curumi-ds.css — shared design tokens & component classes for curumi-corp products
 * (curumi-id / speedtag / ad-precheck).
 *
 * Source of truth: ~/_pjsc/curumi-corp/brand.config.ts (colors.primary/accent/background)
 * and ~/_pjsc/curumi-corp/apps/web/src/styles/app.css (extended palette, radius, shadow),
 * with the richer token/component set promoted from curumi-id's inline styles (the most
 * polished surface, used here as the visual reference). Values below are transcribed by
 * hand, not generated — keep this file BYTE-IDENTICAL across the three sibling repos.
 *
 * Superset & backward compatible: every token/class an existing consumer already relies on
 * is preserved with the same visual result; the additions let each surface drop its
 * duplicated inline :root and page-level component styles and rely on this shared file.
 *
 * Self-contained by design: no @import, no external font/CDN, no data: URIs. The font
 * stack names Inter / Noto Sans JP but never FETCHES them — they are used only if already
 * installed locally, otherwise it falls back to system fonts. Safe under a strict CSP
 * (`default-src 'self'` + `style-src 'self'`). See docs/design-system.md for the
 * per-repo CSP caveat (notably ad-precheck, whose current CSP omits style-src 'self').
 */

:root {
  /* color — brand.config.ts colors{primary,accent,background} + app.css extended palette */
  --ink: #1a1d24; /* brand.config.ts colors.primary */
  --ink-strong: #11141a;
  --ink-soft: #3b424d;
  --muted: #5c6470;
  --muted-strong: #3b424d; /* alias of --ink-soft (ad-precheck worker naming) */
  --dim: #98a1ac;
  --paper: #ffffff;
  --ivory: #f5f6f7; /* brand.config.ts colors.background */
  --ivory-deep: #eef0f2;
  --line: #e7e9ec;
  --line-strong: #d6d9dd;
  --accent: #d4202a; /* brand.config.ts colors.accent */
  --accent-dark: #b01722;
  --accent-soft: #fbe9ea;
  --accent-light: #ff5a57;
  --teal: #1f7a74;
  --teal-soft: #e6f0ef;
  --bronze: #b07d3c;
  --bronze-soft: #f3ebdc;
  --blue: #3a5a86;

  /* semantic status aliases (used by speedtag dashboards / score gauges) */
  --lime: #1f7a74; /* good — alias of --teal */
  --amber: #b07d3c; /* mid — alias of --bronze */
  --red: #d4202a; /* poor — alias of --accent */

  /* shape / elevation */
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 29, 0.04), 0 8px 20px -14px rgba(20, 23, 29, 0.2);
  --shadow-card: 0 1px 3px rgba(20, 23, 29, 0.05), 0 18px 40px -24px rgba(20, 23, 29, 0.28);

  /* background — soft dual-radial wash promoted from curumi-id LP/login */
  --bg-radial:
    radial-gradient(90% 60% at 84% -12%, var(--accent-soft), transparent 60%),
    radial-gradient(70% 55% at -5% 0%, var(--ivory), transparent 55%), var(--paper);

  /* type — names Inter/Noto but never fetches them (CSP-strict / offline safe).
     --font-sans / --font-mono are the canonical names; --sans / --display / --mono
     are aliases kept for curumi-id & speedtag surfaces that already use them. */
  --font-sans:
    "Inter Variable", "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --sans: var(--font-sans);
  --display: var(--font-sans);
  --mono: var(--font-mono);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

/* Container-width scale (purpose-based). Every surface shares one .wrap class and
   differs only by intent modifier; the max width is driven by --wrap-max so a page
   picks a width by adding a class, never by redefining .wrap locally. box-sizing:
   border-box (set globally above) keeps the 20px side padding inside the width.
   Defaults to 920px = app / dashboard width. */
.wrap {
  width: min(var(--wrap-max, 920px), 92vw);
  margin: 0 auto;
  padding: 0 20px;
}

/* Marketing / landing pages. One canonical LP width (unifies the former
   curumi-id 1040 + speedtag 1160). */
.wrap-wide {
  --wrap-max: 1080px;
}

/* Forms / reports (ad-precheck-style narrow reading column). */
.wrap-narrow {
  --wrap-max: 760px;
}

/* Full-bleed brand wash. Apply to <body> (or a wrapper) on marketing/auth surfaces. */
.bg-radial {
  background: var(--bg-radial);
}

/* Canonical top bar: full-width, translucent paper with backdrop blur, hairline
   bottom border. Not sticky by default — add .topbar-sticky to pin it. */
.topbar {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.topbar-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Inner row reuses the shared .wrap so the bar tracks the page width. Direct-child
   selector so a page's other .wrap containers are unaffected. */
.topbar > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Right-side slot in the top bar (login link, CTA, plan pill, user email). */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Brand lockup. .brand / .brand-dot is the canonical name going forward; .logo /
   .logo .dot are kept as backward-compat aliases with identical rules so existing
   surfaces keep rendering unchanged. */
.brand,
.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-strong);
  text-decoration: none;
}

.brand-dot,
.logo .dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  color: var(--muted);
  line-height: 1.8;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-active {
  color: var(--teal);
  background: var(--teal-soft);
}

.badge-disabled {
  color: var(--muted);
  background: var(--ivory-deep);
}

/* Text/select/textarea field. Add class="input" or style bare fields per-surface. */
.input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  padding: 11px 12px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--muted);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-ghost {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-danger {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}