/* FDS · tokens.css — GENERADO desde el modelo. No editar a mano. */

:root {
  /* layout · Viewport range */
  --viewport-min: 410px;
  --viewport-max: 1280px;
  /* typography · Base typography */
  --ft-text-min: 1rem;
  --ft-text-max: 1.125rem;
  --ft-type-step-min: 1.125;
  --ft-type-step-max: 1.2;
  --ft-text-factor: 1;
  /* space · Base spacing */
  --ft-space-min: 0.5rem;
  --ft-space-max: 1.5rem;
  --ft-space-step-min: 1.3;
  --ft-space-step-max: 1.5;
  --ft-space-factor: 1;
  /* space · Semantic spacing multipliers */
  --ft-space-factor-inner: 0.5;
  --ft-space-factor-content: 0.75;
  --ft-space-factor-stack: 1;
  --ft-space-factor-block: 1;
  --ft-space-factor-columns: 1.5;
  --ft-space-factor-section: 3;
  --ft-space-factor-hero: 4.5;
  /* layout · Layout defaults */
  --ft-container: 90%;
  /* space · Layout defaults */
  --ft-padding-content-x: 1rem;
  --ft-padding-content-y: var(--spacing-section);
  --ft-padding-content-y-half: 1.3rem;
  --ft-gap-content: var(--spacing-block);
  /* color · Semantic colors */
  --ft-color-surface: var(--color-secondary-50);
  --ft-color-surface-2: var(--color-white);
  --ft-color-surface-3: var(--color-secondary-100);
  --ft-color-text: var(--color-secondary-950);
  --ft-color-muted: var(--color-secondary-600);
  --ft-color-text-inverse: var(--color-secondary-50);
  --ft-color-border: var(--color-secondary-200);
  --ft-color-brand: var(--color-primary-500);
  --ft-color-brand-hover: var(--color-primary-600);
  --ft-color-brand-contrast: var(--color-white);
  --ft-color-accent: var(--color-secondary-600);
  --ft-color-accent-hover: var(--color-secondary-700);
  --ft-color-accent-contrast: var(--color-white);
  --ft-color-info: oklch(0.546 0.245 262.881);
  --ft-color-info-bg: oklch(0.97 0.014 254.604);
  --ft-color-success: oklch(0.627 0.194 149.214);
  --ft-color-success-bg: oklch(0.982 0.018 155.826);
  --ft-color-warning: oklch(0.555 0.163 48.998);
  --ft-color-warning-bg: oklch(0.987 0.022 95.277);
  --ft-color-error: oklch(0.577 0.245 13);
  --ft-color-error-bg: oklch(0.971 0.013 13);
  --ft-color-background: var(--ft-color-surface);
  /* misc · Display: impacto */
  --display-font: var(--font-display);
  --display-weight: 500;
  --display-wrap: balance;
  --display-lg: var(--ft-text-9xl);
  --display-lg-leading: var(--leading-none);
  --display-lg-tracking: var(--tracking-tight);
  --display-md: var(--ft-text-8xl);
  --display-md-leading: var(--leading-none);
  --display-md-tracking: var(--tracking-tight);
  --display-sm: var(--ft-text-7xl);
  --display-sm-leading: var(--leading-none);
  --display-sm-tracking: var(--tracking-tight);
  /* misc · Heading: estructura */
  --heading-font: var(--font-display);
  --heading-weight: 500;
  --heading-wrap: balance;
  --heading-lg: var(--ft-text-6xl);
  --heading-lg-leading: var(--leading-none);
  --heading-lg-tracking: var(--tracking-tight);
  --heading-md: var(--ft-text-5xl);
  --heading-md-leading: var(--leading-none);
  --heading-md-tracking: var(--tracking-tight);
  --heading-sm: var(--ft-text-4xl);
  --heading-sm-leading: var(--leading-none);
  --heading-sm-tracking: var(--tracking-tight);
  /* misc · Subheading: el puente */
  --subheading-font: var(--font-display);
  --subheading-weight: 600;
  --subheading-wrap: pretty;
  --subheading-lg: var(--ft-text-3xl);
  --subheading-lg-leading: var(--leading-tight);
  --subheading-lg-tracking: var(--tracking-normal);
  --subheading-md: var(--ft-text-2xl);
  --subheading-md-leading: var(--leading-tight);
  --subheading-md-tracking: var(--tracking-normal);
  --subheading-sm: var(--ft-text-xl);
  --subheading-sm-leading: var(--leading-tight);
  --subheading-sm-tracking: var(--tracking-normal);
  /* typography · Cuerpo */
  --text-font: var(--font-body);
  --text-wrap: pretty;
  --text-large: var(--ft-text-lg);
  --text-large-leading: var(--leading-snug);
  --text-large-tracking: var(--tracking-normal);
  --text-medium: var(--ft-text-base);
  --text-medium-leading: var(--leading-normal);
  --text-medium-tracking: var(--tracking-normal);
  --text-small: var(--ft-text-sm);
  --text-small-leading: var(--leading-relaxed);
  --text-small-tracking: var(--tracking-normal);
  /* layout · Card widths */
  --ft-card-xs: 12rem;
  --ft-card-sm: 14rem;
  --ft-card-md: 18rem;
  --ft-card-lg: 24rem;
  --ft-card-xl: 36rem;
  /* component · Buttons */
  --btn-primary-color: var(--color-neutral-100);
  --btn-secondary-color: var(--color-neutral-100);
  --btn-outline-bg: transparent;
  --btn-outline-border: currentColor;
  --btn-outline-color: var(--color-neutral-800);
  --btn-py: 0.6em;
  --btn-px: 1.75em;
  /* radius · Radius */
  --radius-none: 0px;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  /* radius · Radius roles */
  --radius-button: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-section: var(--radius-lg);
  /* shadow · Sombra */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* shadow · Shadow roles */
  --shadow-card: var(--shadow-md);
  --shadow-raised: var(--shadow-lg);
  /* typography · 2) RUNTIME TOKEN FALLBACKS (no calc/clamp required) */
  --ft-text-xs: 0.79rem;
  --ft-text-sm: 0.889rem;
  --ft-text-base: 1rem;
  --ft-text-lg: 1.125rem;
  --ft-text-xl: 1.266rem;
  --ft-text-2xl: 1.424rem;
  --ft-text-3xl: 1.602rem;
  --ft-text-4xl: 1.802rem;
  --ft-text-5xl: 2.027rem;
  --ft-text-6xl: 2.281rem;
  --ft-text-7xl: 2.566rem;
  --ft-text-8xl: 2.887rem;
  --ft-text-9xl: 3.247rem;
  /* space · 2) RUNTIME TOKEN FALLBACKS (no calc/clamp required) */
  --ft-spacing-fluid-2xs: 0.25rem;
  --ft-spacing-fluid-md: 0.5rem;
  --ft-spacing-fluid-sm: 0.4rem;
  --ft-spacing-fluid-xs: 0.3rem;
  --ft-spacing-fluid-lg: 0.65rem;
  --ft-spacing-fluid-xl: 0.85rem;
  --ft-spacing-fluid-2xl: 1.1rem;
  --ft-spacing-inner: 0.15rem;
  --ft-spacing-content: 0.3rem;
  --ft-spacing-stack: 0.4rem;
  --ft-spacing-block: 0.5rem;
  --ft-spacing-columns: 0.75rem;
  --ft-spacing-section: 2.55rem;
  --ft-spacing-hero: 4.95rem;
  /* typography · Fonts */
  --font-body: Arial, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  /* color · Palette - Neutral */
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  /* color · Palette - Secondary */
  --color-secondary-50: oklch(0.969 0.002 18.01);
  --color-secondary-100: oklch(0.927 0.007 17.53);
  --color-secondary-200: oklch(0.862 0.01 17.51);
  --color-secondary-300: oklch(0.786 0.017 17.61);
  --color-secondary-400: oklch(0.719 0.022 17.74);
  --color-secondary-500: oklch(0.64 0.031 18.02);
  --color-secondary-600: oklch(0.569 0.036 18.28);
  --color-secondary-700: oklch(0.493 0.029 18.21);
  --color-secondary-800: oklch(0.42 0.025 18.21);
  --color-secondary-900: oklch(0.292 0.015 18.07);
  --color-secondary-950: oklch(0.23 0.011 18.02);
  /* color · Palette - Primary */
  --color-primary-50: oklch(0.9700 0.0255 27.19);
  --color-primary-100: oklch(0.9400 0.0428 27.19);
  --color-primary-200: oklch(0.8700 0.0765 27.19);
  --color-primary-300: oklch(0.8000 0.1056 27.19);
  --color-primary-400: oklch(0.7000 0.1432 27.19);
  --color-primary-500: oklch(0.5365 0.1984 27.19);
  --color-primary-600: oklch(0.4963 0.1938 27.19);
  --color-primary-700: oklch(0.4517 0.1884 27.19);
  --color-primary-800: oklch(0.3916 0.1805 27.19);
  --color-primary-900: oklch(0.3192 0.1698 27.19);
  --color-primary-950: oklch(0.2505 0.1579 27.19);
  /* color · Flat defaults */
  --color-secondary: var(--color-secondary-500);
  --color-primary: oklch(0.5365 0.1984 27.19);
  --color-white: oklch(100% 0 0);
  /* color · Semantic colors */
  --color-surface: var(--ft-color-surface);
  --color-surface-2: var(--ft-color-surface-2);
  --color-surface-3: var(--ft-color-surface-3);
  --color-text: var(--ft-color-text);
  --color-muted: var(--ft-color-muted);
  --color-text-inverse: var(--ft-color-text-inverse);
  --color-border: var(--ft-color-border);
  --color-brand: var(--ft-color-brand);
  --color-brand-hover: var(--ft-color-brand-hover);
  --color-brand-contrast: var(--ft-color-brand-contrast);
  --color-accent: var(--ft-color-accent);
  --color-accent-hover: var(--ft-color-accent-hover);
  --color-accent-contrast: var(--ft-color-accent-contrast);
  --color-info: var(--ft-color-info);
  --color-info-bg: var(--ft-color-info-bg);
  --color-success: var(--ft-color-success);
  --color-success-bg: var(--ft-color-success-bg);
  --color-warning: var(--ft-color-warning);
  --color-warning-bg: var(--ft-color-warning-bg);
  --color-error: var(--ft-color-error);
  --color-error-bg: var(--ft-color-error-bg);
  /* typography · Leading */
  --leading-none: 1em;
  --leading-tight: 1.25em;
  --leading-snug: 1.375em;
  --leading-normal: 1.5em;
  --leading-relaxed: 1.625em;
  --leading-loose: 2em;
  /* typography · Tracking */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  /* radius · Radius */
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  /* shadow · Sombra */
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  /* typography · Text shadow */
  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
  /* misc · Aspect ratios */
  --aspect-video: 16 / 9;
  --aspect-rrss: 1.91 / 1;
  --aspect-wide: 18 / 8;
  --aspect-ultrawide: 18 / 5;
  --aspect-golden: 1.618 / 1;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  /* typography · Typography scale */
  --text-xs: var(--ft-text-xs);
  --text-sm: var(--ft-text-sm);
  --text-base: var(--ft-text-base);
  --text-lg: var(--ft-text-lg);
  --text-xl: var(--ft-text-xl);
  --text-2xl: var(--ft-text-2xl);
  --text-3xl: var(--ft-text-3xl);
  --text-4xl: var(--ft-text-4xl);
  --text-5xl: var(--ft-text-5xl);
  --text-6xl: var(--ft-text-6xl);
  --text-7xl: var(--ft-text-7xl);
  --text-8xl: var(--ft-text-8xl);
  --text-9xl: var(--ft-text-9xl);
  /* typography · Pairs */
  --text-xs--line-height: 1.5;
  --text-xs--letter-spacing: 0em;
  --text-sm--line-height: 1.5;
  --text-sm--letter-spacing: 0em;
  --text-base--line-height: 1.5;
  --text-base--letter-spacing: 0em;
  --text-lg--line-height: 1.45;
  --text-lg--letter-spacing: 0em;
  --text-xl--line-height: 1.4;
  --text-xl--letter-spacing: -0.0125em;
  --text-2xl--line-height: 1.35;
  --text-2xl--letter-spacing: -0.0175em;
  --text-3xl--line-height: 1.25;
  --text-3xl--letter-spacing: -0.02em;
  --text-4xl--line-height: 1.2;
  --text-4xl--letter-spacing: -0.022em;
  --text-5xl--line-height: 1.15;
  --text-5xl--letter-spacing: -0.025em;
  --text-6xl--line-height: 1.1;
  --text-6xl--letter-spacing: -0.025em;
  --text-7xl--line-height: 1.05;
  --text-7xl--letter-spacing: -0.03em;
  --text-8xl--line-height: 1;
  --text-8xl--letter-spacing: -0.03em;
  --text-9xl--line-height: 1;
  --text-9xl--letter-spacing: -0.035em;
  /* misc · Spacing scale */
  --spacing: 0.25rem;
  /* space · Spacing scale */
  --spacing-fluid-2xs: var(--ft-spacing-fluid-2xs);
  --spacing-fluid-md: var(--ft-spacing-fluid-md);
  --spacing-fluid-sm: var(--ft-spacing-fluid-sm);
  --spacing-fluid-xs: var(--ft-spacing-fluid-xs);
  --spacing-fluid-lg: var(--ft-spacing-fluid-lg);
  --spacing-fluid-xl: var(--ft-spacing-fluid-xl);
  --spacing-fluid-2xl: var(--ft-spacing-fluid-2xl);
  /* space · Semantic spacing */
  --spacing-inner: var(--ft-spacing-inner);
  --spacing-content: var(--ft-spacing-content);
  --spacing-stack: var(--ft-spacing-stack);
  --spacing-block: var(--ft-spacing-block);
  --spacing-columns: var(--ft-spacing-columns);
  --spacing-section: var(--ft-spacing-section);
  --spacing-hero: var(--ft-spacing-hero);
}

