/* ============================================================
   Toreteku Design System — colors_and_type.css
   Import this file first on any page:
     <link rel="stylesheet" href="/colors_and_type.css">
     <link rel="stylesheet" href="/components.css">   <- optional, adds UI parts
   ------------------------------------------------------------
   v2 — accessibility pass. Brand orange (#E87B2E) is a GRAPHIC
   color: logo, bars, icons, fills behind dark text. For TEXT and
   for CTA button fills use --tt-orange-ink (#B25814), which
   clears WCAG AA (4.82:1 on white). See preview/A11y-Contrast.html
   ============================================================ */

/* --- Webfonts (Noto Sans JP as Japanese primary, Noto Sans for Latin) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Sans:wght@400;500;700;900&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  /* GRAPHIC orange — logo, accent bars, icon strokes, tint fills.
     Do NOT put white text on it: 2.88:1 fails WCAG AA. */
  --tt-orange:        #E87B2E;
  --tt-orange-600:    #CF6A1F;   /* graphic hover */
  --tt-orange-700:    #B25814;   /* graphic press */

  /* TEXT / CTA orange — AA-safe. Use everywhere type sits on light. */
  --tt-orange-ink:       #B25814;   /* 4.82:1 on #FFF · 4.60:1 on #FBF7F2 */
  --tt-orange-ink-600:   #96490F;   /* hover  · 6.45:1 */
  --tt-orange-ink-700:   #7D3C0A;   /* press  · 8.20:1 */

  --tt-orange-100:    #FFF3E6;   /* Tint panel background */
  --tt-orange-50:     #FFFAF3;   /* Subtle wash */

  --tt-navy:          #1F3555;   /* Ink — from logo wordmark */
  --tt-navy-700:      #162947;   /* Deeper */
  --tt-navy-500:      #3B547A;   /* Lighter ink */

  /* ---------- Neutrals ---------- */
  --tt-page:          #FBF7F2;   /* Warm off-white page */
  --tt-surface:       #FFFFFF;   /* Card / panel */
  --tt-line:          rgba(31, 53, 85, 0.12);
  --tt-line-strong:   rgba(31, 53, 85, 0.22);

  --tt-ink:           #1F3555;   /* Default text = navy */
  --tt-ink-2:         #3B547A;   /* Secondary text */
  --tt-ink-3:         #64738B;   /* Tertiary text — 4.81:1 (was #6A7A93 at 4.36:1, below AA) */
  --tt-meta:          #6E6A5E;   /* Warm gray meta — 5.40:1 (was #8A8577 at 3.11:1, below AA) */
  --tt-meta-deco:     #8A8577;   /* Old warm gray — decorative rules/borders only */

  /* ---------- Semantic (fills) ---------- */
  --tt-success:       #2F8F5A;
  --tt-warning:       #D9911E;
  --tt-danger:        #C5462F;
  --tt-info:          #2F6FB3;

  /* ---------- Semantic (text-safe) ---------- */
  --tt-success-ink:   #1F7A4D;   /* 5.32:1 — the fill is only 4.04:1 */
  --tt-warning-ink:   #8A5A05;   /* 5.91:1 — the fill is only 2.62:1 */
  --tt-danger-ink:    #C5462F;   /* 4.89:1 — fill already passes */
  --tt-info-ink:      #2F6FB3;   /* 5.19:1 — fill already passes */

  /* ---------- Semantic (tint backgrounds) ---------- */
  --tt-success-bg:    #E9F5EE;
  --tt-warning-bg:    #FDF3E0;
  --tt-danger-bg:     #FBEBE8;
  --tt-info-bg:       #EAF1F9;

  /* ---------- Radii ---------- */
  --tt-r-sm:   6px;
  --tt-r-md:   12px;
  --tt-r-lg:   16px;
  --tt-r-xl:   24px;
  --tt-r-pill: 999px;

  /* ---------- Spacing (8pt) ---------- */
  --tt-s-1:  4px;
  --tt-s-2:  8px;
  --tt-s-3:  12px;
  --tt-s-4:  16px;
  --tt-s-5:  24px;
  --tt-s-6:  32px;
  --tt-s-7:  48px;
  --tt-s-8:  64px;
  --tt-s-9:  80px;
  --tt-s-10: 120px;

  /* ---------- Layout ---------- */
  --tt-container: 1120px;   /* centered max-width on desktop */
  --tt-prose:     640px;    /* comfortable Japanese measure */

  /* ---------- Shadows ---------- */
  --tt-shadow-sm:  0 2px 6px  rgba(31, 53, 85, 0.06);
  --tt-shadow-md:  0 6px 20px rgba(31, 53, 85, 0.08);
  --tt-shadow-lg:  0 12px 32px rgba(31, 53, 85, 0.14);
  --tt-shadow-xl:  0 24px 60px rgba(31, 53, 85, 0.18);

  /* ---------- Motion ---------- */
  --tt-ease:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --tt-dur-fast:  150ms;
  --tt-dur-base:  250ms;
  --tt-dur-slow:  400ms;

  /* ---------- Focus ---------- */
  --tt-focus:        var(--tt-orange-ink);
  --tt-focus-width:  2px;
  --tt-focus-offset: 2px;

  /* ---------- Type — families ---------- */
  --tt-font-jp:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --tt-font-lt:  "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --tt-font-ui:  var(--tt-font-jp);  /* default = Japanese stack (handles Latin too) */

  /* ---------- Type — sizes ---------- */
  --tt-fs-display:  clamp(36px, 5vw, 56px);
  --tt-fs-h1:       clamp(28px, 3.2vw, 40px);
  --tt-fs-h2:       clamp(22px, 2.4vw, 32px);
  --tt-fs-h3:       20px;
  --tt-fs-h4:       18px;
  --tt-fs-body:     16px;
  --tt-fs-small:    14px;
  --tt-fs-meta:     13px;
  --tt-fs-kicker:   14px;

  /* ---------- Type — weights ---------- */
  --tt-w-reg:   400;
  --tt-w-med:   500;
  --tt-w-bold:  700;
  --tt-w-black: 900;

  /* ---------- Line heights ---------- */
  --tt-lh-tight: 1.35;
  --tt-lh-base:  1.7;
  --tt-lh-prose: 1.9;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--tt-page);
  color: var(--tt-ink);
  font-family: var(--tt-font-ui);
  font-size: var(--tt-fs-body);
  line-height: var(--tt-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One focus treatment for the whole system. Always visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tt-focus-width) solid var(--tt-focus);
  outline-offset: var(--tt-focus-offset);
  border-radius: var(--tt-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Semantic typography
   ============================================================ */
.tt-display {
  font-family: var(--tt-font-jp);
  font-size: var(--tt-fs-display);
  font-weight: var(--tt-w-bold);
  line-height: var(--tt-lh-tight);
  color: var(--tt-navy);
  letter-spacing: 0.01em;
  margin: 0;
}

.tt-h1 {
  font-size: var(--tt-fs-h1);
  font-weight: var(--tt-w-bold);
  line-height: var(--tt-lh-tight);
  color: var(--tt-navy);
  margin: 0;
}

.tt-h2 {
  font-size: var(--tt-fs-h2);
  font-weight: var(--tt-w-bold);
  line-height: 1.45;
  color: var(--tt-navy);
  margin: 0;
}

.tt-h3 {
  font-size: var(--tt-fs-h3);
  font-weight: var(--tt-w-bold);
  line-height: 1.5;
  color: var(--tt-navy);
  margin: 0;
}

.tt-body {
  font-size: var(--tt-fs-body);
  font-weight: var(--tt-w-reg);
  line-height: var(--tt-lh-prose);
  color: var(--tt-ink);
}

.tt-body strong { font-weight: var(--tt-w-bold); color: var(--tt-navy); }

.tt-meta {
  font-size: var(--tt-fs-meta);
  color: var(--tt-meta);
  letter-spacing: 0.02em;
}

/* Inline link — orange-ink, underline offset so Japanese glyphs stay legible */
.tt-link {
  color: var(--tt-orange-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color var(--tt-dur-fast) var(--tt-ease);
}
.tt-link:hover { color: var(--tt-orange-ink-600); text-decoration-thickness: 2px; }

/* Latin kicker used above section titles — "FEATURES", "VOICE", etc. */
.tt-kicker {
  font-family: var(--tt-font-lt);
  font-size: var(--tt-fs-kicker);
  font-weight: var(--tt-w-bold);
  letter-spacing: 0.18em;
  color: var(--tt-orange-ink);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}

/* The 4px orange rule that sits under a section title. Decorative — brand orange is fine here. */
.tt-rule {
  width: 48px;
  height: 4px;
  background: var(--tt-orange);
  border-radius: 2px;
}

/* ============================================================
   Buttons — primary filled orange-ink, secondary navy outline
   ============================================================ */
.tt-btn {
  --_bg: var(--tt-orange-ink);
  --_fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  min-height: 48px;                 /* comfortable touch target */
  font-family: var(--tt-font-ui);
  font-size: 15px;
  font-weight: var(--tt-w-bold);
  letter-spacing: 0.02em;
  color: var(--_fg);
  background: var(--_bg);
  border: none;
  border-radius: var(--tt-r-pill);
  cursor: pointer;
  box-shadow: var(--tt-shadow-md);
  transition:
    background var(--tt-dur-base) var(--tt-ease),
    box-shadow var(--tt-dur-base) var(--tt-ease),
    transform  var(--tt-dur-base) var(--tt-ease);
  text-decoration: none;
}
.tt-btn:hover    { background: var(--tt-orange-ink-600); box-shadow: var(--tt-shadow-lg); }
.tt-btn:active   { background: var(--tt-orange-ink-700); box-shadow: var(--tt-shadow-sm); }
.tt-btn[disabled], .tt-btn[aria-disabled="true"] {
  background: var(--tt-line-strong); color: #fff; box-shadow: none; cursor: not-allowed;
}

.tt-btn--ghost {
  --_bg: transparent;
  --_fg: var(--tt-navy);
  box-shadow: none;
  border: 1.5px solid var(--tt-navy);
}
.tt-btn--ghost:hover { background: var(--tt-navy); color: #fff; }

/* On the navy footer / navy hero overlay */
.tt-btn--on-navy {
  --_bg: #fff;
  --_fg: var(--tt-navy);
}
.tt-btn--on-navy:hover { background: var(--tt-orange-100); color: var(--tt-navy); }

.tt-btn--sm  { padding: 10px 18px; min-height: 40px; font-size: 13px; }
.tt-btn--lg  { padding: 18px 40px; min-height: 56px; font-size: 17px; }
.tt-btn--block { display: flex; width: 100%; }

/* ============================================================
   Framed CTA — the 「＼ ... ／」 brand motif
   ============================================================ */
.tt-framed {
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: var(--tt-w-bold);
  color: var(--tt-navy);
}
.tt-framed::before, .tt-framed::after {
  content: '';
  width: 2px; height: 2em;
  background: var(--tt-navy);
}
.tt-framed::before { transform: skewX(-18deg); }
.tt-framed::after  { transform: skewX(18deg); }

/* ============================================================
   Layout helpers
   ============================================================ */
.tt-container { width: 100%; max-width: var(--tt-container); margin-inline: auto; padding-inline: var(--tt-s-5); }
.tt-section   { padding-block: clamp(56px, 8vw, 120px); }
.tt-prose     { max-width: var(--tt-prose); }

/* Screen-reader-only text (for icon-only buttons, skip links, etc.) */
.tt-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}