/* =========================================================
   OSG Life · Design System
   Identidad visual centralizada
   ========================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/fraunces-variable-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("./fonts/figtree-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root,
html[data-theme="light"] {
  color-scheme: light;

  /* ---------- Colores base ---------- */
  --osg-bg: #F6F3EE;
  --osg-surface: #FFFFFF;
  --osg-surface-soft: #F2EEE8;
  --osg-surface-hover: #ECE7DF;
  --osg-surface-glass: rgba(255, 255, 255, 0.90);

  --osg-surface-sidebar: #EFEAE2;
  --osg-surface-column: #FFFFFF;
  --osg-surface-card: #FFFFFF;
  --osg-surface-control: #FFFFFF;

  --osg-border-soft: #EBE5DA;
  --osg-border: #E2DACD;
  --osg-border-strong: #E2DACD;

  --osg-overlay: rgba(16, 24, 32, 0.68);
  --osg-overlay-soft: rgba(16, 24, 32, 0.16);

  --osg-text: #101820;
  --osg-text-nav: #2B3440;
  --osg-text-subtitle: #4A5460;
  --osg-text-secondary: #5B6673;
  --osg-text-label: #6B7480;

  /* ---------- Marca ---------- */
  --osg-accent: #FF6B4A;
  --osg-accent-hover: #E85A3A;
  --osg-accent-soft: #FFF0EB;
  --osg-accent-text: #C23A1E;
  --osg-accent-border: #E4C5C1;
  --osg-accent-contrast: #101820;
  --osg-focus-ring: rgba(255, 107, 74, 0.22);

  --osg-panel-dark: #101820;
  --osg-panel-dark-surface: #1B2733;
  --osg-panel-dark-hover: #24313E;
  --osg-panel-dark-border: #2E3B4A;
  --osg-panel-dark-text: #F2EEE8;
  --osg-panel-dark-muted: #A7B0BB;

  --osg-nav-active-bg: #101820;
  --osg-nav-active-text: #F2EEE8;

  /* ---------- Áreas de vida ---------- */
  --osg-area-home-strong: #3B82F6;
  --osg-area-home-soft: #E3EFFF;
  --osg-area-home-text: #1D5FC4;

  --osg-area-people-strong: #FF6B4A;
  --osg-area-people-soft: #FFE9E3;
  --osg-area-people-text: #B8381C;

  --osg-area-holism-strong: #E5487F;
  --osg-area-holism-soft: #FFE4EE;
  --osg-area-holism-text: #B02A5C;

  --osg-area-education-strong: #F5A623;
  --osg-area-education-soft: #FFF0D0;
  --osg-area-education-text: #8A5A00;

  --osg-area-technology-strong: #7C6CF0;
  --osg-area-technology-soft: #ECE9FF;
  --osg-area-technology-text: #5444C9;

  --osg-area-money-strong: #1FA37F;
  --osg-area-money-soft: #DDF5EC;
  --osg-area-money-text: #0F7A5C;

  --osg-area-files-strong: #0E9AB0;
  --osg-area-files-soft: #DDF3F7;
  --osg-area-files-text: #0A6577;

  /* Contraste de iconos sobre el color fuerte de cada área */
  --osg-area-home-icon: #FFFFFF;
  --osg-area-people-icon: #101820;
  --osg-area-holism-icon: #FFFFFF;
  --osg-area-education-icon: #101820;
  --osg-area-technology-icon: #FFFFFF;
  --osg-area-money-icon: #FFFFFF;
  --osg-area-files-icon: #FFFFFF;

  /* Tokens legados todavía consumidos por Mis archivos */
  --osg-health: #B9B3D9;
  --osg-finance: #7FD1C7;
  --osg-documents: #FFC76B;

  /* ---------- Tipografía ---------- */
  --osg-font-body: "Figtree", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --osg-font-heading: "Fraunces", Georgia, serif;
  --osg-font-data: "Figtree", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --osg-weight-regular: 400;
  --osg-weight-medium: 500;
  --osg-weight-semibold: 600;
  --osg-weight-bold: 700;

  --osg-text-xs: 12px;
  --osg-text-sm: 13px;
  --osg-text-button: 15px;
  --osg-text-md: 16px;
  --osg-text-lg: 20px;
  --osg-text-brand: 21px;
  --osg-text-xl: 28px;
  --osg-text-2xl: 36px;
  --osg-text-3xl: 40px;
  --osg-text-4xl: 56px;

  --osg-line-xs: 16px;
  --osg-line-sm: 20px;
  --osg-line-md: 24px;
  --osg-line-lg: 28px;
  --osg-line-xl: 36px;
  --osg-line-2xl: 48px;
  --osg-line-3xl: 48px;
  --osg-line-4xl: 64px;

  --osg-tracking-normal: 0;
  --osg-tracking-uppercase: .08em;
  --osg-tracking-wide: .11em;

  /* ---------- Forma ---------- */
  --osg-radius-sm: 10px;
  --osg-radius-md: 16px;
  --osg-radius-lg: 24px;

  /* ---------- Sombras ---------- */
  --osg-shadow-sm: 0 4px 16px rgba(16, 24, 32, 0.06);
  --osg-shadow-md: 0 12px 32px rgba(16, 24, 32, 0.09);
  --osg-shadow-lg: 0 24px 70px rgba(16, 24, 32, 0.12);

  /* ---------- Tokens semánticos de interfaz ---------- */

  /* Estructura general */
  --osg-ui-page-bg: var(--osg-bg);
  --osg-ui-sidebar-bg: var(--osg-surface-sidebar);
  --osg-ui-header-bg: var(--osg-surface);

  /* Superficies */
  --osg-ui-panel-bg: var(--osg-surface);
  --osg-ui-panel-soft-bg: var(--osg-surface-soft);
  --osg-ui-hover-bg: var(--osg-surface-hover);

  /* Texto y separación */
  --osg-ui-font-body: var(--osg-font-body);
  --osg-ui-font-heading: var(--osg-font-heading);
  --osg-ui-font-data: var(--osg-font-data);
  --osg-ui-weight-regular: var(--osg-weight-regular);
  --osg-ui-weight-medium: var(--osg-weight-medium);
  --osg-ui-weight-semibold: var(--osg-weight-semibold);
  --osg-ui-weight-bold: var(--osg-weight-bold);

  --osg-ui-type-label-xs-size: var(--osg-text-xs);
  --osg-ui-type-label-xs-line: var(--osg-line-xs);
  --osg-ui-type-label-size: var(--osg-text-sm);
  --osg-ui-type-label-line: var(--osg-line-sm);
  --osg-ui-type-body-size: var(--osg-text-md);
  --osg-ui-type-body-line: var(--osg-line-md);
  --osg-ui-type-button-size: var(--osg-text-button);
  --osg-ui-type-button-line: var(--osg-line-md);
  --osg-ui-type-name-size: var(--osg-text-button);
  --osg-ui-type-brand-size: var(--osg-text-brand);
  --osg-ui-type-section-sm-size: var(--osg-text-lg);
  --osg-ui-type-section-sm-line: var(--osg-line-lg);
  --osg-ui-type-section-size: var(--osg-text-2xl);
  --osg-ui-type-section-line: var(--osg-line-xl);
  --osg-ui-type-display-size: var(--osg-text-2xl);
  --osg-ui-type-display-line: var(--osg-line-2xl);

  /* Landing / comunicación de marca */
  --osg-ui-type-marketing-title-size: var(--osg-text-3xl);
  --osg-ui-type-marketing-title-line: var(--osg-line-3xl);
  --osg-ui-type-marketing-display-size: var(--osg-text-4xl);
  --osg-ui-type-marketing-display-line: var(--osg-line-4xl);

  --osg-ui-type-heading-tracking: var(--osg-tracking-normal);
  --osg-ui-type-data-tracking: var(--osg-tracking-normal);
  --osg-ui-type-context-tracking: var(--osg-tracking-uppercase);

  --osg-ui-text: var(--osg-text);
  --osg-ui-text-nav: var(--osg-text-nav);
  --osg-ui-text-subtitle: var(--osg-text-subtitle);
  --osg-ui-text-muted: var(--osg-text-secondary);
  --osg-ui-text-label: var(--osg-text-label);
  --osg-ui-border: var(--osg-border);
  --osg-ui-border-strong: var(--osg-border-strong);

  /* Controles */
  --osg-ui-control-bg: var(--osg-surface-control);
  --osg-ui-control-hover-bg: var(--osg-surface-hover);
  --osg-ui-control-border: var(--osg-border);
  --osg-ui-control-border-focus: var(--osg-accent);
  --osg-ui-control-accent: var(--osg-accent);

  /* Acciones iconográficas globales */
  --osg-ui-action-size: 34px;
  --osg-ui-action-icon-size: 16px;
  --osg-ui-action-radius: var(--osg-radius-sm);
  --osg-ui-action-icon-stroke: 1.8;

  --osg-ui-action-bg: var(--osg-ui-control-bg);
  --osg-ui-action-hover-bg: var(--osg-ui-control-hover-bg);
  --osg-ui-action-border: var(--osg-ui-control-border);
  --osg-ui-action-hover-border: var(--osg-ui-border-strong);
  --osg-ui-action-text: var(--osg-ui-text);
  --osg-ui-action-danger-text: var(--osg-ui-danger-text);
  --osg-ui-action-danger-border: var(--osg-ui-danger-border);

  /* Navegación */
  --osg-ui-nav-text: var(--osg-ui-text-nav);
  --osg-ui-nav-hover-bg: var(--osg-surface-hover);
  --osg-ui-nav-hover-text: var(--osg-text);
  --osg-ui-nav-active-bg: var(--osg-nav-active-bg);
  --osg-ui-nav-active-text: var(--osg-nav-active-text);
  --osg-ui-nav-overlay: var(--osg-overlay-soft);

  /* Panel destacado / hero interno */
  --osg-ui-feature-bg: var(--osg-panel-dark);
  --osg-ui-feature-surface: var(--osg-panel-dark-surface);
  --osg-ui-feature-border: var(--osg-panel-dark-border);
  --osg-ui-feature-hover-bg: var(--osg-panel-dark-hover);
  --osg-ui-feature-text: var(--osg-panel-dark-text);
  --osg-ui-feature-muted: var(--osg-panel-dark-muted);

  /* Acción principal */
  --osg-ui-primary-bg: var(--osg-accent);
  --osg-ui-primary-hover-bg: var(--osg-accent-hover);
  --osg-ui-primary-text: var(--osg-accent-contrast);

  /* Enlaces y foco */
  --osg-ui-link: var(--osg-accent-text);
  --osg-ui-focus-ring: var(--osg-focus-ring);

  /* Modal */
  --osg-ui-modal-bg: var(--osg-surface);
  --osg-ui-modal-shadow: var(--osg-shadow-lg);
  --osg-ui-backdrop: var(--osg-overlay);

  /* ---------- Separadores estructurales ---------- */

  /*
   * Permite controlar desde el Design System si el shell
   * muestra o no divisiones entre cabecera, contenido y pie.
   */
  --osg-ui-shell-divider: transparent;
  --osg-ui-shell-footer-text: var(--osg-ui-text-muted);

  /* ---------- Tokens semánticos de componentes ---------- */

  /*
   * Controles segmentados
   * Ej.: Círculos sociales / Mapa social, filtros y tabs.
   */
  --osg-ui-segment-bg: var(--osg-surface-soft);
  --osg-ui-segment-text: var(--osg-text-secondary);
  --osg-ui-segment-hover-bg: var(--osg-surface-hover);
  --osg-ui-segment-hover-text: var(--osg-text);
  --osg-ui-segment-active-bg: var(--osg-surface);
  --osg-ui-segment-active-text: var(--osg-text);

  /*
   * Lienzos y superficies especiales
   * Ej.: mapa social, cuota de archivos y áreas visuales amplias.
   */
  --osg-ui-canvas-bg: var(--osg-surface);
  --osg-ui-canvas-soft-bg: var(--osg-surface-soft);

  --osg-ui-canvas-gradient:
    radial-gradient(
      circle at center,
      var(--osg-surface) 0%,
      var(--osg-surface-soft) 100%
    );

  --osg-ui-highlight-gradient:
    linear-gradient(
      115deg,
      var(--osg-surface-soft),
      var(--osg-surface)
    );

  /*
   * Capas flotantes
   * Ej.: nombres, etiquetas, chips y elementos sobre un lienzo.
   */
  --osg-ui-floating-bg: var(--osg-surface-glass);
  --osg-ui-floating-text: var(--osg-text);
  --osg-ui-floating-muted: var(--osg-text-secondary);

  /* Estados neutros de interfaz */
  --osg-ui-status-bg: var(--osg-surface-soft);
  --osg-ui-status-text: var(--osg-text-secondary);

  --osg-ui-disabled-bg: var(--osg-surface-soft);
  --osg-ui-disabled-text: var(--osg-text-secondary);

  /* Progreso y estados vacíos */
  --osg-ui-progress-track: var(--osg-surface-hover);
  --osg-ui-progress-value: var(--osg-accent);
  --osg-ui-empty-icon: var(--osg-text-secondary);

  /* Relaciones y elementos gráficos */
  --osg-ui-map-line: var(--osg-border-strong);
  --osg-ui-map-line-emphasis: var(--osg-accent);
  --osg-ui-avatar-bg: var(--osg-surface-soft);
  --osg-ui-avatar-text: var(--osg-text);
  --osg-ui-avatar-ring: var(--osg-surface);
  --osg-ui-avatar-halo: var(--osg-focus-ring);

  /* Sombras semánticas */
  --osg-ui-shadow-sm: var(--osg-shadow-sm);
  --osg-ui-shadow-md: var(--osg-shadow-md);
  --osg-ui-shadow-lg: var(--osg-shadow-lg);

  /* ---------- Estados y archivos ---------- */

  /* Estados generales */
  --osg-ui-success-bg: var(--osg-surface-soft);
  --osg-ui-success-text: var(--osg-text);

  --osg-ui-toast-bg: var(--osg-panel-dark);
  --osg-ui-toast-text: var(--osg-panel-dark-text);
  --osg-ui-toast-shadow: var(--osg-shadow-md);
  --osg-ui-toast-error-bg: var(--osg-accent);
  --osg-ui-toast-error-text: var(--osg-accent-contrast);

  --osg-ui-danger-bg: var(--osg-accent-soft);
  --osg-ui-danger-text: var(--osg-accent-text);
  --osg-ui-danger-border: var(--osg-accent-border);

  /* ---------- Dinero ---------- */

  /*
   * Capa semántica del módulo financiero.
   * Los componentes de Dinero consumen estos aliases y no
   * dependen directamente de colores o decisiones de marca.
   */
  --osg-money-bg: var(--osg-ui-page-bg);
  --osg-money-text: var(--osg-ui-text);
  --osg-money-muted: var(--osg-ui-text-muted);
  --osg-money-border: var(--osg-ui-border);
  --osg-money-border-strong: var(--osg-ui-border-strong);

  --osg-money-surface: var(--osg-ui-panel-bg);
  --osg-money-surface-soft: var(--osg-ui-panel-soft-bg);
  --osg-money-hover: var(--osg-ui-hover-bg);

  --osg-money-control-bg: var(--osg-ui-control-bg);
  --osg-money-control-border: var(--osg-ui-control-border);

  --osg-money-tab-bg: transparent;
  --osg-money-tab-text: var(--osg-ui-text-muted);
  --osg-money-tab-active-bg: var(--osg-ui-segment-active-bg);
  --osg-money-tab-active-text: var(--osg-ui-segment-active-text);

  --osg-money-primary-bg: var(--osg-ui-primary-bg);
  --osg-money-primary-hover-bg: var(--osg-ui-primary-hover-bg);
  --osg-money-primary-text: var(--osg-ui-primary-text);

  /* Distribución visual de Deudas · precaución → riesgo */
  --osg-money-debt-chart-1: #F2C94C;
  --osg-money-debt-chart-2: #F59E0B;
  --osg-money-debt-chart-3: #F97316;
  --osg-money-debt-chart-4: #E4572E;
  --osg-money-debt-chart-5: #C9362B;
  --osg-money-debt-chart-6: #8F1D1D;

  /* Módulo Mis archivos */
  --osg-files-bg: var(--osg-ui-page-bg);
  --osg-files-text: var(--osg-ui-text);
  --osg-files-muted: var(--osg-ui-text-muted);
  --osg-files-border: var(--osg-ui-border);

  --osg-files-surface: var(--osg-ui-panel-bg);
  --osg-files-surface-soft: var(--osg-ui-panel-soft-bg);
  --osg-files-hover: var(--osg-ui-hover-bg);

  --osg-files-quota-bg: var(--osg-ui-highlight-gradient);

  --osg-files-primary-bg: var(--osg-ui-primary-bg);
  --osg-files-primary-hover-bg: var(--osg-ui-primary-hover-bg);
  --osg-files-primary-text: var(--osg-ui-primary-text);

  --osg-files-tab-bg: transparent;
  --osg-files-tab-text: var(--osg-ui-text-muted);
  --osg-files-tab-active-bg: var(--osg-ui-segment-active-bg);
  --osg-files-tab-active-text: var(--osg-ui-segment-active-text);

  --osg-files-progress-track: var(--osg-ui-progress-track);
  --osg-files-progress-value: var(--osg-ui-progress-value);

  --osg-files-empty-icon: var(--osg-ui-empty-icon);

  /* Tipos de contenido */
  --osg-files-photo-bg: var(--osg-surface-soft);
  --osg-files-photo-text: var(--osg-health);

  --osg-files-video-bg: var(--osg-surface-soft);
  --osg-files-video-text: var(--osg-finance);

  --osg-files-document-bg: var(--osg-surface-soft);
  --osg-files-document-text: var(--osg-documents);

  /* ---------- Personas ---------- */
  --osg-person-interaction-border: var(--osg-ui-border);

  /* ---------- Formulario de Personas ---------- */

  /* Introducción */
  --osg-person-form-intro-bg: var(--osg-ui-panel-soft-bg);
  --osg-person-form-intro-border: var(--osg-ui-border);
  --osg-person-form-intro-text: var(--osg-ui-text);
  --osg-person-form-intro-muted: var(--osg-ui-text-muted);

  /* Secciones */
  --osg-person-form-section-bg: var(--osg-ui-panel-bg);
  --osg-person-form-section-border: var(--osg-ui-border);
  --osg-person-form-heading: var(--osg-ui-text);
  --osg-person-form-muted: var(--osg-ui-text-muted);

  /* Etiquetas de estado */
  --osg-person-form-badge-bg: var(--osg-ui-status-bg);
  --osg-person-form-badge-text: var(--osg-ui-status-text);

  /* Campos deshabilitados */
  --osg-person-form-disabled-bg: var(--osg-ui-disabled-bg);
  --osg-person-form-disabled-border: var(--osg-ui-border);
  --osg-person-form-disabled-text: var(--osg-ui-disabled-text);

  /* Bloques secundarios */
  --osg-person-form-important-bg: var(--osg-ui-panel-soft-bg);
  --osg-person-form-more-bg: var(--osg-ui-panel-soft-bg);
  --osg-person-form-more-open-bg: var(--osg-ui-panel-bg);

  /* ---------- People CRM / Mapa social ---------- */

  /* Contenedor general */
  --osg-social-section-bg: var(--osg-ui-highlight-gradient);
  --osg-social-section-border: var(--osg-ui-border);
  --osg-social-section-shadow: var(--osg-ui-shadow-md);

  --osg-social-heading: var(--osg-ui-text);
  --osg-social-muted: var(--osg-ui-text-muted);

  /* Lienzo del mapa */
  --osg-social-map-bg: var(--osg-ui-canvas-gradient);
  --osg-social-map-border: var(--osg-ui-border);

  --osg-social-ring: var(--osg-ui-border);
  --osg-social-line: var(--osg-ui-map-line);
  --osg-social-line-emphasis: var(--osg-ui-map-line-emphasis);

  /* Origen geográfico de ciudad */
  --osg-social-city-origin-fill: var(--osg-social-line-emphasis);
  --osg-social-city-origin-stroke: var(--osg-surface);
  --osg-social-city-origin-shadow: var(--osg-ui-shadow-sm);

  /* Cercanía */
  --osg-social-close: var(--osg-text);
  --osg-social-medium: var(--osg-text-secondary);
  --osg-social-far: var(--osg-border-strong);

  /* Elementos flotantes */
  --osg-social-floating-bg: var(--osg-ui-floating-bg);
  --osg-social-floating-text: var(--osg-ui-floating-text);
  --osg-social-floating-muted: var(--osg-ui-floating-muted);
  --osg-social-floating-border: var(--osg-ui-border);

  /* Avatares y personas */
  --osg-social-avatar-ring: var(--osg-ui-avatar-ring);
  --osg-social-avatar-halo: var(--osg-ui-avatar-halo);

  --osg-social-star-bg: var(--osg-accent);
  --osg-social-star-text: var(--osg-accent-contrast);
  --osg-social-star-border: var(--osg-surface);
  --osg-social-person-star-icon: var(--osg-accent-text);

  /* Usuario */
  --osg-social-user-marker: var(--osg-accent);
  --osg-social-user-marker-ring: var(--osg-surface);
  --osg-social-user-label-bg: var(--osg-ui-floating-bg);
  --osg-social-user-label-text: var(--osg-accent-text);

  /* Controles y clusters */
  --osg-social-control-bg: var(--osg-ui-floating-bg);
  --osg-social-control-text: var(--osg-ui-text-muted);
  --osg-social-control-hover-bg: var(--osg-ui-hover-bg);

  --osg-social-control-active-bg: var(--osg-panel-dark);
  --osg-social-control-active-text: var(--osg-panel-dark-text);

  --osg-social-cluster-bg: var(--osg-panel-dark);
  --osg-social-cluster-text: var(--osg-panel-dark-text);
  --osg-social-cluster-border: var(--osg-surface);

  /* Círculos sociales */
  --osg-social-column-bg: var(--osg-surface-column);
  --osg-social-column-border: var(--osg-border-soft);
  --osg-social-column-head-bg: var(--osg-ui-panel-soft-bg);
  --osg-social-column-shadow: var(--osg-ui-shadow-md);

  --osg-social-count-bg: var(--osg-ui-status-bg);
  --osg-social-count-text: var(--osg-ui-text-label);

  /* Apariencia semántica del círculo social.
     Los valores base representan la opción predeterminada. */
  --osg-social-circle-head-bg: var(--osg-social-column-head-bg);
  --osg-social-circle-accent: var(--osg-border-strong);
  --osg-social-circle-text: var(--osg-social-heading);
  --osg-social-circle-count-bg: var(--osg-social-count-bg);
  --osg-social-circle-count-text: var(--osg-social-count-text);
  --osg-social-circle-avatar-bg: var(--osg-ui-avatar-bg);
  --osg-social-circle-avatar-text: var(--osg-ui-avatar-text);

  --osg-social-person-card-bg: var(--osg-surface-card);
  --osg-social-person-card-hover-bg: var(--osg-ui-hover-bg);
  --osg-social-person-card-border: var(--osg-border-soft);
  --osg-social-person-card-shadow: var(--osg-ui-shadow-sm);

  --osg-social-person-name: var(--osg-ui-text);
  --osg-social-person-meta: var(--osg-ui-text-muted);
  --osg-social-person-arrow: var(--osg-ui-text-muted);
  --osg-social-empty-text: var(--osg-ui-text-muted);

  /* Relaciones */
  --osg-social-relation-active: var(--osg-accent);
  --osg-social-relation-inactive: var(--osg-ui-text-muted);
  --osg-social-relation-inactive-opacity: .48;

  --osg-social-switch-bg: var(--osg-ui-panel-bg);
  --osg-social-switch-border: var(--osg-ui-border);
  --osg-social-switch-text: var(--osg-ui-text-muted);

  --osg-social-switch-track: var(--osg-border-strong);
  --osg-social-switch-track-active: var(--osg-accent);
  --osg-social-switch-thumb: var(--osg-surface);

  --osg-social-switch-state-active: var(--osg-accent-text);
  --osg-social-switch-state-inactive: var(--osg-ui-text-muted);

  /* ---------- Mapa mundial ---------- */

  /*
   * Apariencia del asset geográfico.
   * La geometría vive fuera del Design System.
   */
  --osg-social-world-water: transparent;
  --osg-social-world-land: var(--osg-surface-soft);
  --osg-social-world-border: var(--osg-border-strong);
}

