/* ============================================================
   slide-web-new — Design System Tokens
   ============================================================
   Load order: tokens.css → brands/[name]/theme.css → reveal.js
   Set data-profile="PROFILE" and data-brand="BRAND" on .reveal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=BIZ+UDPGothic:wght@400;700&display=swap');

/* ============================================================
   Base tokens — shared across all profiles
   ============================================================ */

:root {
  /* Surface */
  --bg:           #FFFFFF;
  --surface:      #F8F8F7;

  /* Text */
  --text:         #111827;
  --text-muted:   #6B7280;

  /* Structure */
  --line:         #E5E7EB;
  --radius:       8px;

  /* Spacing */
  --space:        8px;

  /* Typography base */
  --font-base:    "Noto Sans JP", system-ui, sans-serif;

  /* Profile fallback defaults (overridden per profile below) */
  --accent:       #18181B;
  --accent-light: #F4F4F5;
  --h1-size:      52px;
  --body-size:    20px;
  --slide-margin: 10%;
  --font:         var(--font-base);
}

/* ============================================================
   Profile tokens
   Applied via data-profile attribute on the .reveal element
   ============================================================ */

.reveal[data-profile="proposal"] {
  --accent:        #1E3A8A;
  --accent-light:  #DBEAFE;
  --h1-size:       44px;
  --body-size:     18px;
  --slide-margin:  8%;
  --font:          var(--font-base);
}

.reveal[data-profile="overview"] {
  --accent:        #18181B;
  --accent-light:  #F4F4F5;
  --h1-size:       52px;
  --body-size:     20px;
  --slide-margin:  10%;
  --font:          var(--font-base);
}

.reveal[data-profile="product-overview"] {
  --accent:        #2563EB;
  --accent-light:  #DBEAFE;
  --h1-size:       44px;
  --body-size:     18px;
  --slide-margin:  8%;
  --font:          var(--font-base);
}

.reveal[data-profile="pitch"] {
  --accent:        #18181B;
  --accent-light:  #F4F4F5;
  --h1-size:       72px;
  --body-size:     18px;
  --slide-margin:  12%;
  --font:          var(--font-base);
}

.reveal[data-profile="academic"] {
  --accent:        #374151;
  --accent-light:  #F3F4F6;
  --h1-size:       40px;
  --body-size:     18px;
  --slide-margin:  8%;
  --font:          "BIZ UDPGothic", "Noto Sans JP", system-ui, sans-serif;
}

.reveal[data-profile="internal"] {
  --accent:        #6B7280;
  --accent-light:  #F9FAFB;
  --h1-size:       36px;
  --body-size:     16px;
  --slide-margin:  6%;
  --font:          var(--font-base);
}

.reveal[data-profile="workshop"] {
  --accent:        #D97706;
  --accent-light:  #FEF3C7;
  --h1-size:       44px;
  --body-size:     18px;
  --slide-margin:  8%;
  --font:          var(--font-base);
}

/* ============================================================
   reveal.js base overrides
   Reset reveal.js defaults to use our token system
   ============================================================ */

.reveal {
  font-family:  var(--font);
  font-size:    var(--body-size);
  color:        var(--text);
  background:   var(--bg);
}

/* Slide surface */
.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  background:   var(--bg);
  color:        var(--text);
  padding:      var(--slide-margin);
  box-sizing:   border-box;
  height:       100%;
  display:      flex;
  flex-direction: column;
  justify-content: center;
  text-align:   left;
}

/* reveal.js hides non-current slides with display rules.
   The flex layout above intentionally overrides the current slide,
   so restore hiding for inactive horizontal slides to prevent ghosting. */
.reveal .slides > section.past,
.reveal .slides > section.future {
  display: none;
}

.reveal .slides > section.present {
  display: flex;
}

/* Headings */
.reveal h1 {
  font-family:     var(--font);
  font-size:       var(--h1-size);
  font-weight:     700;
  color:           var(--text);
  line-height:     1.2;
  letter-spacing:  -0.02em;
  margin:          0 0 calc(var(--space) * 3) 0;
  text-transform:  none;
  text-shadow:     none;
  word-wrap:       break-word;
}

.reveal h2 {
  font-family:     var(--font);
  font-size:       calc(var(--h1-size) * 0.65);
  font-weight:     700;
  color:           var(--text);
  line-height:     1.2;
  letter-spacing:  -0.02em;
  margin:          0 0 calc(var(--space) * 3) 0;
  text-transform:  none;
  text-shadow:     none;
  word-wrap:       break-word;
}

.reveal h3 {
  font-family:     var(--font);
  font-size:       calc(var(--body-size) * 1.2);
  font-weight:     600;
  color:           var(--text);
  line-height:     1.3;
  letter-spacing:  0;
  margin:          0 0 calc(var(--space) * 2) 0;
  text-transform:  none;
  text-shadow:     none;
  word-wrap:       break-word;
}

