/**
 * SelfTube — Design tokens
 *
 * Single source of truth for colors, fonts, spacing, and component styles
 * used across the landing page (index.html), dashboard, player, embed page,
 * and public video listing (/videos).
 *
 * Kept in `shared/` so both the AGPL server and the selftube-cloud repo
 * can import the same tokens.
 *
 * Reference: the landing page at C:\Projets\selftube\index.html which defines
 * the canonical visual identity.
 */

:root {
  /* Palette */
  --st-black: #0A0A0A;
  --st-white: #FAFAF8;
  --st-green: #00875A;
  --st-green-hover: #006B47;
  --st-green-light: #E6F5EF;
  --st-gray-100: #F2F2F0;
  --st-gray-200: #E0E0DC;
  --st-gray-300: #C8C8C2;
  --st-gray-500: #7A7A72;
  --st-gray-700: #3A3A36;

  /* Functional colors (mapped to palette) */
  --st-bg: var(--st-white);
  --st-bg-alt: var(--st-gray-100);
  --st-fg: var(--st-black);
  --st-fg-muted: var(--st-gray-500);
  --st-fg-body: var(--st-gray-700);
  --st-border: var(--st-gray-200);
  --st-border-strong: var(--st-black);
  --st-accent: var(--st-green);
  --st-accent-bg: var(--st-green-light);

  /* Status (for video processing states, badges, etc.) */
  --st-status-ok: var(--st-green);
  --st-status-warning: #B8860B;
  --st-status-error: #B83232;
  --st-status-info: #2C6AB8;
  --st-status-neutral: var(--st-gray-300);

  /* Typography — Typekit Neue Haas Grotesk */
  --st-font-display: 'neue-haas-grotesk-display', 'Inter', 'Helvetica Neue', sans-serif;
  --st-font-text: 'neue-haas-grotesk-text', 'Inter', 'Helvetica Neue', sans-serif;
  --st-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* Type scale (display / headings) */
  --st-h1: clamp(48px, 8vw, 96px);
  --st-h2: clamp(32px, 4vw, 56px);
  --st-h3: 20px;
  --st-h4: 17px;

  /* Type scale (body) */
  --st-body: 16px;
  --st-body-lead: 20px;
  --st-body-sm: 14px;
  --st-body-xs: 13px;
  --st-body-xxs: 12px;
  --st-body-mono: 14px;

  /* Line heights */
  --st-lh-display: 0.95;
  --st-lh-tight: 1.25;
  --st-lh-body: 1.55;
  --st-lh-relaxed: 1.65;

  /* Letter spacing */
  --st-tracking-display-h1: -3px;
  --st-tracking-display-h2: -1.5px;
  --st-tracking-display-h3: -0.3px;
  --st-tracking-label: 3px;
  --st-tracking-btn: 0.2px;

  /* Spacing */
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 24px;
  --st-space-6: 32px;
  --st-space-7: 48px;
  --st-space-8: 64px;
  --st-space-9: 80px;
  --st-space-10: 100px;
  --st-space-11: 140px;

  /* Layout */
  --st-container-max: 1200px;
  --st-container-narrow: 1100px;
  --st-gutter: 24px;

  /* Borders + radii */
  --st-border-width: 1px;
  --st-border-width-strong: 3px;
  --st-btn-border: 1.5px;
  --st-radius: 0;                /* Angles nets. Aucun border-radius nulle part. */

  /* Transitions */
  --st-transition: 0.15s ease;

  /* Nav */
  --st-nav-height: 56px;
  --st-nav-z: 100;
}

/* ─── Base typography resets used by non-landing pages ─── */
/*
 * These are applied by any page that includes this stylesheet.
 * The landing (index.html) has its own inline styles but uses the same tokens.
 */

html {
  scroll-behavior: smooth;
}

body.st-base {
  margin: 0;
  font-family: var(--st-font-text);
  color: var(--st-fg);
  background: var(--st-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--st-lh-body);
  font-size: var(--st-body);
}

body.st-base ::selection {
  background: var(--st-green);
  color: var(--st-white);
}

body.st-base h1, body.st-base h2, body.st-base h3, body.st-base h4, body.st-base .st-display {
  font-family: var(--st-font-display);
}

/* ─── Reusable component classes ─── */

.st-container {
  max-width: var(--st-container-max);
  margin: 0 auto;
  padding: 0 var(--st-gutter);
}

.st-section-label {
  font-size: var(--st-body-xxs);
  font-weight: 700;
  letter-spacing: var(--st-tracking-label);
  text-transform: uppercase;
  color: var(--st-fg-muted);
}

.st-section-label--accent {
  color: var(--st-accent);
}

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2);
  padding: 10px 24px;
  font-family: var(--st-font-display);
  font-size: var(--st-body-sm);
  font-weight: 600;
  letter-spacing: var(--st-tracking-btn);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--st-transition), color var(--st-transition);
  border-radius: var(--st-radius);
}

.st-btn--primary {
  background: var(--st-accent);
  color: var(--st-white);
}
.st-btn--primary:hover {
  background: var(--st-green-hover);
}

.st-btn--dark {
  background: var(--st-black);
  color: var(--st-white);
}
.st-btn--dark:hover {
  background: var(--st-gray-700);
}

.st-btn--outline {
  background: transparent;
  color: var(--st-black);
  border: var(--st-btn-border) solid var(--st-black);
}
.st-btn--outline:hover {
  background: var(--st-black);
  color: var(--st-white);
}

.st-btn--ghost {
  background: transparent;
  color: var(--st-fg-muted);
  border: var(--st-btn-border) solid var(--st-border);
}
.st-btn--ghost:hover {
  color: var(--st-fg);
  border-color: var(--st-fg);
}

/* Grid with 1px hairline borders — the signature SelfTube look */
.st-grid-hairline {
  display: grid;
  gap: 1px;
  background: var(--st-border);
  border: 1px solid var(--st-border);
}
.st-grid-hairline > * {
  background: var(--st-bg);
  padding: var(--st-space-6);
}
.st-grid-hairline--2 { grid-template-columns: 1fr 1fr; }
.st-grid-hairline--3 { grid-template-columns: 1fr 1fr 1fr; }
.st-grid-hairline--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Inputs */
.st-input,
.st-textarea,
.st-select {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--st-font-text);
  font-size: var(--st-body-sm);
  color: var(--st-fg);
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  transition: border-color var(--st-transition);
}
.st-input:focus,
.st-textarea:focus,
.st-select:focus {
  outline: none;
  border-color: var(--st-black);
}

/* Mono / code */
.st-mono {
  font-family: var(--st-font-mono);
  font-size: var(--st-body-mono);
}

/* Divider (3px strong = section break on landing) */
.st-divider {
  border: none;
  border-bottom: var(--st-border-width-strong) solid var(--st-border-strong);
}
.st-divider--thin {
  border-bottom-width: 1px;
  border-bottom-color: var(--st-border);
}