/* ---------- Área de vida activa ---------- */

#app[data-area="inicio"] {
  --osg-ui-area-strong: var(--osg-area-home-strong);
  --osg-ui-area-soft: var(--osg-area-home-soft);
  --osg-ui-area-text: var(--osg-area-home-text);
}

#app[data-area="personas"] {
  --osg-ui-area-strong: var(--osg-area-people-strong);
  --osg-ui-area-soft: var(--osg-area-people-soft);
  --osg-ui-area-text: var(--osg-area-people-text);
}

#app[data-area="holismo"] {
  --osg-ui-area-strong: var(--osg-area-holism-strong);
  --osg-ui-area-soft: var(--osg-area-holism-soft);
  --osg-ui-area-text: var(--osg-area-holism-text);
}

#app[data-area="educacion"] {
  --osg-ui-area-strong: var(--osg-area-education-strong);
  --osg-ui-area-soft: var(--osg-area-education-soft);
  --osg-ui-area-text: var(--osg-area-education-text);
}

#app[data-area="tecnologia"] {
  --osg-ui-area-strong: var(--osg-area-technology-strong);
  --osg-ui-area-soft: var(--osg-area-technology-soft);
  --osg-ui-area-text: var(--osg-area-technology-text);
}

#app[data-area="dinero"] {
  --osg-ui-area-strong: var(--osg-area-money-strong);
  --osg-ui-area-soft: var(--osg-area-money-soft);
  --osg-ui-area-text: var(--osg-area-money-text);
}

