fiboui 1.0.0

package/src/styles/themes/cupertino.css

@@ -0,0 +1,197 @@
+
+
+:root:has(.fibo-theme-cupertino),
+.fibo-theme-cupertino {
+  
+  --fibo-primary: #007AFF;
+  --fibo-on-primary: #FFFFFF;
+  --fibo-primary-container: rgba(0, 122, 255, 0.15);
+  --fibo-on-primary-container: #007AFF;
+  
+  --fibo-secondary: #5856D6;
+  --fibo-on-secondary: #FFFFFF;
+  
+  
+  --fibo-background: #F2F2F7; 
+  --fibo-on-background: #000000;
+  
+  --fibo-surface: #FFFFFF;
+  --fibo-on-surface: #000000;
+  --fibo-surface-variant: #E5E5EA; 
+  --fibo-on-surface-variant: #8E8E93; 
+  
+  --fibo-error: #FF3B30;
+  
+  --fibo-outline: #C7C7CC; 
+  
+  
+  --fibo-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
+  
+  
+  --fibo-radius-xs: 6px;
+  --fibo-radius-sm: 8px;
+  --fibo-radius-md: 10px; 
+  --fibo-radius-lg: 13px; 
+  --fibo-radius-xl: 20px;
+  --fibo-radius-full: 9999px;
+  
+  
+  --fibo-elevation-1: 0 1px 3px rgba(0,0,0,0.05);
+  --fibo-elevation-2: 0 4px 12px rgba(0,0,0,0.1);
+  --fibo-elevation-3: 0 12px 32px rgba(0,0,0,0.15);
+  
+  
+  --fibo-transition-duration: 400ms;
+  --fibo-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+
+
+
+.fibo-theme-cupertino .fibo-button {
+  font-family: var(--fibo-font-family);
+  font-size: 17px;
+  letter-spacing: -0.4px;
+  font-weight: 500; 
+  height: 44px; 
+  border-radius: 12px;
+}
+
+
+.fibo-theme-cupertino .fibo-button-filled {
+  background-color: var(--fibo-primary);
+  color: var(--fibo-on-primary);
+  border-radius: var(--fibo-radius-full);
+  padding: 14px 24px;
+  font-weight: 600;
+}
+.fibo-theme-cupertino .fibo-button-filled:active {
+  opacity: 0.7; 
+  transform: scale(0.98);
+}
+
+
+.fibo-theme-cupertino .fibo-card {
+  background-color: var(--fibo-surface);
+  border-radius: var(--fibo-radius-md); 
+  box-shadow: none; 
+  border: 1px solid rgba(60, 60, 67, 0.1); 
+  padding: 16px;
+}
+
+
+.fibo-theme-cupertino .fibo-textfield-container {
+  display: flex;
+  flex-direction: column; 
+  margin-bottom: 1rem;
+}
+
+.fibo-theme-cupertino .fibo-textfield-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 17px;
+  border: 1px solid var(--fibo-outline);
+  background-color: var(--fibo-surface);
+  transition: all 200ms ease;
+  outline: none;
+  border-radius: var(--fibo-radius-md);
+  padding: 12px 16px;
+}
+
+.fibo-theme-cupertino .fibo-textfield-input:focus {
+  border-color: var(--fibo-primary);
+}
+
+.fibo-theme-cupertino .fibo-textfield-label {
+  margin-bottom: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fibo-on-surface-variant);
+  text-transform: uppercase;
+}
+
+
+.fibo-theme-cupertino .fibo-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: var(--fibo-radius-full);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fibo-on-surface-variant);
+}
+
+
+.fibo-theme-cupertino .fibo-banner {
+  border-radius: var(--fibo-radius-lg);
+  padding: 12px 16px;
+  background-color: var(--fibo-surface-variant);
+  border-left: 3px solid transparent;
+  backdrop-filter: blur(10px);
+}
+.fibo-theme-cupertino .fibo-banner-success { border-left-color: #34C759; background-color: rgba(52, 199, 89, 0.1); color: #000; }
+.fibo-theme-cupertino .fibo-banner-warning { border-left-color: #FF9500; background-color: rgba(255, 149, 0, 0.1); color: #000; }
+.fibo-theme-cupertino .fibo-banner-error { border-left-color: #FF3B30; background-color: rgba(255, 59, 48, 0.1); color: #000; }
+.fibo-theme-cupertino .fibo-banner-info { border-left-color: #007AFF; background-color: rgba(0, 122, 255, 0.1); color: #000; }
+
+
+.fibo-theme-cupertino .fibo-list {
+  background-color: var(--fibo-surface);
+  border-radius: var(--fibo-radius-md);
+  overflow: hidden;
+}
+.fibo-theme-cupertino .fibo-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background-color: var(--fibo-surface);
+  border-bottom: 0.5px solid var(--fibo-outline);
+  cursor: pointer;
+}
+.fibo-theme-cupertino .fibo-list-item:active {
+  background-color: var(--fibo-surface-variant);
+}
+.fibo-theme-cupertino .fibo-list-item:last-child {
+  border-bottom: none;
+}
+
+
+.fibo-theme-cupertino .fibo-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: transparent;
+}
+.fibo-theme-cupertino .fibo-table th {
+  text-align: left;
+  padding: 8px 16px;
+  font-size: 13px;
+  text-transform: uppercase;
+  color: var(--fibo-on-surface-variant);
+  font-weight: 500;
+  background-color: transparent;
+  border-bottom: 1px solid var(--fibo-outline);
+}
+.fibo-theme-cupertino .fibo-table td {
+  padding: 12px 16px;
+  background-color: var(--fibo-surface);
+  border-bottom: 0.5px solid var(--fibo-outline);
+  font-size: 17px;
+}
+.fibo-theme-cupertino .fibo-table tr:first-child td:first-child { border-top-left-radius: 10px; }
+.fibo-theme-cupertino .fibo-table tr:first-child td:last-child { border-top-right-radius: 10px; }
+.fibo-theme-cupertino .fibo-table tr:last-child td:first-child { border-bottom-left-radius: 10px; border-bottom: none; }
+.fibo-theme-cupertino .fibo-table tr:last-child td:last-child { border-bottom-right-radius: 10px; border-bottom: none; }
+
+
+.fibo-theme-cupertino .fibo-text-h1 { font-size: 34px; font-weight: 700; letter-spacing: 0.37px; }
+.fibo-theme-cupertino .fibo-text-h2 { font-size: 28px; font-weight: 700; letter-spacing: 0.36px; }
+.fibo-theme-cupertino .fibo-text-h3 { font-size: 22px; font-weight: 700; letter-spacing: 0.35px; }
+.fibo-theme-cupertino .fibo-text-h4 { font-size: 20px; font-weight: 600; letter-spacing: 0.38px; }
+.fibo-theme-cupertino .fibo-text-h5 { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; }
+.fibo-theme-cupertino .fibo-text-h6 { font-size: 15px; font-weight: 600; letter-spacing: -0.24px; }
+.fibo-theme-cupertino .fibo-text-body { font-size: 17px; font-weight: 400; letter-spacing: -0.41px; }
+.fibo-theme-cupertino .fibo-text-caption { font-size: 13px; font-weight: 400; color: var(--fibo-on-surface-variant); }

package/src/styles/themes/material.css

@@ -0,0 +1,322 @@
+
+
+:root:has(.fibo-theme-material),
+.fibo-theme-material {
+  
+  --fibo-primary: #6750A4;
+  --fibo-on-primary: #FFFFFF;
+  --fibo-primary-container: #EADDFF;
+  --fibo-on-primary-container: #21005D;
+  
+  --fibo-secondary: #625B71;
+  --fibo-on-secondary: #FFFFFF;
+  --fibo-secondary-container: #E8DEF8;
+  --fibo-on-secondary-container: #1D192B;
+  
+  --fibo-tertiary: #7D5260;
+  --fibo-on-tertiary: #FFFFFF;
+  --fibo-tertiary-container: #FFD8E4;
+  --fibo-on-tertiary-container: #31111D;
+  
+  --fibo-error: #B3261E;
+  --fibo-on-error: #FFFFFF;
+  
+  --fibo-background: #FFFBFE;
+  --fibo-on-background: #1C1B1F;
+  
+  --fibo-surface: #FFFBFE;
+  --fibo-on-surface: #1C1B1F;
+  --fibo-surface-variant: #E7E0EC;
+  --fibo-on-surface-variant: #49454F;
+  
+  --fibo-outline: #79747E;
+  
+  
+  --fibo-font-family: 'Roboto', sans-serif;
+  
+  
+  --fibo-radius-xs: 4px;
+  --fibo-radius-sm: 8px;
+  --fibo-radius-md: 12px;
+  --fibo-radius-lg: 16px;
+  --fibo-radius-xl: 28px;
+  --fibo-radius-full: 9999px;
+  
+  
+  --fibo-elevation-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
+  --fibo-elevation-2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
+  --fibo-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3);
+  
+  
+  --fibo-hover-opacity: 0.08;
+  --fibo-focus-opacity: 0.12;
+  --fibo-press-opacity: 0.12;
+  
+  
+  --fibo-transition-duration: 250ms;
+  --fibo-transition-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+
+
+
+.fibo-theme-material .fibo-button {
+  font-family: var(--fibo-font-family);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 500;
+  font-size: 0.875rem;
+  height: 40px;
+  border-radius: 20px; 
+  border-radius: 9999px; 
+  padding: 0 24px;
+}
+
+
+.fibo-theme-material .fibo-button-filled,
+.fibo-theme-material .fibo-button-elevated {
+  background-color: var(--fibo-primary);
+  color: var(--fibo-on-primary);
+  box-shadow: var(--fibo-elevation-1);
+}
+.fibo-theme-material .fibo-button-filled:hover {
+  box-shadow: var(--fibo-elevation-2);
+}
+.fibo-theme-material .fibo-button-filled::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--fibo-on-primary);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.fibo-theme-material .fibo-button-filled:hover::after {
+  opacity: var(--fibo-hover-opacity);
+}
+
+
+.fibo-theme-material .fibo-card {
+  background-color: var(--fibo-surface);
+  border-radius: var(--fibo-radius-md); 
+  border: 1px solid var(--fibo-outline); 
+  
+  border: none;
+  background-color: var(--fibo-surface-container-low, #F7F2FA); 
+  box-shadow: var(--fibo-elevation-1);
+  padding: 16px;
+}
+
+
+.fibo-theme-material .fibo-textfield-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.fibo-theme-material .fibo-textfield-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--fibo-outline);
+  background-color: transparent;
+  transition: all var(--fibo-transition-duration);
+  outline: none;
+  border-radius: var(--fibo-radius-xs);
+  padding: 1rem 1rem;
+}
+
+.fibo-theme-material .fibo-textfield-label {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+  font-size: 1rem;
+  color: var(--fibo-on-surface-variant);
+  pointer-events: none;
+  transition: all var(--fibo-transition-duration);
+  background-color: transparent;
+  background-color: transparent;
+  padding: 0 4px;
+}
+
+.fibo-theme-material .fibo-textfield-input::placeholder {
+  opacity: 0;
+  transition: opacity var(--fibo-transition-duration);
+}
+
+.fibo-theme-material .fibo-textfield-input:focus::placeholder {
+  opacity: 1;
+}
+
+.fibo-theme-material .fibo-textfield-input:focus {
+  border-color: var(--fibo-primary);
+  border-width: 2px;
+  padding: calc(1rem - 1px);
+}
+
+.fibo-theme-material .fibo-textfield-input:focus ~ .fibo-textfield-label,
+.fibo-theme-material .fibo-textfield-input:not(:placeholder-shown) ~ .fibo-textfield-label {
+  top: -0.5rem;
+  left: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--fibo-primary);
+  background-color: var(--fibo-surface);
+}
+
+
+.fibo-theme-material .fibo-textarea-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem; 
+}
+
+.fibo-theme-material .fibo-textarea-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--fibo-outline);
+  background-color: transparent;
+  transition: all var(--fibo-transition-duration);
+  outline: none;
+  border-radius: var(--fibo-radius-xs);
+  padding: 1rem 1rem;
+}
+
+.fibo-theme-material .fibo-textarea-label {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+  font-size: 1rem;
+  color: var(--fibo-on-surface-variant);
+  pointer-events: none;
+  transition: all var(--fibo-transition-duration);
+  background-color: transparent;
+  padding: 0 4px;
+}
+
+.fibo-theme-material .fibo-textarea-input::placeholder {
+  opacity: 0;
+  transition: opacity var(--fibo-transition-duration);
+}
+.fibo-theme-material .fibo-textarea-input:focus::placeholder {
+  opacity: 1;
+}
+
+.fibo-theme-material .fibo-textarea-input:focus {
+  border-color: var(--fibo-primary);
+  border-width: 2px;
+  padding: calc(1rem - 1px);
+}
+
+.fibo-theme-material .fibo-textarea-input:focus ~ .fibo-textarea-label,
+.fibo-theme-material .fibo-textarea-input:not(:placeholder-shown) ~ .fibo-textarea-label {
+  top: -0.5rem;
+  left: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--fibo-primary);
+  background-color: var(--fibo-surface);
+}
+
+
+.fibo-theme-material .fibo-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  white-space: nowrap;
+  height: 32px;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 0.875rem;
+  background-color: var(--fibo-surface-variant);
+  color: var(--fibo-on-surface-variant);
+  border: 1px solid transparent;
+}
+
+
+.fibo-theme-material .fibo-banner {
+  border-radius: var(--fibo-radius-sm);
+  border-left: 4px solid;
+  padding: 16px;
+  background-color: var(--fibo-surface-variant); 
+}
+.fibo-theme-material .fibo-banner-success {
+  background-color: #E8F5E9; 
+  border-color: #2E7D32; 
+  color: #1B5E20;
+}
+.fibo-theme-material .fibo-banner-warning {
+  background-color: #FFF3E0; 
+  border-color: #EF6C00; 
+  color: #E65100;
+}
+.fibo-theme-material .fibo-banner-error {
+  background-color: #FFEBEE; 
+  border-color: #C62828; 
+  color: #B71C1C;
+}
+.fibo-theme-material .fibo-banner-info {
+  background-color: #E3F2FD; 
+  border-color: #1565C0; 
+  color: #0D47A1;
+}
+
+
+.fibo-theme-material .fibo-list {
+  background-color: var(--fibo-surface);
+  border-radius: var(--fibo-radius-sm);
+  overflow: hidden;
+}
+.fibo-theme-material .fibo-list-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--fibo-outline);
+  cursor: pointer;
+  transition: background-color var(--fibo-transition-duration);
+}
+.fibo-theme-material .fibo-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.fibo-theme-material .fibo-list-item:last-child {
+  border-bottom: none;
+}
+
+
+.fibo-theme-material .fibo-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--fibo-surface);
+  box-shadow: var(--fibo-elevation-1);
+  border-radius: var(--fibo-radius-sm);
+  overflow: hidden;
+}
+.fibo-theme-material .fibo-table th {
+  text-align: left;
+  padding: 16px;
+  background-color: var(--fibo-surface);
+  border-bottom: 1px solid var(--fibo-outline);
+  font-weight: 500;
+  color: var(--fibo-on-surface-variant);
+}
+.fibo-theme-material .fibo-table td {
+  padding: 16px;
+  border-bottom: 1px solid var(--fibo-outline);
+  color: var(--fibo-on-surface);
+}
+.fibo-theme-material .fibo-table tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+
+.fibo-theme-material .fibo-text-h1 { font-size: 96px; letter-spacing: -1.5px; font-weight: 300; }
+.fibo-theme-material .fibo-text-h2 { font-size: 60px; letter-spacing: -0.5px; font-weight: 300; }
+.fibo-theme-material .fibo-text-h3 { font-size: 48px; letter-spacing: 0px; font-weight: 400; }
+.fibo-theme-material .fibo-text-h4 { font-size: 34px; letter-spacing: 0.25px; font-weight: 400; }
+.fibo-theme-material .fibo-text-h5 { font-size: 24px; letter-spacing: 0px; font-weight: 400; }
+.fibo-theme-material .fibo-text-h6 { font-size: 20px; letter-spacing: 0.15px; font-weight: 500; }
+.fibo-theme-material .fibo-text-body { font-size: 16px; letter-spacing: 0.5px; font-weight: 400; }
+.fibo-theme-material .fibo-text-caption { font-size: 12px; letter-spacing: 0.4px; font-weight: 400; color: var(--fibo-on-surface-variant); }