.reveal h4,
.reveal h5,
.reveal h6 {
  font-family:     var(--font);
  font-size:       var(--body-size);
  font-weight:     600;
  color:           var(--text);
  line-height:     1.4;
  letter-spacing:  0;
  margin:          0 0 calc(var(--space) * 2) 0;
  text-transform:  none;
  text-shadow:     none;
}

/* Body text */
.reveal p {
  font-size:    var(--body-size);
  line-height:  1.7;
  color:        var(--text);
  margin:       0 0 calc(var(--space) * 2) 0;
}

.reveal p:last-child {
  margin-bottom: 0;
}

/* Lists */
.reveal ul,
.reveal ol {
  font-size:    var(--body-size);
  line-height:  1.7;
  color:        var(--text);
  margin:       0 0 calc(var(--space) * 2) 0;
  padding-left: calc(var(--space) * 3);
}

.reveal ul li,
.reveal ol li {
  margin-bottom: calc(var(--space) * 1);
}

.reveal ul li:last-child,
.reveal ol li:last-child {
  margin-bottom: 0;
}

/* Remove reveal.js bullet disc defaults */
.reveal ul {
  list-style: disc;
}

/* Inline code */
.reveal code {
  font-family:      "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size:        0.9em;
  background:       var(--surface);
  border:           1px solid var(--line);
  border-radius:    4px;
  padding:          1px 6px;
  color:            var(--text);
}

/* Code blocks */
.reveal pre {
  background:   var(--surface);
  border:       1px solid var(--line);
  border-radius: var(--radius);
  padding:      calc(var(--space) * 2);
  margin:       0 0 calc(var(--space) * 2) 0;
  width:        100%;
  box-shadow:   none;
}

.reveal pre code {
  background:   transparent;
  border:       none;
  padding:      0;
  font-size:    0.85em;
  line-height:  1.6;
}

/* Links */
.reveal a {
  color:           var(--accent);
  text-decoration: underline;
}

.reveal a:hover {
  color:           var(--accent);
  text-decoration: none;
}

/* Blockquotes */
.reveal blockquote {
  border-left:  4px solid var(--accent);
  padding:      calc(var(--space) * 2) calc(var(--space) * 3);
  background:   var(--accent-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin:       0 0 calc(var(--space) * 2) 0;
  font-style:   normal;
  width:        100%;
  box-shadow:   none;
}

.reveal blockquote p {
  margin: 0;
}

/* Tables */
.reveal table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--body-size);
  margin:          0 0 calc(var(--space) * 2) 0;
}

.reveal table th {
  background:    var(--surface);
  border:        1px solid var(--line);
  padding:       calc(var(--space) * 1.5) calc(var(--space) * 2);
  font-weight:   600;
  text-align:    left;
}

.reveal table td {
  border:        1px solid var(--line);
  padding:       calc(var(--space) * 1.5) calc(var(--space) * 2);
  vertical-align: top;
}

.reveal table tr:nth-child(even) td {
  background: var(--surface);
}

/* Horizontal rule */
.reveal hr {
  border:        none;
  border-top:    1px solid var(--line);
  margin:        calc(var(--space) * 3) 0;
}

/* Slide number */
.reveal .slide-number {
  font-family:  var(--font-base);
  font-size:    12px;
  color:        var(--text-muted);
  background:   transparent;
}

/* Progress bar */
.reveal .progress {
  color:  var(--accent);
  height: 3px;
}

/* Remove default reveal.js overlays and shadows */
.reveal .slides section .fragment {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.reveal .slides section .fragment.visible {
  opacity: 1;
}

/* ============================================================
   Utility classes
   Used directly inside <section> HTML
   ============================================================ */

/* --- Color utilities --- */

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

.accent-bg {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius);
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
}

.accent-light-bg {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
}

.surface {
  background: var(--surface);
}

.muted {
  color: var(--text-muted);
}

/* --- Typography size utilities --- */

.text-large {
  font-size: calc(var(--body-size) * 1.25);
}

.text-small {
  font-size: calc(var(--body-size) * 0.875);
  line-height: 1.5;
}

/* --- Structural utilities --- */

.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: calc(var(--space) * 3) 0;
}

.rule-short {
  width: 48px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Slide composition helpers --- */

.slide-top {
  justify-content: flex-start;
}

.measure {
  max-width: 52ch;
}

.measure-tight {
  max-width: 40ch;
}

.measure-wide {
  max-width: 68ch;
}

.statement {
  font-size: calc(var(--h1-size) * 0.72);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--space) * 3) 0;
}

.lead {
  font-size: calc(var(--body-size) * 1.2);
  line-height: 1.65;
}