#app[data-area="archivos"] {
  --osg-ui-area-strong: var(--osg-area-files-strong);
  --osg-ui-area-soft: var(--osg-area-files-soft);
  --osg-ui-area-text: var(--osg-area-files-text);
}

/* ---------- Iconos de navegación por área ---------- */

#nav a[href="#inicio"] {
  --osg-ui-nav-icon-bg: var(--osg-area-home-strong);
  --osg-ui-nav-icon-text: var(--osg-area-home-icon);
}

#nav a[href="#personas"] {
  --osg-ui-nav-icon-bg: var(--osg-area-people-strong);
  --osg-ui-nav-icon-text: var(--osg-area-people-icon);
}

#nav a[href="#holismo"] {
  --osg-ui-nav-icon-bg: var(--osg-area-holism-strong);
  --osg-ui-nav-icon-text: var(--osg-area-holism-icon);
}

#nav a[href="#educacion"] {
  --osg-ui-nav-icon-bg: var(--osg-area-education-strong);
  --osg-ui-nav-icon-text: var(--osg-area-education-icon);
}

#nav a[href="#tecnologia"] {
  --osg-ui-nav-icon-bg: var(--osg-area-technology-strong);
  --osg-ui-nav-icon-text: var(--osg-area-technology-icon);
}

