/* TribeMD Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --primary-50: #f3edff; /* Lightest purple: the filter-chip background (`chip-bg`) and selected washes; `primary-500` text reads on it at 8.5:1. */
  --primary-100: #e0d1fa; /* Lilac tint for decorative fills and badge backgrounds (the Curso tag, with `primary-700` text at 8.4:1). */
  --primary-200: #b58fff; /* Lilac for decorative fills; the ink of the TribeMD mark on dark grounds. */
  --primary-300: #8a38f5; /* Bright purple: the light end of the Avatar and thumbnail gradients. */
  --primary-400: #6d27d7; /* Purple between `primary-300` and `primary-500` (the OKLCH midpoint, not a Figma value). White text on it is 7.2:1, and it is 7.2:1 as text on white. */
  --primary-500: #5213b9; /* PRIMARY — the brand purple: primary buttons, active chips and nav items, links, the focus outline and the hero flood (`bg-hero`). As text, on `bg-surface`, `bg-app` and `bg-muted` (8.8:1 or more) */
  --primary-600: #4b14a4; /* Purple between `primary-500` and `primary-700` (the OKLCH midpoint, not a Figma value). White text on it is 10.9:1. */
  --primary-700: #431490; /* Darker purple: hover on purple surfaces (`button-primary-bg-hover`); Curso tag text on `primary-100`. */
  --primary-800: #2e0458; /* Deep purple between `primary-700` and `primary-900` (the OKLCH midpoint, not a Figma value). White text on it is 16.5:1. */
  --primary-900: #160028; /* Very dark purple: dark tiles behind knockout logos; the tint in `shadow-pop`. */
  --primary-1000: #090014; /* The deepest purple, one step past `primary-900` (extended in OKLCH, not a Figma value). White text on it is 20.6:1. */
  --accent-100: #d8f5f2; /* Palest accent tint, for washes and selected backgrounds behind accent elements (derived in OKLCH from `accent-500`); no component uses it yet. `primary-900` text on it is 17:1. */
  --accent-200: #c5f0ec; /* Pale accent tint, a step deeper than `accent-100` (derived in OKLCH from `accent-500`); no component uses it yet. `primary-900` text on it is 16:1. */
  --accent-300: #9be3dd; /* Light accent, between `accent-200` and `accent-500` (derived in OKLCH, not a Figma value); no component uses it yet. A fill for dark text: `primary-900` on it is 13.5:1. */
  --accent-400: #6ad6cf; /* Mid-light accent, between `accent-300` and `accent-500` (derived in OKLCH, not a Figma value); no component uses it yet. A fill for dark text: `primary-900` on it is 11.4:1. */
  --accent-500: #14c8c0; /* The accent: teal, for highlighting specific elements, creating emphasis, differentiation and visual variety, with no fixed meaning: never success, error or warning (it sits between success green and info blue). Keep it to occasional elements so it keeps standing out. Use it as a fill with dark text: `primary-900` on it is 9.4:1, `fg-default` 6.2:1; white on it is 2.1:1, never readable. */
  --accent-600: #02a39c; /* Deeper accent, one step past `accent-500` (derived in OKLCH, not a Figma value); no component uses it yet. White on it is 3.1:1: large text only (24px+, or 19px bold); `primary-900` text on it is 6.3:1. */
  --accent-700: #03817c; /* Dark accent (derived in OKLCH, not a Figma value); no component uses it yet. The first step that takes white text (4.7:1) and reads as text on white (4.7:1). */
  --accent-800: #05615d; /* Darker accent (derived in OKLCH, not a Figma value); no component uses it yet. White on it, and it as text on white, are 7.3:1. */
  --accent-900: #014340; /* Very dark accent (derived in OKLCH, not a Figma value); no component uses it yet. White on it is 11.2:1. */
  --accent-1000: #002725; /* The deepest accent (derived in OKLCH, not a Figma value); no component uses it yet. White on it is 15.9:1. */
  --common-neutral-0: #ffffff; /* White: card and input surfaces (`bg-surface`); text on purple fills. */
  --common-neutral-25: #fafafa; /* The app background (`bg-app`). */
  --common-neutral-50: #f2f4f4; /* Muted surface (`bg-muted`) and the disabled-control fill. */
  --common-neutral-100: #e5e9ea; /* Hairline dividers and card outlines (`border-subtle`). */
  --common-neutral-200: #e3e7e8; /* Default borders on cards and inputs (`border-default`, `input-border`). */
  --common-neutral-300: #dadada; /* Light grey from the Figma neutrals; no semantic token uses it. */
  --common-neutral-400: #99a6ab; /* Tertiary grey: subtle text (`fg-subtle`), strong borders (`border-strong`), inactive bottom-nav items. 2.5:1 on white. */
  --common-neutral-500: #8f9da3; /* Mid grey from the Figma neutrals; no semantic token uses it. 2.8:1 on white: not for text. */
  --common-neutral-600: #646f73; /* Secondary text (`fg-muted`): 5.2:1 on white, 5.0:1 on `bg-app`, 4.7:1 on `bg-muted`. */
  --common-neutral-700: #667981; /* Grey-teal from the Figma neutrals; 4.55:1 on white. */
  --common-neutral-800: #303536; /* Dark text variant from the Figma neutrals (rgb 48,53,54). */
  --common-neutral-850: #2e3233; /* Default text (`fg-default`): 13:1 on white, 12.4:1 on `bg-app`. */
  --common-neutral-900: #171d1e; /* Near-black: the Vídeo tag and dark thumbnails. */
  --common-neutral-950: #161616; /* The documentation frames' hard shadow (`shadow-doc`); docs only. */
  --common-neutral-1000: #000000; /* Black: the 8px documentation-frame border; docs only. */
  --common-red-500: #892e38; /* Muted brick red for errors (`fg-danger`), error borders and the Exclusivo badge; 8.4:1 on white. */
  --common-red-100: #fae5e8; /* Pale red behind `common-red-500` error text (6.9:1). */
  --common-green-500: #1c7a3c; /* Success (`fg-success`); 5.4:1 on white. */
  --common-blue-500: #85b6ff; /* Light blue from the Figma file; decorative fills only (2.1:1 on white). */
  --common-yellow-500: #e8b100; /* Yellow from the Figma file; fills only, never text on white (2.0:1). */
  --bg-app: var(--common-neutral-25); /* The app/page background. */
  --bg-surface: var(--common-neutral-0); /* Cards, sheets and inputs. */
  --bg-muted: var(--common-neutral-50); /* Muted sections and disabled controls. */
  --bg-hero: var(--primary-500); /* The purple flood: the signature hero background, always with white type (`fg-on-primary`). */
  --bg-tint-peach: rgba(255, 222, 204, 0.35); /* Warm peach wash for muted informational sections. */
  --fg-default: var(--common-neutral-850); /* Body text and headings, on `bg-surface`, `bg-app` and `bg-muted` (11.7:1 or more). */
  --fg-muted: var(--common-neutral-600); /* Secondary text and metadata, on `bg-surface` (5.2:1), `bg-app` (5.0:1) and `bg-muted` (4.7:1). */
  --fg-subtle: var(--common-neutral-400); /* Disabled labels and placeholders only: 2.5:1 on `bg-surface`, below the 4.5:1 text floor — kept as the source has it; never for text people must read. */
  --fg-on-primary: var(--common-neutral-0); /* Text and icons on purple fills (`bg-hero`, primary buttons): 9.8:1 on `primary-500`. */
  --fg-brand: var(--primary-500); /* Brand-purple text and links, on `bg-surface`, `bg-app`, `bg-muted` and `chip-bg` (8.5:1 or more). */
  --fg-accent: var(--accent-500); /* Accent text, on purple grounds only: 4.7:1 on `primary-500`, 5.8:1 on `primary-700`, 9.4:1 on `primary-900`. On white it is 2.1:1, so never use it as text on light grounds. */
  --fg-danger: var(--common-red-500); /* Error text, on `bg-surface` (8.4:1) and `common-red-100` (6.9:1). */
  --fg-success: var(--common-green-500); /* Success text, on `bg-surface` (5.4:1) and `bg-app` (5.2:1). */
  --border-subtle: var(--common-neutral-100); /* 1px hairline dividers and card outlines. */
  --border-default: var(--common-neutral-200); /* The default 1px border on cards and inputs. */
  --border-strong: var(--common-neutral-400); /* Stronger borders and dividers: 2.5:1 on white, below the 3:1 a control border needs — kept as the source has it. */
  --border-focus: var(--primary-500); /* Keyboard focus: a 2px outline at 2px offset (9.8:1 on white). */
  --button-primary-bg: var(--primary-500); /* Primary button fill. */
  --button-primary-bg-hover: var(--primary-700); /* Primary button fill on hover. */
  --button-primary-fg: var(--common-neutral-0); /* Primary button label, 9.8:1 on `button-primary-bg`. */
  --button-secondary-bg: var(--common-neutral-0); /* Secondary button fill. */
  --button-secondary-border: var(--primary-500); /* Secondary button outline. */
  --button-secondary-fg: var(--primary-500); /* Secondary button label, 9.8:1 on `button-secondary-bg`. */
  --chip-bg: var(--primary-50); /* Filter chip background (`.chip`). */
  --chip-fg: var(--primary-500); /* Filter chip label, 8.5:1 on `chip-bg`. */
  --input-bg: var(--common-neutral-0); /* Text field fill. */
  --input-border: var(--common-neutral-200); /* Text field border at rest; `border-focus` on focus, `common-red-500` on error. */
  --shadow-0: none; /* Flat: a hairline-bordered card instead of a shadow. */
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15); /* The default card: the Material-style twin shadow. A card takes this or a hairline border, not both. */
  --shadow-2: 0 4px 16px 2px rgba(0,0,0,0.18); /* Raised surfaces. */
  --shadow-pop: 0 12px 32px -8px rgba(22, 0, 40, 0.20), 0 2px 8px rgba(22, 0, 40, 0.08); /* Menus and modals; tinted with `primary-900`. */
  --shadow-inset-soft: inset 0 0 0 1px rgba(58,118,175,0.07); /* Pressed and inset states. */
  --shadow-doc: 32px 32px 0 0 rgb(22, 22, 22); /* The neobrutalist documentation-frame hard shadow; docs only, never product UI. */
}
:root {
  --space-0: 0; /* No gap. */
  --space-1: 4px; /* The base unit: icon-to-label gaps. */
  --space-2: 8px; /* Tight gaps inside controls and between chips. */
  --space-3: 12px; /* Gaps between items in a row; the 3× base section gutter. */
  --space-4: 16px; /* Mobile screen padding and gaps between stacked cards. */
  --space-5: 24px; /* Card padding (`.card`); cards pad 24–32. */
  --space-6: 32px; /* The upper end of card padding; section padding. */
  --space-7: 48px; /* Gaps between page sections. */
  --space-8: 60px; /* The largest step of the Figma mobile scale (4, 8, 12, 16, 24, 32, 48, 60). */
  --space-9: 80px; /* Large web section spacing, beyond the mobile scale. */
  --space-10: 120px; /* The largest web section spacing. */
  --radius-xs: 2px; /* Dividers and hairlines. */
  --radius-sm: 8px; /* Chips and inputs. */
  --radius-md: 12px; /* Cards and small containers; text fields. */
  --radius-lg: 16px; /* The DEFAULT card radius; content-card thumbnails. */
  --radius-xl: 24px; /* Modals. */
  --radius-2xl: 60px; /* Documentation-file decorative frames and oversized buttons. */
  --radius-pill: 999px; /* Pills: buttons, chips, avatars, the bottom-nav container. */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-body-alt: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', ui-monospace, monospace;
  --font-marketing: 'Inter', system-ui, sans-serif;
  --text-display: 700 56px/64px var(--font-display); /* Hero moments and page titles. */
  --text-h1: 700 36px/44px var(--font-display); /* Page and section titles. */
  --text-h2: 700 28px/36px var(--font-sans); /* Section headings. */
  --text-h3: 600 24px/32px var(--font-sans); /* Sub-section headings. */
  --text-subtitle: 600 20px/28px var(--font-sans); /* Subtitles and lead lines. */
  --text-body: 400 16px/24px var(--font-sans); /* Default reading text. */
  --text-body-s: 400 14px/20px var(--font-sans); /* Secondary text, set in `fg-muted`. */
  --text-caption: 500 12px/16px var(--font-sans); /* Labels, timestamps and meta rows, set in `fg-muted`. */
  --text-meta: 400 10px/12px var(--font-mono); /* Small spec annotations, token names and `code`, set in `fg-muted`. */
}
.display {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.subtitle {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.meta {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
}