/* design-systems/nebula/tokens.css
 * Nebula — tokens del sistema de diseño.
 * Fuente de verdad: este paquete.
 * Tema claro por defecto; oscuro con [data-theme="dark"] o prefers-color-scheme.
 * Plataforma móvil por defecto; [data-platform="web"] y [data-platform="desktop"] cambian medidas.
 */

@font-face { font-family: "Sora"; src: url("./fonts/Sora-variable.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Jost"; src: url("./fonts/Jost-variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  /* core/color */
  --color-palette-amber: #FFB23E;
  --color-palette-celeste: #7BD1F6;
  --color-palette-ink: #F4F2FA;
  --color-palette-paper: #F1EFF8;
  --color-palette-sky: #0B0E1A;
  --color-palette-violet: #803EFA;
  /* core/dimension */
  --radius-full: 999px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-xl: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --border-width-focus: 3px;
  /* core/typography */
  --typography-fontfamily-body: "Jost", system-ui, sans-serif;
  --typography-fontfamily-display: "Sora", system-ui, sans-serif;
  --typography-fontsize-2xl: 30px;
  --typography-fontsize-2xs: 12px;
  --typography-fontsize-3xl: 40px;
  --typography-fontsize-lg: 20px;
  --typography-fontsize-md: 18px;
  --typography-fontsize-sm: 16px;
  --typography-fontsize-xl: 24px;
  --typography-fontsize-xs: 14px;
  --typography-fontweight-bold: 700;
  --typography-fontweight-medium: 500;
  --typography-fontweight-regular: 400;
  --typography-fontweight-semibold: 600;
  --typography-letterspacing-2xl: -0.02;
  --typography-letterspacing-3xl: -0.025;
  --typography-letterspacing-label: 0.14;
  --typography-letterspacing-lg: -0.006;
  --typography-letterspacing-normal: 0;
  --typography-letterspacing-xl: -0.012;
  --typography-lineheight-body: 1.55;
  --typography-lineheight-none: 1;
  --typography-lineheight-snug: 1.35;
  --typography-lineheight-tight: 1.15;
  /* semantic/base */
  --elevation-sheet-blur: 16px;
  --elevation-sheet-offset-y: -2px;
  --elevation-sheet-spread: 0px;
  --icon-belt-rise: 3;
  --icon-belt-run: 4;
  --icon-duotone-opacity: 0.24;
  --icon-duotone-opacity-dark: 0.2;
  --icon-duotone-opacity-light: 0.24;
  --icon-grid: 24px;
  --icon-grid-step: 0.25;
  --icon-keyline-circle-radius: 9px;
  --icon-keyline-square-side: 17px;
  --icon-live-area: 20px;
  --icon-radius: 2px;
  --icon-stroke-width: 1.5px;
  --motion-bounce: 0;
  --motion-damping-ratio: 1;
  --motion-duration-base: 200ms;
  --motion-duration-fast: 120ms;
  --motion-duration-instant: 80ms;
  --motion-duration-slow: 360ms;
  --motion-hero-duration: 550ms;
  --motion-hero-stiffness: 130;
  --motion-micro-duration: 200ms;
  --motion-micro-stiffness: 990;
  --motion-stagger: 60;
  --motion-transition-duration: 350ms;
  --motion-transition-stiffness: 320;
  --typography-display-lg-font-family: var(--typography-fontfamily-display), system-ui, sans-serif;
  --typography-display-lg-font-size: 40px;
  --typography-display-lg-font-weight: 700;
  --typography-display-lg-line-height: 1;
  --typography-display-lg-letter-spacing: -0.025em;
  --typography-display-lg-text-transform: none;
  --typography-display-md-font-family: var(--typography-fontfamily-display), system-ui, sans-serif;
  --typography-display-md-font-size: 30px;
  --typography-display-md-font-weight: 700;
  --typography-display-md-line-height: 1;
  --typography-display-md-letter-spacing: -0.02em;
  --typography-display-md-text-transform: none;
  --typography-title-lg-font-family: var(--typography-fontfamily-display), system-ui, sans-serif;
  --typography-title-lg-font-size: 24px;
  --typography-title-lg-font-weight: 600;
  --typography-title-lg-line-height: 1.15;
  --typography-title-lg-letter-spacing: -0.012em;
  --typography-title-lg-text-transform: none;
  --typography-title-md-font-family: var(--typography-fontfamily-display), system-ui, sans-serif;
  --typography-title-md-font-size: 20px;
  --typography-title-md-font-weight: 600;
  --typography-title-md-line-height: 1.15;
  --typography-title-md-letter-spacing: -0.006em;
  --typography-title-md-text-transform: none;
  --typography-title-sm-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-title-sm-font-size: 16px;
  --typography-title-sm-font-weight: 600;
  --typography-title-sm-line-height: 1.35;
  --typography-title-sm-letter-spacing: 0em;
  --typography-title-sm-text-transform: none;
  --typography-body-lg-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-body-lg-font-size: 18px;
  --typography-body-lg-font-weight: 400;
  --typography-body-lg-line-height: 1.55;
  --typography-body-lg-letter-spacing: 0em;
  --typography-body-lg-text-transform: none;
  --typography-body-md-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-body-md-font-size: 16px;
  --typography-body-md-font-weight: 400;
  --typography-body-md-line-height: 1.35;
  --typography-body-md-letter-spacing: 0em;
  --typography-body-md-text-transform: none;
  --typography-body-sm-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-body-sm-font-size: 14px;
  --typography-body-sm-font-weight: 400;
  --typography-body-sm-line-height: 1.35;
  --typography-body-sm-letter-spacing: 0em;
  --typography-body-sm-text-transform: none;
  --typography-label-md-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-label-md-font-size: 16px;
  --typography-label-md-font-weight: 500;
  --typography-label-md-line-height: 1.35;
  --typography-label-md-letter-spacing: 0em;
  --typography-label-md-text-transform: none;
  --typography-label-sm-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-label-sm-font-size: 14px;
  --typography-label-sm-font-weight: 500;
  --typography-label-sm-line-height: 1.35;
  --typography-label-sm-letter-spacing: 0em;
  --typography-label-sm-text-transform: none;
  --typography-label-xs-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-label-xs-font-size: 12px;
  --typography-label-xs-font-weight: 500;
  --typography-label-xs-line-height: 1.35;
  --typography-label-xs-letter-spacing: 0.14em;
  --typography-label-xs-text-transform: uppercase;
  --size-window-compact: 390px;
  --size-window-medium: 768px;
  --size-window-expanded: 1440px;
  --size-window-large: 1280px;
  --opacity-disabled: 0.5;
  --size-launcher: 60px;
  --elevation-overlay-blur: 32px;
  --elevation-overlay-offset-y: 8px;
  --elevation-overlay-spread: 0px;
  --layout-overlay-narrow: 400px;
  --layout-overlay-wide: 640px;
  --layout-tooltip-max: 280px;
  --typography-code-md-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-code-md-font-size: 16px;
  --typography-code-md-font-weight: 400;
  --typography-code-md-line-height: 1.35;
  --typography-code-md-letter-spacing: 0em;
  --typography-code-md-text-transform: none;
  --typography-code-lg-font-family: var(--typography-fontfamily-body), system-ui, sans-serif;
  --typography-code-lg-font-size: 24px;
  --typography-code-lg-font-weight: 600;
  --typography-code-lg-line-height: 1;
  --typography-code-lg-letter-spacing: 0em;
  --typography-code-lg-text-transform: none;
  /* platform/mobile */
  --layout-screen-margin: 16px;
  --layout-touch-comfort: 48px;
  --layout-touch-min: 44px;
  --density: 0;
  --size-control-sm: 30px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-field-md: 48px;
  --size-target: 44px;
  /* docs */
  --docs-sheet-wide: 1600px;
  /* mode/light (por defecto) */
  /* mode/light */
  --color-accent-ink: #8A5A10;
  --color-accent-mark: #B26A00;
  --color-accent-on: #2A1D06;
  --color-accent-solid: #FFB23E;
  --color-bg-chrome: #E8E5F3;
  --color-bg-chrome-selected: #DED2FB;
  --color-bg-float: #EBE7F6;
  --color-bg-overlay: #1A16338C;
  --color-bg-page: #F1EFF8;
  --color-bg-pressed: #0B0E1A24;
  --color-bg-raised: #E9E6F4;
  --color-bg-selected: #DCCFFF;
  --color-bg-surface: #FBFAFF;
  --color-border-default: #0B0E1A29;
  --color-border-strong: #0B0E1A42;
  --color-border-subtle: #0B0E1A1A;
  --color-brand-border: #D3C1FF;
  --color-brand-hover: #8B4EFA;
  --color-brand-ink: #5B27C4;
  --color-brand-on: #FFFFFF;
  --color-brand-pressed: #7434E6;
  --color-brand-soft: #EFE7FF;
  --color-brand-solid: #803EFA;
  --color-canal-instagram: #E1306C;
  --color-canal-messenger: #006AFF;
  --color-canal-nebula: #803EFA;
  --color-canal-telegram: #229ED9;
  --color-canal-whatsapp: #128C7E;
  --color-error-border: #F5C4C7;
  --color-error-ink: #B4272C;
  --color-error-mark: #D92D33;
  --color-error-on: #FFFFFF;
  --color-error-soft: #FDE7E9;
  --color-error-solid: #D92D33;
  --color-focus-ring: #803EFA;
  --color-info-border: #B9E4F7;
  --color-info-ink: #0F5B7E;
  --color-info-mark: #1F80B3;
  --color-info-soft: #E2F4FD;
  --color-iso-belt: #B26A00;
  --color-iso-mintaka: #803EFA;
  --color-media-fill: #1A1633A3;
  --color-media-on: #FFFFFF;
  --color-success-border: #BCE9D2;
  --color-success-ink: #12764A;
  --color-success-mark: #1B8B51;
  --color-success-soft: #E3F7ED;
  --color-text-disabled: #A8A3BD;
  --color-text-link: #6A2BD6;
  --color-text-primary: #1A1633;
  --color-text-secondary: #55506E;
  --color-text-tertiary: #625D80;
  --color-tone-brown: #8A5A3C;
  --color-tone-celeste: #1F80B3;
  --color-tone-coral: #D9503A;
  --color-tone-green: #1F9D5C;
  --color-tone-indigo: #4451C9;
  --color-tone-lime: #5D8B16;
  --color-tone-magenta: #D63384;
  --color-tone-neutral: #5B6178;
  --color-tone-on: #FFFFFF;
  --color-tone-teal: #0A7268;
  --color-tone-violet: #6A2BD6;
  --elevation-sheet-color: #1016221F;
  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-tertiary: var(--color-text-tertiary);
  --color-icon-disabled: var(--color-text-disabled);
  --color-icon-brand: var(--color-brand-solid);
  --color-icon-on-brand: var(--color-brand-on);
  --color-icon-on-tone: var(--color-tone-on);
  --color-icon-accent: var(--color-accent-mark);
  --color-icon-error: var(--color-error-mark);
  --color-icon-success: var(--color-success-mark);
  --color-icon-info: var(--color-info-mark);
  --icon-duotone-opacity: var(--icon-duotone-opacity-light);
  --color-bg-hover: #0B0E1A0D;
  --elevation-overlay-color: #10162229;
  --color-error-hover: #C8292F;
  --color-error-pressed: #B4272C;
  --shadow-elevation-sheet: 0 var(--elevation-sheet-offset-y) var(--elevation-sheet-blur) var(--elevation-sheet-spread) var(--elevation-sheet-color);
  --shadow-elevation-overlay: 0 var(--elevation-overlay-offset-y) var(--elevation-overlay-blur) var(--elevation-overlay-spread) var(--elevation-overlay-color);
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* mode/dark */
  --color-accent-ink: #FFB23E;
  --color-accent-mark: #FFB23E;
  --color-accent-on: #2A1D06;
  --color-accent-solid: #FFB23E;
  --color-bg-chrome: #141A2E;
  --color-bg-chrome-selected: #241A40;
  --color-bg-float: #272E4C;
  --color-bg-overlay: #0508108C;
  --color-bg-page: #0B0E1A;
  --color-bg-pressed: #FFFFFF24;
  --color-bg-raised: #1C2238;
  --color-bg-selected: #241A40;
  --color-bg-surface: #141A2E;
  --color-border-default: #FFFFFF24;
  --color-border-strong: #FFFFFF3D;
  --color-border-subtle: #FFFFFF14;
  --color-brand-border: #4A2E93;
  --color-brand-hover: #8B4EFA;
  --color-brand-ink: #C6ADFF;
  --color-brand-on: #FFFFFF;
  --color-brand-pressed: #8B4EFA;
  --color-brand-soft: #241A40;
  --color-brand-solid: #803EFA;
  --color-canal-instagram: #E1306C;
  --color-canal-messenger: #006AFF;
  --color-canal-nebula: #803EFA;
  --color-canal-telegram: #229ED9;
  --color-canal-whatsapp: #128C7E;
  --color-error-border: #6E2E33;
  --color-error-ink: #F7A2A6;
  --color-error-mark: #E5484D;
  --color-error-on: #FFFFFF;
  --color-error-soft: #301619;
  --color-error-solid: #D92D33;
  --color-focus-ring: #7BD1F6;
  --color-info-border: #2E5D74;
  --color-info-ink: #A9E1FA;
  --color-info-mark: #7BD1F6;
  --color-info-soft: #132C3A;
  --color-iso-belt: #803EFA;
  --color-iso-mintaka: #FFB23E;
  --color-media-fill: #1A1633A3;
  --color-media-on: #FFFFFF;
  --color-success-border: #245C43;
  --color-success-ink: #7FE0AE;
  --color-success-mark: #2FBF71;
  --color-success-soft: #12291F;
  --color-text-disabled: #565073;
  --color-text-link: #7BD1F6;
  --color-text-primary: #F4F2FA;
  --color-text-secondary: #A9A4C2;
  --color-text-tertiary: #9A93BD;
  --color-tone-brown: #C89F7A;
  --color-tone-celeste: #7BD1F6;
  --color-tone-coral: #FF7F6B;
  --color-tone-green: #2FBF71;
  --color-tone-indigo: #6B7BFF;
  --color-tone-lime: #A8E05F;
  --color-tone-magenta: #EF5DA8;
  --color-tone-neutral: #8B93B8;
  --color-tone-on: #0B0E1A;
  --color-tone-teal: #2DD4BF;
  --color-tone-violet: #803EFA;
  --elevation-sheet-color: #04060E66;
  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-tertiary: var(--color-text-tertiary);
  --color-icon-disabled: var(--color-text-disabled);
  --color-icon-brand: var(--color-brand-solid);
  --color-icon-on-brand: var(--color-brand-on);
  --color-icon-on-tone: var(--color-tone-on);
  --color-icon-accent: var(--color-accent-mark);
  --color-icon-error: var(--color-error-mark);
  --color-icon-success: var(--color-success-mark);
  --color-icon-info: var(--color-info-mark);
  --icon-duotone-opacity: var(--icon-duotone-opacity-dark);
  --color-bg-hover: #FFFFFF0F;
  --elevation-overlay-color: #04060E8A;
  --color-error-hover: #C8292F;
  --color-error-pressed: #B4272C;
  --shadow-elevation-sheet: 0 var(--elevation-sheet-offset-y) var(--elevation-sheet-blur) var(--elevation-sheet-spread) var(--elevation-sheet-color);
  --shadow-elevation-overlay: 0 var(--elevation-overlay-offset-y) var(--elevation-overlay-blur) var(--elevation-overlay-spread) var(--elevation-overlay-color);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* mode/dark */
    --color-accent-ink: #FFB23E;
    --color-accent-mark: #FFB23E;
    --color-accent-on: #2A1D06;
    --color-accent-solid: #FFB23E;
    --color-bg-chrome: #141A2E;
    --color-bg-chrome-selected: #241A40;
    --color-bg-float: #272E4C;
    --color-bg-overlay: #0508108C;
    --color-bg-page: #0B0E1A;
    --color-bg-pressed: #FFFFFF24;
    --color-bg-raised: #1C2238;
    --color-bg-selected: #241A40;
    --color-bg-surface: #141A2E;
    --color-border-default: #FFFFFF24;
    --color-border-strong: #FFFFFF3D;
    --color-border-subtle: #FFFFFF14;
    --color-brand-border: #4A2E93;
    --color-brand-hover: #8B4EFA;
    --color-brand-ink: #C6ADFF;
    --color-brand-on: #FFFFFF;
    --color-brand-pressed: #8B4EFA;
    --color-brand-soft: #241A40;
    --color-brand-solid: #803EFA;
    --color-canal-instagram: #E1306C;
    --color-canal-messenger: #006AFF;
    --color-canal-nebula: #803EFA;
    --color-canal-telegram: #229ED9;
    --color-canal-whatsapp: #128C7E;
    --color-error-border: #6E2E33;
    --color-error-ink: #F7A2A6;
    --color-error-mark: #E5484D;
    --color-error-on: #FFFFFF;
    --color-error-soft: #301619;
    --color-error-solid: #D92D33;
    --color-focus-ring: #7BD1F6;
    --color-info-border: #2E5D74;
    --color-info-ink: #A9E1FA;
    --color-info-mark: #7BD1F6;
    --color-info-soft: #132C3A;
    --color-iso-belt: #803EFA;
    --color-iso-mintaka: #FFB23E;
    --color-media-fill: #1A1633A3;
    --color-media-on: #FFFFFF;
    --color-success-border: #245C43;
    --color-success-ink: #7FE0AE;
    --color-success-mark: #2FBF71;
    --color-success-soft: #12291F;
    --color-text-disabled: #565073;
    --color-text-link: #7BD1F6;
    --color-text-primary: #F4F2FA;
    --color-text-secondary: #A9A4C2;
    --color-text-tertiary: #9A93BD;
    --color-tone-brown: #C89F7A;
    --color-tone-celeste: #7BD1F6;
    --color-tone-coral: #FF7F6B;
    --color-tone-green: #2FBF71;
    --color-tone-indigo: #6B7BFF;
    --color-tone-lime: #A8E05F;
    --color-tone-magenta: #EF5DA8;
    --color-tone-neutral: #8B93B8;
    --color-tone-on: #0B0E1A;
    --color-tone-teal: #2DD4BF;
    --color-tone-violet: #803EFA;
    --elevation-sheet-color: #04060E66;
    --color-icon-primary: var(--color-text-primary);
    --color-icon-secondary: var(--color-text-secondary);
    --color-icon-tertiary: var(--color-text-tertiary);
    --color-icon-disabled: var(--color-text-disabled);
    --color-icon-brand: var(--color-brand-solid);
    --color-icon-on-brand: var(--color-brand-on);
    --color-icon-on-tone: var(--color-tone-on);
    --color-icon-accent: var(--color-accent-mark);
    --color-icon-error: var(--color-error-mark);
    --color-icon-success: var(--color-success-mark);
    --color-icon-info: var(--color-info-mark);
    --icon-duotone-opacity: var(--icon-duotone-opacity-dark);
    --color-bg-hover: #FFFFFF0F;
    --elevation-overlay-color: #04060E8A;
    --color-error-hover: #C8292F;
    --color-error-pressed: #B4272C;
    --shadow-elevation-sheet: 0 var(--elevation-sheet-offset-y) var(--elevation-sheet-blur) var(--elevation-sheet-spread) var(--elevation-sheet-color);
    --shadow-elevation-overlay: 0 var(--elevation-overlay-offset-y) var(--elevation-overlay-blur) var(--elevation-overlay-spread) var(--elevation-overlay-color);
    color-scheme: dark;
  }
}

:root[data-platform="web"] {
  /* platform/web */
  --layout-screen-margin: 24px;
  --layout-touch-comfort: 32px;
  --layout-touch-min: 24px;
  --density: -1;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-field-md: 40px;
  --size-target: 32px;
  /* tipografía del perfil puntero (escala de Orion: 11/13/15/16/18/28) */
  --typography-label-xs-font-size: 11px;
  --typography-body-sm-font-size: 13px;
  --typography-body-md-font-size: 15px;
  --typography-body-md-line-height: 1.6;
  --typography-label-sm-font-size: 15px;
  --typography-label-md-font-size: 15px;
  --typography-title-sm-font-size: 15px;
  --typography-title-md-font-size: 18px;
  --typography-title-lg-font-size: 28px;
  --typography-title-lg-font-weight: 700;
}

:root[data-platform="desktop"] {
  /* platform/desktop: alias OBSOLETO del perfil puntero (web); mismos controles desde 2026-10-07 */
  --layout-screen-margin: 24px;
  --layout-touch-comfort: 32px;
  --layout-touch-min: 24px;
  --density: -2;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-field-md: 40px;
  --size-target: 32px;
  /* tipografía del perfil puntero (escala de Orion: 11/13/15/16/18/28) */
  --typography-label-xs-font-size: 11px;
  --typography-body-sm-font-size: 13px;
  --typography-body-md-font-size: 15px;
  --typography-body-md-line-height: 1.6;
  --typography-label-sm-font-size: 15px;
  --typography-label-md-font-size: 15px;
  --typography-title-sm-font-size: 15px;
  --typography-title-md-font-size: 18px;
  --typography-title-lg-font-size: 28px;
  --typography-title-lg-font-weight: 700;
}
/* Ventana compacta (≤640 px) en el perfil puntero: objetivos táctiles de 44 px (la web en el móvil se toca con el dedo). */
@media (max-width: 640px) {
  :root[data-platform="web"], :root[data-platform="desktop"] {
    --size-control-sm: 44px;
    --size-control-md: 44px;
    --size-control-lg: 48px;
    --size-field-md: 44px;
    --size-target: 44px;
    --layout-touch-comfort: 44px;
    --layout-touch-min: 44px;
    --layout-screen-margin: 16px;
  }
}

/* Alias al contrato compartido de Open Design (--bg, --fg, --accent…). Apuntan a los tokens de Nebula. */
:root {
  --bg: var(--color-bg-page);
  --surface: var(--color-bg-surface);
  --surface-warm: var(--color-bg-raised);
  --fg: var(--color-text-primary);
  --fg-2: var(--color-text-secondary);
  --muted: var(--color-text-tertiary);
  --meta: var(--color-text-secondary);
  --border: var(--color-border-default);
  --border-soft: var(--color-border-subtle);
  --accent: var(--color-brand-solid);
  --accent-on: var(--color-brand-on);
  --accent-hover: var(--color-brand-hover);
  --accent-active: var(--color-brand-pressed);
  --success: var(--color-success-mark);
  --warn: var(--color-accent-mark);
  --danger: var(--color-error-mark);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "Jost", system-ui, sans-serif; /* Nebula no tiene monoespaciada: el código va en Jost (typography.code.*) */
}