#nav a[href="#dinero"] {
  --osg-ui-nav-icon-bg: var(--osg-area-money-strong);
  --osg-ui-nav-icon-text: var(--osg-area-money-icon);
}

#nav a[href="#archivos"] {
  --osg-ui-nav-icon-bg: var(--osg-area-files-strong);
  --osg-ui-nav-icon-text: var(--osg-area-files-icon);
}

/* ---------- Paleta semántica de círculos sociales ---------- */

/* Predeterminado: conserva la apariencia neutral del Design System. */
[data-circle-color="default"] {
  --osg-social-circle-head-bg: var(--osg-social-column-head-bg);
  --osg-social-circle-accent: var(--osg-border-strong);
  --osg-social-circle-text: var(--osg-social-heading);
  --osg-social-circle-count-bg: var(--osg-social-count-bg);
  --osg-social-circle-count-text: var(--osg-social-count-text);
  --osg-social-circle-avatar-bg: var(--osg-ui-avatar-bg);
  --osg-social-circle-avatar-text: var(--osg-ui-avatar-text);
}

/* Azul */
[data-circle-color="blue"] {
  --osg-social-circle-head-bg: var(--osg-area-home-soft);
  --osg-social-circle-accent: var(--osg-area-home-strong);
  --osg-social-circle-text: var(--osg-area-home-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-home-text);
  --osg-social-circle-avatar-bg: var(--osg-area-home-soft);
  --osg-social-circle-avatar-text: var(--osg-area-home-text);
}