.source-note {
  color: var(--text-muted);
  font-size: calc(var(--body-size) * 0.72);
  line-height: 1.5;
  margin-top: calc(var(--space) * 2);
}

.caption-label {
  color: var(--text-muted);
  font-size: calc(var(--body-size) * 0.72);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: calc(var(--space) * 1);
  text-transform: uppercase;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 3);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 2);
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 4);
}

/* --- Card --- */

.card {
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       calc(var(--space) * 3);
}

.card h3 {
  margin-top: 0;
}

.card > *:last-child {
  margin-bottom: 0;
}

.card-accent {
  background: var(--accent-light);
  border-color: var(--accent);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4);
}

.panel-muted {
  background: var(--surface);
}

.panel-accent {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* --- Badge --- */

.badge {
  display:         inline-block;
  background:      var(--accent-light);
  color:           var(--accent);
  border-radius:   4px;
  padding:         2px 8px;
  font-size:       0.8em;
  font-weight:     600;
  letter-spacing:  0.05em;
  line-height:     1.6;
}

/* --- Large number / statistic --- */

.number-large {
  display:       block;
  font-size:     4rem;
  font-weight:   700;
  color:         var(--accent);
  line-height:   1;
  letter-spacing: -0.02em;
  margin-bottom: calc(var(--space) * 1);
}

/* --- Grid layouts --- */

.grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   calc(var(--space) * 4);
  align-items:           start;
}

.grid-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   calc(var(--space) * 3);
  align-items:           start;
}

.grid-auto {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   calc(var(--space) * 3);
  align-items:           start;
}

.grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   calc(var(--space) * 2);
  align-items:           start;
}

/* Nested grid items: remove bottom margin on last child */
.grid-2 > * > *:last-child,
.grid-3 > * > *:last-child,
.grid-4 > * > *:last-child,
.grid-auto > * > *:last-child {
  margin-bottom: 0;
}

/* --- Proposal primitives --- */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-item {
  padding: calc(var(--space) * 3);
}

.proof-item + .proof-item {
  border-left: 1px solid var(--line);
}

.proof-item strong {
  display: block;
  font-size: calc(var(--body-size) * 1.08);
  line-height: 1.45;
  margin-bottom: calc(var(--space) * 1);
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rail-list li {
  border-left: 2px solid var(--line);
  margin-bottom: calc(var(--space) * 2);
  padding-left: calc(var(--space) * 2);
}

.rail-list li:last-child {
  margin-bottom: 0;
}

.rail-list-accent li {
  border-left-color: var(--accent);
}

.decision-box {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: calc(var(--space) * 4);
}

.decision-box .caption-label {
  color: var(--accent);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space) * 3);
}

.timeline-step {
  border-top: 3px solid var(--accent);
  padding-top: calc(var(--space) * 2);
}

.dense-table {
  font-size: calc(var(--body-size) * 0.84);
}

.dense-table th,
.dense-table td {
  padding: calc(var(--space) * 1.2) calc(var(--space) * 1.5);
}

/* --- Flex utilities --- */

.flex {
  display: flex;
  gap: calc(var(--space) * 3);
  align-items: flex-start;
}

.flex-center {
  display:         flex;
  gap:             calc(var(--space) * 3);
  align-items:     center;
  justify-content: center;
}

.flex-between {
  display:         flex;
  gap:             calc(var(--space) * 3);
  align-items:     center;
  justify-content: space-between;
}

/* --- Alignment --- */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* --- Spacing helpers --- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: calc(var(--space) * 2); }
.mb-2 { margin-bottom: calc(var(--space) * 2); }
.mt-4 { margin-top: calc(var(--space) * 4); }
.mb-4 { margin-bottom: calc(var(--space) * 4); }
.mt-6 { margin-top: calc(var(--space) * 6); }
.mb-6 { margin-bottom: calc(var(--space) * 6); }

/* --- Cover slide centering --- */

.slide-cover {
  justify-content: center;
  text-align:      center;
}

.slide-cover h1 {
  text-align: center;
}

.slide-cover p {
  text-align: center;
}

/* --- Accent rule / eyebrow --- */

.eyebrow {
  display:         block;
  font-size:       0.75em;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--accent);
  margin-bottom:   calc(var(--space) * 1);
}

/* --- Two-column layout with sidebar --- */

.layout-sidebar {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   calc(var(--space) * 6);
  align-items:           start;
}

.layout-sidebar-wide {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   calc(var(--space) * 6);
  align-items:           start;
}

/* --- Vertical accent bar (for key points) --- */

.key-point {
  border-left:  3px solid var(--accent);
  padding-left: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 2);
}

.key-point:last-child {
  margin-bottom: 0;
}

/* --- Mermaid diagram container --- */

.mermaid {
  background:    var(--surface);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       calc(var(--space) * 3);
  text-align:    center;
}