@property --hg-angle { syntax: ''; inherits: true; initial-value: 0deg; } @property --hg-glow-opacity { syntax: ''; inherits: true; initial-value: 0; } :root { /* ======================================================================= 1. DISEÑO DE MAQUETACIÓN (Layouts) ======================================================================= */ /* --- HGS:LAYOUTS:START --- */ --hg-layout-max: 80rem; --hg-layout-narrow: 45rem; --hg-layout-wide: 95rem; --hg-layout-full: 100%; /* --- HGS:LAYOUTS:END --- */ /* ======================================================================= 2. DISTANCIAS Y ESPACIADO (HG Spacing) ======================================================================= */ /* --- HGS:SPACING:START --- */ --hg-spacing-50: 0.125rem; --hg-spacing-100: 0.25rem; --hg-spacing-150: 0.375rem; --hg-spacing-200: 0.5rem; --hg-spacing-300: 0.75rem; --hg-spacing-400: 1rem; --hg-spacing-500: 1.5rem; --hg-spacing-600: clamp(2rem, 1.5rem + 1vw, 2.5rem); --hg-spacing-700: clamp(3rem, 2.5rem + 2vw, 4rem); --hg-spacing-800: clamp(4rem, 3rem + 3vw, 6rem); --hg-spacing-900: clamp(6rem, 4rem + 5vw, 8rem); --hg-gap-icon: var(--hg-spacing-200); --hg-gap-item: var(--hg-spacing-300); --hg-gap-card: var(--hg-spacing-500); --hg-padding-section: var(--hg-spacing-900); --hg-padding-layout: clamp(1rem, 3vw, 2rem); /* --- HGS:SPACING:END --- */ /* ======================================================================= 3. TIPOGRAFÍA Y FUENTES (HG Fonts) ======================================================================= */ /* --- HGS:FONTS:START --- */ --hg-font-family-body: "Nunito", sans-serif; --hg-font-family-heading: "sarun-pro-narrow", sans-serif; --hg-font-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.8125rem); --hg-font-s: clamp(0.875rem, 0.85rem + 0.25vw, 0.9375rem); --hg-font-m: clamp(1rem, 0.96rem + 0.35vw, 1.125rem); --hg-font-l: clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem); --hg-font-xl: clamp(1.75rem, 1.60rem + 1.20vw, 2.25rem); --hg-font-2xl: clamp(2.50rem, 2.20rem + 2.00vw, 3.50rem); /* --- HGS:FONTS:END --- */ /* ======================================================================= 4. COLORES DEL TEMA CLARO (HG Colors - Light Mode) ======================================================================= */ /* --- HGS:COLORS:LIGHT:START --- */ --p-brand-l: 0.59; --p-brand-c: 0.17; --p-brand-h: 149; --p-accent-l: 0.64; --p-accent-c: 0.25; --p-accent-h: 28; --p-paper-l: 0.98; --p-ink-l: 0.15; --hg-brand: oklch(var(--p-brand-l) var(--p-brand-c) var(--p-brand-h)); --hg-brand-soft: oklch(0.96 0.018 var(--p-brand-h)); --hg-accent: oklch(var(--p-accent-l) var(--p-accent-c) var(--p-accent-h)); --hg-accent-soft: oklch(0.96 0.016 var(--p-accent-h)); --hg-text-main: oklch(var(--p-ink-l) 0 0); --hg-text-muted: oklch(0.55 0 0); --hg-text-inv: oklch(1.0 0 0); --hg-brand-on: var(--hg-text-inv); --hg-brand-soft-on: oklch(0.13 0.02 190); --hg-accent-on: var(--hg-text-inv); --hg-accent-soft-on: oklch(0.62 0.16 152); --hg-canvas: oklch(var(--p-paper-l) 0 0); --hg-surface: oklch(0.94 0 0); --hg-surface-alt: color-mix(in oklch, var(--hg-surface), black 3%); --hg-border: oklch(0.92 0.005 var(--p-brand-h)); --hg-border-focus: 2px solid var(--hg-brand); --hg-action-hover: color-mix(in oklch, currentColor, black 10%); --hg-surface-muted: oklch(0.96 0.004 var(--p-brand-h)); /* inputs, chips, soft backgrounds */ /* --- HGS:COLORS:LIGHT:END --- */ /* ======================================================================= 5. BORDES, SOMBRAS Y MOVIMIENTO (HG Effects) ======================================================================= */ --hg-radius-xs: 0.125rem; --hg-radius-s: 0.375rem; --hg-radius-m: 0.75rem; --hg-radius-l: 1rem; --hg-radius-pill: 9999px; --hg-radius-brand: var(--hg-radius-m); --hg-radius-none: 0; --hg-motion-snappy: cubic-bezier(0.25, 1, 0.5, 1); --hg-duration-fast: 200ms; --hg-duration-flow: 400ms; --hg-shadow-ink: oklch(0.2 0.05 var(--p-brand-h) / 0.1); --hg-glass-edge: inset 0 1px 0 0 rgba(255, 255, 255, 0.5); --hg-depth-idle: 0 1px 2px var(--hg-shadow-ink), var(--hg-glass-edge); --hg-depth-hover: 0 4px 12px var(--hg-shadow-ink), 0 2px 4px var(--hg-shadow-ink), var(--hg-glass-edge); --hg-depth-overlay: 0 12px 24px -4px var(--hg-shadow-ink), 0 0 0 1px var(--hg-border); --hg-motion-composite: transform var(--hg-duration-fast) var(--hg-motion-snappy), box-shadow var(--hg-duration-fast) var(--hg-motion-snappy), filter var(--hg-duration-fast) var(--hg-motion-snappy); /* ======================================================================= 6. ALIAS BRIDGES DE COMPATIBILIDAD ======================================================================= */ --a-layout-max: var(--hg-layout-max); --a-layout-narrow: var(--hg-layout-narrow); --a-layout-wide: var(--hg-layout-wide); --a-layout-full: var(--hg-layout-full); --a-spacing-50: var(--hg-spacing-50); --a-spacing-100: var(--hg-spacing-100); --a-spacing-150: var(--hg-spacing-150); --a-spacing-200: var(--hg-spacing-200); --a-spacing-300: var(--hg-spacing-300); --a-spacing-400: var(--hg-spacing-400); --a-spacing-500: var(--hg-spacing-500); --a-spacing-600: var(--hg-spacing-600); --a-spacing-700: var(--hg-spacing-700); --a-spacing-800: var(--hg-spacing-800); --a-spacing-900: var(--hg-spacing-900); --a-gap-icon: var(--hg-gap-icon); --a-gap-item: var(--hg-gap-item); --a-gap-card: var(--hg-gap-card); --a-padding-section: var(--hg-padding-section); --a-padding-layout: var(--hg-padding-layout); --a-font-family-body: var(--hg-font-family-body); --a-font-family-heading: var(--hg-font-family-heading); --a-font-xs: var(--hg-font-xs); --a-font-s: var(--hg-font-s); --a-font-m: var(--hg-font-m); --a-font-l: var(--hg-font-l); --a-font-xl: var(--hg-font-xl); --a-font-2xl: var(--hg-font-2xl); --a-brand: var(--hg-brand); --a-brand-soft: var(--hg-brand-soft); --a-accent: var(--hg-accent); --a-accent-soft: var(--hg-accent-soft); --a-text-main: var(--hg-text-main); --a-text-muted: var(--hg-text-muted); --a-text-inv: var(--hg-text-inv); --a-brand-on: var(--hg-brand-on); --a-brand-soft-on: var(--hg-brand-soft-on); --a-accent-on: var(--hg-accent-on); --a-accent-soft-on: var(--hg-accent-soft-on); --a-canvas: var(--hg-canvas); --a-surface: var(--hg-surface); --a-surface-alt: var(--hg-surface-alt); --a-border: var(--hg-border); --a-border-focus: var(--hg-border-focus); --a-action-hover: var(--hg-action-hover); --a-surface-muted: var(--hg-surface-muted); --a-radius-xs: var(--hg-radius-xs); --a-radius-s: var(--hg-radius-s); --a-radius-m: var(--hg-radius-m); --a-radius-l: var(--hg-radius-l); --a-radius-pill: var(--hg-radius-pill); --a-radius-brand: var(--hg-radius-brand); --a-radius-none: var(--hg-radius-none); --a-motion-snappy: var(--hg-motion-snappy); --a-duration-fast: var(--hg-duration-fast); --a-duration-flow: var(--hg-duration-flow); --a-shadow-ink: var(--hg-shadow-ink); --a-glass-edge: var(--hg-glass-edge); --a-depth-idle: var(--hg-depth-idle); --a-depth-hover: var(--hg-depth-hover); --a-depth-overlay: var(--hg-depth-overlay); --a-motion-composite: var(--hg-motion-composite); --a-container: var(--hg-layout-max); --a-sect-pad-x: var(--hg-padding-layout); --a-sect-pad-y: var(--hg-padding-section); --a-text: var(--hg-text-main); --a-heading: var(--hg-text-main); --a-rad-card: var(--hg-radius-m); --a-rad-btn: var(--hg-radius-s); --a-rad-l: var(--hg-radius-l); --a-shadow-s: var(--hg-depth-idle); --a-shadow-m: var(--hg-depth-hover); --a-brand-contrast: var(--hg-brand-on); --a-accent-contrast: var(--hg-accent-on); --a-surface-card: var(--hg-surface); --a-semantic-colors-border-strong: var(--hg-border); --a-raw-palette-neutral-200: var(--hg-border); --a-raw-palette-neutral-300: oklch(0.92 0 0); --a-raw-palette-neutral-500: var(--hg-text-muted); --a-raw-radius-pill: var(--hg-radius-pill); --a-raw-motion-duration-normal: var(--hg-duration-fast); --a-raw-motion-ease-out: var(--hg-motion-snappy); --a-raw-motion-duration-slow: var(--hg-duration-flow); --a-gap-s: var(--hg-spacing-300); --a-gap-m: var(--hg-spacing-500); --a-gap-l: var(--hg-spacing-600); --a-raw-spacing-xs: var(--hg-spacing-200); --a-raw-spacing-xl: var(--hg-spacing-800); --a-semantic-typography-label-btn-font-size: var(--hg-font-s); --a-semantic-typography-headline-md-font-size: var(--hg-font-xl); --a-semantic-typography-body-base-font-size: var(--hg-font-m); --a-semantic-typography-body-base-line-height: 1.5; --a-raw-font_family-sans: var(--hg-font-family-body); --a-semantic-typography-headline-lg-font-family: var(--hg-font-family-heading); --a-semantic-typography-headline-lg-font-size: var(--hg-font-2xl); --a-semantic-typography-headline-lg-font-weight: 600; --a-semantic-typography-headline-lg-line-height: 1.2; --a-semantic-typography-headline-md-font-family: var(--hg-font-family-heading); --a-semantic-typography-headline-md-font-weight: 600; --a-semantic-typography-headline-md-line-height: 1.2; --a-semantic-colors-action-hover: var(--hg-action-hover); --a-semantic-colors-border-focus: var(--hg-brand); --a-z-base: 1; --a-z-sticky: 100; --a-z-overlay: 200; --a-z-modal: 300; --a-z-toast: 500; } /* ======================================================================= 7. COLORES DEL TEMA OSCURO (HG Colors - Dark Mode / Black Theme) ======================================================================= */ [data-theme="dark"] { /* --- HGS:COLORS:DARK:START --- */ --p-paper-l: 0.10; --p-ink-l: 0.95; --p-brand-l: 0.70; --p-brand-c: 0.15; /* Surface scale — dark */ --hg-canvas: oklch(0.10 0.005 var(--p-brand-h)); --hg-surface: oklch(0.14 0.005 var(--p-brand-h)); --hg-surface-alt: oklch(0.17 0.005 var(--p-brand-h)); --hg-surface-muted: oklch(0.18 0.006 var(--p-brand-h)); /* Text — dark */ --hg-text-main: oklch(0.93 0 0); --hg-text-muted: oklch(0.60 0 0); /* Softs — dark */ --hg-brand-soft: oklch(0.20 0.03 var(--p-brand-h)); --hg-brand-soft-on: oklch(0.75 0.12 var(--p-brand-h)); --hg-accent-soft: oklch(0.20 0.03 var(--p-accent-h)); --hg-accent-soft-on: oklch(0.75 0.14 var(--p-accent-h)); /* Borders & shadows — dark */ --hg-border: oklch(0.25 0.005 var(--p-brand-h)); --hg-shadow-ink: oklch(0 0 0 / 0.5); --hg-glass-edge: inset 0 1px 0 0 rgba(255, 255, 255, 0.08); /* --- HGS:COLORS:DARK:END --- */ }