/* Lila */
[data-circle-color="lilac"] {
  --osg-social-circle-head-bg: var(--osg-area-technology-soft);
  --osg-social-circle-accent: var(--osg-area-technology-strong);
  --osg-social-circle-text: var(--osg-area-technology-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-technology-text);
  --osg-social-circle-avatar-bg: var(--osg-area-technology-soft);
  --osg-social-circle-avatar-text: var(--osg-area-technology-text);
}

/* Ámbar */
[data-circle-color="amber"] {
  --osg-social-circle-head-bg: var(--osg-area-education-soft);
  --osg-social-circle-accent: var(--osg-area-education-strong);
  --osg-social-circle-text: var(--osg-area-education-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-education-text);
  --osg-social-circle-avatar-bg: var(--osg-area-education-soft);
  --osg-social-circle-avatar-text: var(--osg-area-education-text);
}

/* Rosa */
[data-circle-color="rose"] {
  --osg-social-circle-head-bg: var(--osg-area-holism-soft);
  --osg-social-circle-accent: var(--osg-area-holism-strong);
  --osg-social-circle-text: var(--osg-area-holism-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-holism-text);
  --osg-social-circle-avatar-bg: var(--osg-area-holism-soft);
  --osg-social-circle-avatar-text: var(--osg-area-holism-text);
}