@media (min-width: 1280px) {
  :root {
    /* typography · scale */
    --ft-text-xs: 0.781rem;
    --ft-text-sm: 0.938rem;
    --ft-text-base: 1.125rem;
    --ft-text-lg: 1.35rem;
    --ft-text-xl: 1.62rem;
    --ft-text-2xl: 1.944rem;
    --ft-text-3xl: 2.333rem;
    --ft-text-4xl: 2.799rem;
    --ft-text-5xl: 3.359rem;
    --ft-text-6xl: 4.031rem;
    --ft-text-7xl: 4.837rem;
    --ft-text-8xl: 5.805rem;
    --ft-text-9xl: 6.966rem;
    /* space · fluid */
    --ft-spacing-fluid-2xs: 0.45rem;
    --ft-spacing-fluid-md: 1.5rem;
    --ft-spacing-fluid-sm: 1rem;
    --ft-spacing-fluid-xs: 0.65rem;
    --ft-spacing-fluid-lg: 2.25rem;
    --ft-spacing-fluid-xl: 3.4rem;
    --ft-spacing-fluid-2xl: 5.05rem;
    /* space · semantic */
    --ft-spacing-inner: 0.35rem;
    --ft-spacing-content: 0.75rem;
    --ft-spacing-stack: 1rem;
    --ft-spacing-block: 1.5rem;
    --ft-spacing-columns: 2.25rem;
    --ft-spacing-section: 10.2rem;
    --ft-spacing-hero: 22.75rem;
    /* space · padding */
    --ft-padding-content-y-half: 5.1rem;
  }
}

