@font-face {
	  font-family: 'lucida';
	  src: url('./assets/font/lucida-bright-regular.ttf') format('truetype');
	  font-weight: normal;
	  font-style: normal;
	}
  .font-lucida { font-family: 'Lucida', sans-serif; }
  
  @theme {
  	:root, :host {
  	
  		--text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-base: 1rem;
        --text-base--line-height: 1.5;
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --text-6xl: 3.75rem;
        --text-6xl--line-height: 1;
        
        --font-weight-light: 300;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        
        --font-brand: "Lucida";
        
        --tracking-tight: -.025em;
        --tracking-normal: 0em;
        --tracking-wide: .025em;
        --tracking-wider: .05em;
        
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-relaxed: 1.625;
        
        --radius-sm: .25rem;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --radius-xl: .75rem;
        --radius-2xl: 1rem;
          	
  	}
  }

	.font-brand {
		font-family: var(--font-brand);
		font-weight:500 !important;
	}

/* Navbar scroll transition */
    .navbar {
      transition: background-color 0.4s ease,
                  border-color 0.4s ease,
                  box-shadow 0.4s ease,
                  backdrop-filter 0.4s ease;
    }
    .navbar.scrolled {
      background-color: rgba(248, 248, 248, 0.98);
      border-bottom-color: rgba(231, 229, 228, 0.8);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                  0 4px 16px rgba(0, 0, 0, 0.04);
    }
    .dark .navbar.scrolled {
      background-color: rgba(12, 18, 31, 0.95);
      border-bottom-color: rgba(28, 25, 23, 0.8);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
                  0 4px 16px rgba(0, 0, 0, 0.15);
    }






/* **/
	.hide-sm { display: none; visibility: hidden; }
	.show-sm { display: inline; visibility: hidden; }