package/src/styles/themes/web.css

@@ -0,0 +1,196 @@
+
+
+:root:has(.fibo-theme-web),
+.fibo-theme-web {
+  
+  --fibo-primary: #3B82F6;
+  --fibo-on-primary: #FFFFFF;
+  --fibo-primary-container: #DBEAFE;
+  --fibo-on-primary-container: #1E40AF;
+  
+  --fibo-secondary: #64748B;
+  --fibo-on-secondary: #FFFFFF;
+  
+  --fibo-background: #F8FAFC;
+  --fibo-on-background: #0F172A;
+  
+  --fibo-surface: #FFFFFF;
+  --fibo-on-surface: #0F172A;
+  
+  --fibo-outline: #E2E8F0;
+  
+  
+  --fibo-font-family: 'Inter', system-ui, sans-serif;
+  
+  
+  --fibo-radius-xs: 2px;
+  --fibo-radius-sm: 4px;
+  --fibo-radius-md: 6px;
+  --fibo-radius-lg: 8px;
+  --fibo-radius-xl: 12px;
+  --fibo-radius-full: 9999px;
+  
+  
+  --fibo-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --fibo-elevation-2: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --fibo-elevation-3: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+
+
+.fibo-theme-web .fibo-button {
+  font-family: var(--fibo-font-family);
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--fibo-radius-md);
+  transition: all 150ms ease;
+}
+
+.fibo-theme-web .fibo-button-filled {
+  background-color: var(--fibo-primary);
+  color: var(--fibo-on-primary);
+}
+.fibo-theme-web .fibo-button-filled:hover {
+  background-color: #2563EB; 
+  box-shadow: var(--fibo-elevation-2);
+}
+
+.fibo-theme-web .fibo-card {
+  background-color: var(--fibo-surface);
+  border: 1px solid var(--fibo-outline);
+  border-radius: var(--fibo-radius-lg);
+  box-shadow: var(--fibo-elevation-1);
+  padding: 1.5rem;
+}
+
+
+.fibo-theme-web .fibo-textfield-container {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-bottom: 1rem;
+}
+
+.fibo-theme-web .fibo-textfield-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  border: 1px solid var(--fibo-outline);
+  background-color: var(--fibo-surface);
+  transition: all 150ms ease;
+  outline: none;
+  border-radius: var(--fibo-radius-md);
+  padding: 0.625rem 1rem;
+}
+
+.fibo-theme-web .fibo-textfield-input:focus {
+  border-color: var(--fibo-primary);
+  box-shadow: 0 0 0 2px var(--fibo-primary-container);
+
+
+  font-weight: 500;
+  color: var(--fibo-on-surface);
+}
+
+
+.fibo-theme-web .fibo-textarea-container {
+  display: flex;
+  flex-direction: column-reverse; 
+  margin-bottom: 1rem;
+}
+
+.fibo-theme-web .fibo-textarea-input {
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  border: 1px solid var(--fibo-outline);
+  background-color: var(--fibo-surface);
+  transition: all 150ms ease;
+  outline: none;
+  border-radius: var(--fibo-radius-md);
+  padding: 0.625rem 1rem;
+  min-height: 80px;
+}
+
+.fibo-theme-web .fibo-textarea-input:focus {
+  border-color: var(--fibo-primary);
+  box-shadow: 0 0 0 2px var(--fibo-primary-container);
+}
+
+.fibo-theme-web .fibo-textarea-label {
+  margin-bottom: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--fibo-on-surface);
+}
+
+
+  background-color: var(--fibo-primary-container);
+  color: var(--fibo-on-primary-container);
+
+
+
+.fibo-theme-web .fibo-banner {
+  border-radius: var(--fibo-radius-md);
+  border-left: 4px solid;
+  padding: 1rem;
+  background-color: var(--fibo-surface);
+  box-shadow: var(--fibo-elevation-1);
+}
+.fibo-theme-web .fibo-banner-success { border-color: #10B981; background-color: #ECFDF5; color: #065F46; }
+.fibo-theme-web .fibo-banner-warning { border-color: #F59E0B; background-color: #FFFBEB; color: #92400E; }
+.fibo-theme-web .fibo-banner-error { border-color: #EF4444; background-color: #FEF2F2; color: #991B1B; }
+.fibo-theme-web .fibo-banner-info { border-color: #3B82F6; background-color: #EFF6FF; color: #1E40AF; }
+
+
+.fibo-theme-web .fibo-list {
+  background-color: var(--fibo-surface);
+  border: 1px solid var(--fibo-outline);
+  border-radius: var(--fibo-radius-md);
+  overflow: hidden;
+}
+.fibo-theme-web .fibo-list-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--fibo-outline);
+}
+.fibo-theme-web .fibo-list-item:hover {
+  background-color: #F8FAFC;
+}
+.fibo-theme-web .fibo-list-item:last-child {
+  border-bottom: none;
+}
+
+
+.fibo-theme-web .fibo-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+.fibo-theme-web .fibo-table th {
+  padding: 0.75rem 1.5rem;
+  background-color: #F8FAFC;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  color: var(--fibo-on-surface-variant);
+  border-bottom: 1px solid var(--fibo-outline);
+}
+.fibo-theme-web .fibo-table td {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--fibo-outline);
+  color: var(--fibo-on-surface);
+}
+
+
+.fibo-theme-web .fibo-text-h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; }
+.fibo-theme-web .fibo-text-h2 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
+.fibo-theme-web .fibo-text-h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }
+.fibo-theme-web .fibo-text-h4 { font-size: 1.25rem; font-weight: 600; }
+.fibo-theme-web .fibo-text-h5 { font-size: 1.125rem; font-weight: 600; }
+.fibo-theme-web .fibo-text-h6 { font-size: 1rem; font-weight: 600; }
+.fibo-theme-web .fibo-text-body { font-size: 1rem; color: #374151; }
+.fibo-theme-web .fibo-text-caption { font-size: 0.875rem; color: #6B7280; }