:root[data-theme="dark"] {
  /* color · semantic */
  --ft-color-surface: var(--color-secondary-950);
  --ft-color-surface-2: var(--color-secondary-900);
  --ft-color-surface-3: var(--color-secondary-800);
  --ft-color-text: var(--color-secondary-50);
  --ft-color-muted: var(--color-secondary-400);
  --ft-color-text-inverse: var(--color-secondary-950);
  --ft-color-border: var(--color-secondary-800);
  --ft-color-brand: var(--color-primary-400);
  --ft-color-brand-hover: var(--color-primary-300);
  --ft-color-brand-contrast: var(--color-secondary-950);
  --ft-color-accent: var(--color-secondary-300);
  --ft-color-accent-hover: var(--color-secondary-200);
  --ft-color-accent-contrast: var(--color-secondary-950);
  --ft-color-info: oklch(0.707 0.165 254.624);
  --ft-color-info-bg: oklch(0.282 0.091 267.935);
  --ft-color-success: oklch(0.792 0.209 151.711);
  --ft-color-success-bg: oklch(0.266 0.065 152.934);
  --ft-color-warning: oklch(0.828 0.189 84.429);
  --ft-color-warning-bg: oklch(0.279 0.077 45.635);
  --ft-color-error: oklch(0.704 0.191 13);
  --ft-color-error-bg: oklch(0.258 0.092 13);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* color · semantic */
    --ft-color-surface: var(--color-secondary-950);
    --ft-color-surface-2: var(--color-secondary-900);
    --ft-color-surface-3: var(--color-secondary-800);
    --ft-color-text: var(--color-secondary-50);
    --ft-color-muted: var(--color-secondary-400);
    --ft-color-text-inverse: var(--color-secondary-950);
    --ft-color-border: var(--color-secondary-800);
    --ft-color-brand: var(--color-primary-400);
    --ft-color-brand-hover: var(--color-primary-300);
    --ft-color-brand-contrast: var(--color-secondary-950);
    --ft-color-accent: var(--color-secondary-300);
    --ft-color-accent-hover: var(--color-secondary-200);
    --ft-color-accent-contrast: var(--color-secondary-950);
    --ft-color-info: oklch(0.707 0.165 254.624);
    --ft-color-info-bg: oklch(0.282 0.091 267.935);
    --ft-color-success: oklch(0.792 0.209 151.711);
    --ft-color-success-bg: oklch(0.266 0.065 152.934);
    --ft-color-warning: oklch(0.828 0.189 84.429);
    --ft-color-warning-bg: oklch(0.279 0.077 45.635);
    --ft-color-error: oklch(0.704 0.191 13);
    --ft-color-error-bg: oklch(0.258 0.092 13);
  }
}