/* Menta */
[data-circle-color="mint"] {
  --osg-social-circle-head-bg: var(--osg-area-money-soft);
  --osg-social-circle-accent: var(--osg-area-money-strong);
  --osg-social-circle-text: var(--osg-area-money-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-money-text);
  --osg-social-circle-avatar-bg: var(--osg-area-money-soft);
  --osg-social-circle-avatar-text: var(--osg-area-money-text);
}

/* Coral */
[data-circle-color="coral"] {
  --osg-social-circle-head-bg: var(--osg-area-people-soft);
  --osg-social-circle-accent: var(--osg-area-people-strong);
  --osg-social-circle-text: var(--osg-area-people-text);
  --osg-social-circle-count-bg: var(--osg-surface);
  --osg-social-circle-count-text: var(--osg-area-people-text);
  --osg-social-circle-avatar-bg: var(--osg-area-people-soft);
  --osg-social-circle-avatar-text: var(--osg-area-people-text);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- Colores base ---------- */
  --osg-bg: #101820;
  --osg-surface: #1B2733;
  --osg-surface-soft: #24313E;
  --osg-surface-hover: #2A3948;
  --osg-surface-glass: rgba(27, 39, 51, 0.90);

  --osg-surface-sidebar: #0B1218;
  --osg-surface-column: #17212B;
  --osg-surface-card: #1F2C39;
  --osg-surface-control: #1B2733;

  --osg-border-soft: #243140;
  --osg-border: #2A3846;
  --osg-border-strong: #2E3B4A;

  --osg-overlay: rgba(0, 0, 0, 0.72);
  --osg-overlay-soft: rgba(0, 0, 0, 0.16);

  --osg-text: #F2EEE8;
  --osg-text-nav: #A7B0BB;
  --osg-text-subtitle: #A7B0BB;
  --osg-text-secondary: #A7B0BB;
  --osg-text-label: #8793A0;

  /* ---------- Marca ---------- */
  --osg-accent: #FF6B4A;
  --osg-accent-hover: #FF8268;
  --osg-accent-soft: rgba(255, 107, 74, 0.14);
  --osg-accent-text: #FF6B4A;
  --osg-accent-border: rgba(255, 107, 74, 0.38);
  --osg-accent-contrast: #101820;
  --osg-focus-ring: rgba(255, 107, 74, 0.28);

  --osg-panel-dark: #101820;
  --osg-panel-dark-surface: #1B2733;
  --osg-panel-dark-hover: #24313E;
  --osg-panel-dark-border: #2E3B4A;
  --osg-panel-dark-text: #F2EEE8;
  --osg-panel-dark-muted: #A7B0BB;

  --osg-nav-active-bg: #F2EEE8;
  --osg-nav-active-text: #101820;

  /* ---------- Áreas de vida ---------- */
  --osg-area-home-strong: #3B82F6;
  --osg-area-home-soft: rgba(59, 130, 246, 0.18);
  --osg-area-home-text: #8DB8FF;

  --osg-area-people-strong: #FF6B4A;
  --osg-area-people-soft: rgba(255, 107, 74, 0.18);
  --osg-area-people-text: #FF9B82;

  --osg-area-holism-strong: #E5487F;
  --osg-area-holism-soft: rgba(229, 72, 127, 0.20);
  --osg-area-holism-text: #FF8DB4;

  --osg-area-education-strong: #F5A623;
  --osg-area-education-soft: rgba(245, 166, 35, 0.18);
  --osg-area-education-text: #FFC567;

  --osg-area-technology-strong: #7C6CF0;
  --osg-area-technology-soft: rgba(124, 108, 240, 0.20);
  --osg-area-technology-text: #B3A8FF;

  --osg-area-money-strong: #1FA37F;
  --osg-area-money-soft: rgba(31, 163, 127, 0.20);
  --osg-area-money-text: #5FD6B2;

  --osg-area-files-strong: #0E9AB0;
  --osg-area-files-soft: rgba(14, 154, 176, 0.20);
  --osg-area-files-text: #5CCFE0;
  --osg-area-files-avatar-bg: rgba(14, 154, 176, 0.24);
  --osg-area-files-avatar-text: #5CCFE0;

  /* Tokens legados todavía consumidos por Mis archivos */
  --osg-health: #B9B3D9;
  --osg-finance: #7FD1C7;
  --osg-documents: #FFC76B;

  /* ---------- Sombras ---------- */
  --osg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.18);
  --osg-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.24);
  --osg-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.32);
}

/* ---------- Acciones iconográficas · responsive ---------- */

@media(max-width:700px) {
  :root {
    --osg-ui-action-size: 36px;
    --osg-ui-action-icon-size: 17px;
  }
}