/* =============================================================================
   design-system.css — InnerClimb Corporate Site
   All design tokens, base element styles, utility classes, and primitive
   components. This file holds all token declarations. site.css must not
   re-declare tokens.
   T008: tokens, base, utilities, primitives
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg:           #F4F8FC;
  --color-surface:      #FFFFFF;
  --color-border:       #D9E6F2;
  --color-text:         #122033;
  --color-text-muted:   #5A6D83;
  --color-accent:       #0EA5E9;
  --color-accent-hover: #0284C7;
  --color-accent-light: #E0F2FE;
  --color-badge-soon:   #7E91A6;
  --color-caution:      #C0392B;

  /* Glass surfaces */
  --glass-bg:           rgba(255, 255, 255, 0.62);
  --glass-bg-strong:    rgba(255, 255, 255, 0.78);
  --glass-border:       rgba(255, 255, 255, 0.55);
  --glass-shadow:       0 10px 28px rgba(16, 42, 67, 0.10);

  /* Typography */
  --font-family:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:       'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;
  --text-display:       clamp(2.25rem, 5vw, 3rem);
  --text-h2:            clamp(1.5rem, 3vw, 2rem);
  --text-h3:            1.25rem;
  --text-summary:       1.125rem;
  --text-body:          1rem;
  --text-small:         0.875rem;
  --text-label:         0.75rem;

  --weight-regular:     400;
  --weight-semibold:    600;
  --weight-bold:        700;

  --leading-tight:      1.1;
  --leading-snug:       1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.6;
  --leading-loose:      1.7;

  /* Spacing (4px base grid) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* Layout */
  --max-width: 1100px;
  --gutter:    clamp(1rem, 5vw, 2rem);

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-normal:  300ms ease-out;
  --transition-reveal:  400ms ease-out;
}

/* ---------------------------------------------------------------------------
   Dark mode tokens
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:           #1a1d27;
  --color-surface:      #21253a;
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-text:         #eef0f4;
  --color-text-muted:   #8fa3b8;
  --color-accent:       #38bdf8;
  --color-accent-hover: #7dd3fc;
  --color-accent-light: rgba(56, 189, 248, 0.12);
  --color-badge-soon:   #8fa3b8;
  --glass-bg:           rgba(26, 29, 39, 0.80);
  --glass-bg-strong:    rgba(26, 29, 39, 0.94);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-shadow:       0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
   2. Base Element Styles
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }

p {
  line-height: var(--leading-loose);
  color: var(--color-text);
}

p + p { margin-top: var(--space-4); }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

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

ul, ol {
  padding-left: var(--space-6);
}

li {
  line-height: var(--leading-relaxed);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------------------------------------------------------------------------
   3. Utility Classes
   --------------------------------------------------------------------------- */

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Text utilities */
.text-muted   { color: var(--color-text-muted); }
.text-accent  { color: var(--color-accent); }
.text-label   { font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.text-small   { font-size: var(--text-small); }
.text-summary { font-size: var(--text-summary); line-height: var(--leading-relaxed); }
.muted        { color: var(--color-text-muted); }

/* Section index number (01, 02 …) injected before section labels */
.sect__idx {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  margin-right: 0.15em;
}

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Scroll reveal
   Default remains visible; animation is enabled only when JS adds
   .reveal-ready on <body> to avoid blank sections on script failure. */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal-ready .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   4. Primitive Components
   --------------------------------------------------------------------------- */

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.badge--soon {
  background-color: #F1F5F9;
  color: var(--color-badge-soon);
  border: 1px solid var(--color-border);
}

.badge--friction {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.btn--primary:hover {
  background-color: var(--color-accent);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-text);
  background-color: transparent;
}

.btn[disabled], .btn--disabled {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Card shell --- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.card--hover {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card--hover:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* --- Divider --- */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-12);
}