/* FDS · utilidades — GENERADO desde el modelo. No editar a mano. */

@layer utilities {
  .aspect-golden { aspect-ratio: var(--aspect-golden); }
  .aspect-landscape { aspect-ratio: var(--aspect-landscape); }
  .aspect-portrait { aspect-ratio: var(--aspect-portrait); }
  .aspect-rrss { aspect-ratio: var(--aspect-rrss); }
  .aspect-ultrawide { aspect-ratio: var(--aspect-ultrawide); }
  .aspect-video { aspect-ratio: var(--aspect-video); }
  .aspect-wide { aspect-ratio: var(--aspect-wide); }
  .bg-accent { background-color: var(--color-accent); }
  .bg-accent-contrast { background-color: var(--color-accent-contrast); }
  .bg-accent-hover { background-color: var(--color-accent-hover); }
  .bg-background { background-color: var(--ft-color-background); }
  .bg-border { background-color: var(--color-border); }
  .bg-brand { background-color: var(--color-brand); }
  .bg-brand-contrast { background-color: var(--color-brand-contrast); }
  .bg-brand-hover { background-color: var(--color-brand-hover); }
  .bg-error { background-color: var(--color-error); }
  .bg-error-bg { background-color: var(--color-error-bg); }
  .bg-info { background-color: var(--color-info); }
  .bg-info-bg { background-color: var(--color-info-bg); }
  .bg-muted { background-color: var(--color-muted); }
  .bg-neutral-100 { background-color: var(--color-neutral-100); }
  .bg-neutral-200 { background-color: var(--color-neutral-200); }
  .bg-neutral-300 { background-color: var(--color-neutral-300); }
  .bg-neutral-400 { background-color: var(--color-neutral-400); }
  .bg-neutral-50 { background-color: var(--color-neutral-50); }
  .bg-neutral-500 { background-color: var(--color-neutral-500); }
  .bg-neutral-600 { background-color: var(--color-neutral-600); }
  .bg-neutral-700 { background-color: var(--color-neutral-700); }
  .bg-neutral-800 { background-color: var(--color-neutral-800); }
  .bg-neutral-900 { background-color: var(--color-neutral-900); }
  .bg-neutral-950 { background-color: var(--color-neutral-950); }
  .bg-primary { background-color: var(--color-primary); }
  .bg-primary-100 { background-color: var(--color-primary-100); }
  .bg-primary-200 { background-color: var(--color-primary-200); }
  .bg-primary-300 { background-color: var(--color-primary-300); }
  .bg-primary-400 { background-color: var(--color-primary-400); }
  .bg-primary-50 { background-color: var(--color-primary-50); }
  .bg-primary-500 { background-color: var(--color-primary-500); }
  .bg-primary-600 { background-color: var(--color-primary-600); }
  .bg-primary-700 { background-color: var(--color-primary-700); }
  .bg-primary-800 { background-color: var(--color-primary-800); }
  .bg-primary-900 { background-color: var(--color-primary-900); }
  .bg-primary-950 { background-color: var(--color-primary-950); }
  .bg-secondary { background-color: var(--color-secondary); }
  .bg-secondary-100 { background-color: var(--color-secondary-100); }
  .bg-secondary-200 { background-color: var(--color-secondary-200); }
  .bg-secondary-300 { background-color: var(--color-secondary-300); }
  .bg-secondary-400 { background-color: var(--color-secondary-400); }
  .bg-secondary-50 { background-color: var(--color-secondary-50); }
  .bg-secondary-500 { background-color: var(--color-secondary-500); }
  .bg-secondary-600 { background-color: var(--color-secondary-600); }
  .bg-secondary-700 { background-color: var(--color-secondary-700); }
  .bg-secondary-800 { background-color: var(--color-secondary-800); }
  .bg-secondary-900 { background-color: var(--color-secondary-900); }
  .bg-secondary-950 { background-color: var(--color-secondary-950); }
  .bg-success { background-color: var(--color-success); }
  .bg-success-bg { background-color: var(--color-success-bg); }
  .bg-surface { background-color: var(--color-surface); }
  .bg-surface-2 { background-color: var(--color-surface-2); }
  .bg-surface-3 { background-color: var(--color-surface-3); }
  .bg-text { background-color: var(--color-text); }
  .bg-text-inverse { background-color: var(--color-text-inverse); }
  .bg-warning { background-color: var(--color-warning); }
  .bg-warning-bg { background-color: var(--color-warning-bg); }
  .bg-white { background-color: var(--color-white); }
  .border-accent { border-color: var(--color-accent); }
  .border-accent-contrast { border-color: var(--color-accent-contrast); }
  .border-accent-hover { border-color: var(--color-accent-hover); }
  .border-background { border-color: var(--ft-color-background); }
  .border-border { border-color: var(--color-border); }
  .border-brand { border-color: var(--color-brand); }
  .border-brand-contrast { border-color: var(--color-brand-contrast); }
  .border-brand-hover { border-color: var(--color-brand-hover); }
  .border-error { border-color: var(--color-error); }
  .border-error-bg { border-color: var(--color-error-bg); }
  .border-info { border-color: var(--color-info); }
  .border-info-bg { border-color: var(--color-info-bg); }
  .border-muted { border-color: var(--color-muted); }
  .border-neutral-100 { border-color: var(--color-neutral-100); }
  .border-neutral-200 { border-color: var(--color-neutral-200); }
  .border-neutral-300 { border-color: var(--color-neutral-300); }
  .border-neutral-400 { border-color: var(--color-neutral-400); }
  .border-neutral-50 { border-color: var(--color-neutral-50); }
  .border-neutral-500 { border-color: var(--color-neutral-500); }
  .border-neutral-600 { border-color: var(--color-neutral-600); }
  .border-neutral-700 { border-color: var(--color-neutral-700); }
  .border-neutral-800 { border-color: var(--color-neutral-800); }
  .border-neutral-900 { border-color: var(--color-neutral-900); }
  .border-neutral-950 { border-color: var(--color-neutral-950); }
  .border-primary { border-color: var(--color-primary); }
  .border-primary-100 { border-color: var(--color-primary-100); }
  .border-primary-200 { border-color: var(--color-primary-200); }
  .border-primary-300 { border-color: var(--color-primary-300); }
  .border-primary-400 { border-color: var(--color-primary-400); }
  .border-primary-50 { border-color: var(--color-primary-50); }
  .border-primary-500 { border-color: var(--color-primary-500); }
  .border-primary-600 { border-color: var(--color-primary-600); }
  .border-primary-700 { border-color: var(--color-primary-700); }
  .border-primary-800 { border-color: var(--color-primary-800); }
  .border-primary-900 { border-color: var(--color-primary-900); }
  .border-primary-950 { border-color: var(--color-primary-950); }
  .border-secondary { border-color: var(--color-secondary); }
  .border-secondary-100 { border-color: var(--color-secondary-100); }
  .border-secondary-200 { border-color: var(--color-secondary-200); }
  .border-secondary-300 { border-color: var(--color-secondary-300); }
  .border-secondary-400 { border-color: var(--color-secondary-400); }
  .border-secondary-50 { border-color: var(--color-secondary-50); }
  .border-secondary-500 { border-color: var(--color-secondary-500); }
  .border-secondary-600 { border-color: var(--color-secondary-600); }
  .border-secondary-700 { border-color: var(--color-secondary-700); }
  .border-secondary-800 { border-color: var(--color-secondary-800); }
  .border-secondary-900 { border-color: var(--color-secondary-900); }
  .border-secondary-950 { border-color: var(--color-secondary-950); }
  .border-success { border-color: var(--color-success); }
  .border-success-bg { border-color: var(--color-success-bg); }
  .border-surface { border-color: var(--color-surface); }
  .border-surface-2 { border-color: var(--color-surface-2); }
  .border-surface-3 { border-color: var(--color-surface-3); }
  .border-text { border-color: var(--color-text); }
  .border-text-inverse { border-color: var(--color-text-inverse); }
  .border-warning { border-color: var(--color-warning); }
  .border-warning-bg { border-color: var(--color-warning-bg); }
  .border-white { border-color: var(--color-white); }
  .font-body { font-family: var(--font-body); }
  .font-display { font-family: var(--font-display); }
  .font-mono { font-family: var(--font-mono); }
  .gap-block { gap: var(--spacing-block); }
  .gap-columns { gap: var(--spacing-columns); }
  .gap-content { gap: var(--spacing-content); }
  .gap-fluid-2xl { gap: var(--spacing-fluid-2xl); }
  .gap-fluid-2xs { gap: var(--spacing-fluid-2xs); }
  .gap-fluid-lg { gap: var(--spacing-fluid-lg); }
  .gap-fluid-md { gap: var(--spacing-fluid-md); }
  .gap-fluid-sm { gap: var(--spacing-fluid-sm); }
  .gap-fluid-xl { gap: var(--spacing-fluid-xl); }
  .gap-fluid-xs { gap: var(--spacing-fluid-xs); }
  .gap-hero { gap: var(--spacing-hero); }
  .gap-inner { gap: var(--spacing-inner); }
  .gap-section { gap: var(--spacing-section); }
  .gap-stack { gap: var(--spacing-stack); }
  .leading-loose { line-height: var(--leading-loose); }
  .leading-none { line-height: var(--leading-none); }
  .leading-normal { line-height: var(--leading-normal); }
  .leading-relaxed { line-height: var(--leading-relaxed); }
  .leading-snug { line-height: var(--leading-snug); }
  .leading-tight { line-height: var(--leading-tight); }
  .m-block { margin: var(--spacing-block); }
  .m-columns { margin: var(--spacing-columns); }
  .m-content { margin: var(--spacing-content); }
  .m-fluid-2xl { margin: var(--spacing-fluid-2xl); }
  .m-fluid-2xs { margin: var(--spacing-fluid-2xs); }
  .m-fluid-lg { margin: var(--spacing-fluid-lg); }
  .m-fluid-md { margin: var(--spacing-fluid-md); }
  .m-fluid-sm { margin: var(--spacing-fluid-sm); }
  .m-fluid-xl { margin: var(--spacing-fluid-xl); }
  .m-fluid-xs { margin: var(--spacing-fluid-xs); }
  .m-hero { margin: var(--spacing-hero); }
  .m-inner { margin: var(--spacing-inner); }
  .m-section { margin: var(--spacing-section); }
  .m-stack { margin: var(--spacing-stack); }
  .p-block { padding: var(--spacing-block); }
  .p-columns { padding: var(--spacing-columns); }
  .p-content { padding: var(--spacing-content); }
  .p-fluid-2xl { padding: var(--spacing-fluid-2xl); }
  .p-fluid-2xs { padding: var(--spacing-fluid-2xs); }
  .p-fluid-lg { padding: var(--spacing-fluid-lg); }
  .p-fluid-md { padding: var(--spacing-fluid-md); }
  .p-fluid-sm { padding: var(--spacing-fluid-sm); }
  .p-fluid-xl { padding: var(--spacing-fluid-xl); }
  .p-fluid-xs { padding: var(--spacing-fluid-xs); }
  .p-hero { padding: var(--spacing-hero); }
  .p-inner { padding: var(--spacing-inner); }
  .p-section { padding: var(--spacing-section); }
  .p-stack { padding: var(--spacing-stack); }
  .px-block { padding-inline: var(--spacing-block); }
  .px-columns { padding-inline: var(--spacing-columns); }
  .px-content { padding-inline: var(--spacing-content); }
  .px-fluid-2xl { padding-inline: var(--spacing-fluid-2xl); }
  .px-fluid-2xs { padding-inline: var(--spacing-fluid-2xs); }
  .px-fluid-lg { padding-inline: var(--spacing-fluid-lg); }
  .px-fluid-md { padding-inline: var(--spacing-fluid-md); }
  .px-fluid-sm { padding-inline: var(--spacing-fluid-sm); }
  .px-fluid-xl { padding-inline: var(--spacing-fluid-xl); }
  .px-fluid-xs { padding-inline: var(--spacing-fluid-xs); }
  .px-hero { padding-inline: var(--spacing-hero); }
  .px-inner { padding-inline: var(--spacing-inner); }
  .px-section { padding-inline: var(--spacing-section); }
  .px-stack { padding-inline: var(--spacing-stack); }
  .py-block { padding-block: var(--spacing-block); }
  .py-columns { padding-block: var(--spacing-columns); }
  .py-content { padding-block: var(--spacing-content); }
  .py-fluid-2xl { padding-block: var(--spacing-fluid-2xl); }
  .py-fluid-2xs { padding-block: var(--spacing-fluid-2xs); }
  .py-fluid-lg { padding-block: var(--spacing-fluid-lg); }
  .py-fluid-md { padding-block: var(--spacing-fluid-md); }
  .py-fluid-sm { padding-block: var(--spacing-fluid-sm); }
  .py-fluid-xl { padding-block: var(--spacing-fluid-xl); }
  .py-fluid-xs { padding-block: var(--spacing-fluid-xs); }
  .py-hero { padding-block: var(--spacing-hero); }
  .py-inner { padding-block: var(--spacing-inner); }
  .py-section { padding-block: var(--spacing-section); }
  .py-stack { padding-block: var(--spacing-stack); }
  .rounded-2xl { border-radius: var(--radius-2xl); }
  .rounded-3xl { border-radius: var(--radius-3xl); }
  .rounded-4xl { border-radius: var(--radius-4xl); }
  .rounded-button { border-radius: var(--radius-button); }
  .rounded-card { border-radius: var(--radius-card); }
  .rounded-full { border-radius: var(--radius-full); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-md { border-radius: var(--radius-md); }
  .rounded-none { border-radius: var(--radius-none); }
  .rounded-section { border-radius: var(--radius-section); }
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-xs { border-radius: var(--radius-xs); }
  .shadow-2xl { box-shadow: var(--shadow-2xl); }
  .shadow-2xs { box-shadow: var(--shadow-2xs); }
  .shadow-card { box-shadow: var(--shadow-card); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-none { box-shadow: var(--shadow-none); }
  .shadow-raised { box-shadow: var(--shadow-raised); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-xl { box-shadow: var(--shadow-xl); }
  .shadow-xs { box-shadow: var(--shadow-xs); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-2xl--letter-spacing { font-size: var(--text-2xl--letter-spacing); }
  .text-2xl--line-height { font-size: var(--text-2xl--line-height); }
  .text-3xl { font-size: var(--text-3xl); }
  .text-3xl--letter-spacing { font-size: var(--text-3xl--letter-spacing); }
  .text-3xl--line-height { font-size: var(--text-3xl--line-height); }
  .text-4xl { font-size: var(--text-4xl); }
  .text-4xl--letter-spacing { font-size: var(--text-4xl--letter-spacing); }
  .text-4xl--line-height { font-size: var(--text-4xl--line-height); }
  .text-5xl { font-size: var(--text-5xl); }
  .text-5xl--letter-spacing { font-size: var(--text-5xl--letter-spacing); }
  .text-5xl--line-height { font-size: var(--text-5xl--line-height); }
  .text-6xl { font-size: var(--text-6xl); }
  .text-6xl--letter-spacing { font-size: var(--text-6xl--letter-spacing); }
  .text-6xl--line-height { font-size: var(--text-6xl--line-height); }
  .text-7xl { font-size: var(--text-7xl); }
  .text-7xl--letter-spacing { font-size: var(--text-7xl--letter-spacing); }
  .text-7xl--line-height { font-size: var(--text-7xl--line-height); }
  .text-8xl { font-size: var(--text-8xl); }
  .text-8xl--letter-spacing { font-size: var(--text-8xl--letter-spacing); }
  .text-8xl--line-height { font-size: var(--text-8xl--line-height); }
  .text-9xl { font-size: var(--text-9xl); }
  .text-9xl--letter-spacing { font-size: var(--text-9xl--letter-spacing); }
  .text-9xl--line-height { font-size: var(--text-9xl--line-height); }
  .text-accent { color: var(--color-accent); }
  .text-accent-contrast { color: var(--color-accent-contrast); }
  .text-accent-hover { color: var(--color-accent-hover); }
  .text-background { color: var(--ft-color-background); }
  .text-base { font-size: var(--text-base); }
  .text-base--letter-spacing { font-size: var(--text-base--letter-spacing); }
  .text-base--line-height { font-size: var(--text-base--line-height); }
  .text-border { color: var(--color-border); }
  .text-brand { color: var(--color-brand); }
  .text-brand-contrast { color: var(--color-brand-contrast); }
  .text-brand-hover { color: var(--color-brand-hover); }
  .text-error { color: var(--color-error); }
  .text-error-bg { color: var(--color-error-bg); }
  .text-font { font-size: var(--text-font); }
  .text-info { color: var(--color-info); }
  .text-info-bg { color: var(--color-info-bg); }
  .text-large { font-size: var(--text-large); }
  .text-large-leading { font-size: var(--text-large-leading); }
  .text-large-tracking { font-size: var(--text-large-tracking); }
  .text-lg { font-size: var(--text-lg); }
  .text-lg--letter-spacing { font-size: var(--text-lg--letter-spacing); }
  .text-lg--line-height { font-size: var(--text-lg--line-height); }
  .text-medium { font-size: var(--text-medium); }
  .text-medium-leading { font-size: var(--text-medium-leading); }
  .text-medium-tracking { font-size: var(--text-medium-tracking); }
  .text-muted { color: var(--color-muted); }
  .text-neutral-100 { color: var(--color-neutral-100); }
  .text-neutral-200 { color: var(--color-neutral-200); }
  .text-neutral-300 { color: var(--color-neutral-300); }
  .text-neutral-400 { color: var(--color-neutral-400); }
  .text-neutral-50 { color: var(--color-neutral-50); }
  .text-neutral-500 { color: var(--color-neutral-500); }
  .text-neutral-600 { color: var(--color-neutral-600); }
  .text-neutral-700 { color: var(--color-neutral-700); }
  .text-neutral-800 { color: var(--color-neutral-800); }
  .text-neutral-900 { color: var(--color-neutral-900); }
  .text-neutral-950 { color: var(--color-neutral-950); }
  .text-primary { color: var(--color-primary); }
  .text-primary-100 { color: var(--color-primary-100); }
  .text-primary-200 { color: var(--color-primary-200); }
  .text-primary-300 { color: var(--color-primary-300); }
  .text-primary-400 { color: var(--color-primary-400); }
  .text-primary-50 { color: var(--color-primary-50); }
  .text-primary-500 { color: var(--color-primary-500); }
  .text-primary-600 { color: var(--color-primary-600); }
  .text-primary-700 { color: var(--color-primary-700); }
  .text-primary-800 { color: var(--color-primary-800); }
  .text-primary-900 { color: var(--color-primary-900); }
  .text-primary-950 { color: var(--color-primary-950); }
  .text-secondary { color: var(--color-secondary); }
  .text-secondary-100 { color: var(--color-secondary-100); }
  .text-secondary-200 { color: var(--color-secondary-200); }
  .text-secondary-300 { color: var(--color-secondary-300); }
  .text-secondary-400 { color: var(--color-secondary-400); }
  .text-secondary-50 { color: var(--color-secondary-50); }
  .text-secondary-500 { color: var(--color-secondary-500); }
  .text-secondary-600 { color: var(--color-secondary-600); }
  .text-secondary-700 { color: var(--color-secondary-700); }
  .text-secondary-800 { color: var(--color-secondary-800); }
  .text-secondary-900 { color: var(--color-secondary-900); }
  .text-secondary-950 { color: var(--color-secondary-950); }
  .text-shadow-2xs { font-size: var(--text-shadow-2xs); }
  .text-shadow-lg { font-size: var(--text-shadow-lg); }
  .text-shadow-md { font-size: var(--text-shadow-md); }
  .text-shadow-sm { font-size: var(--text-shadow-sm); }
  .text-shadow-xs { font-size: var(--text-shadow-xs); }
  .text-sm { font-size: var(--text-sm); }
  .text-sm--letter-spacing { font-size: var(--text-sm--letter-spacing); }
  .text-sm--line-height { font-size: var(--text-sm--line-height); }
  .text-small { font-size: var(--text-small); }
  .text-small-leading { font-size: var(--text-small-leading); }
  .text-small-tracking { font-size: var(--text-small-tracking); }
  .text-success { color: var(--color-success); }
  .text-success-bg { color: var(--color-success-bg); }
  .text-surface { color: var(--color-surface); }
  .text-surface-2 { color: var(--color-surface-2); }
  .text-surface-3 { color: var(--color-surface-3); }
  .text-text { color: var(--color-text); }
  .text-text-inverse { color: var(--color-text-inverse); }
  .text-warning { color: var(--color-warning); }
  .text-warning-bg { color: var(--color-warning-bg); }
  .text-white { color: var(--color-white); }
  .text-wrap { font-size: var(--text-wrap); }
  .text-xl { font-size: var(--text-xl); }
  .text-xl--letter-spacing { font-size: var(--text-xl--letter-spacing); }
  .text-xl--line-height { font-size: var(--text-xl--line-height); }
  .text-xs { font-size: var(--text-xs); }
  .text-xs--letter-spacing { font-size: var(--text-xs--letter-spacing); }
  .text-xs--line-height { font-size: var(--text-xs--line-height); }
  .tracking-normal { letter-spacing: var(--tracking-normal); }
  .tracking-tight { letter-spacing: var(--tracking-tight); }
  .tracking-tighter { letter-spacing: var(--tracking-tighter); }
  .tracking-wide { letter-spacing: var(--tracking-wide); }
  .tracking-wider { letter-spacing: var(--tracking-wider); }
  .tracking-widest { letter-spacing: var(--tracking-widest); }
}