@widgetic/design-system 0.3.68

package/dist/styles/global.css

@@ -0,0 +1,893 @@
+/* Tailwind 4
+@import "tailwindcss"; */
+
+/* Taildind 3 imports */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* Import fonts css */
+@import './fonts.css';
+
+@layer base {
+  /* CSS Variables Here at the top of the base layer */
+  :root {
+    /* Site Grid Variables */
+    --site-column-width: 74px;
+    --site-column-gap: 24px;
+    --site-columns-desktop: 12;
+    --site-columns-tablet: 8;
+    --site-columns-mobile: 4;
+    
+    /* Dashboard Grid Variables */
+    --dashboard-sidebar-width: 240px;
+    --dashboard-margin: 24px;
+    --dashboard-gap: 20px;
+    --dashboard-columns-desktop: 12;
+    --dashboard-columns-tablet: 6;
+    --dashboard-columns-mobile: 4;
+    
+    /* App Grid Variables */
+    --app-margin: 24px;
+    --app-gap: 20px;
+    --app-columns-desktop: 12;
+    --app-columns-tablet: 6;
+    --app-columns-mobile: 4;
+    --app-main-color: #00A6FF;
+    --app-header-color: #00FF26;
+    --app-margin-color: #FF0000;
+    --app-stroke-opacity: 0.1;
+    --app-fill-opacity: 0.09;
+
+    /* Z-index system */
+    --z-base: 1;              /* Base layer */
+    --z-content: 10;          /* Main content area */
+    --z-header: 20;           /* Header base layer */
+    --z-dropdown: 30;         /* Regular dropdowns (search/filter) */
+    --z-header-dropdown: 40;  /* Header dropdowns (avatar/dots) */
+    --z-modal: 50;           /* Modal dialogs */
+
+    /* Scrollbar Settings */
+    --scrollbar-width: 24px;
+    --scrollbar-thumb-normal-color: hsl(var(--grey2));
+    --scrollbar-thumb-hover-color: hsl(var(--grey3));
+    --scrollbar-track-color: hsl(var(--grey1));
+
+    /* Icon Colors */
+    --icon-success: 142 71% 45%;
+    --icon-error: 0 84% 60%;
+  }
+
+  /* CLASSES FOR WIDGETIC COMPONENTS */
+  /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
+  .widgetic-colors {
+    --dark: 120 35.7% 9.4%;
+    --deep-forest-green: 115 24.1% 24.7%;
+    --sage-green: 108 25.4% 52.9%;
+    --sunny-yellow: 45 89% 65.7%;
+    --light-green: 83 45.5% 93.7%;
+    --forest-green: 90 16.7% 83.3%;
+    --error: 0 89% 65.7%;
+    --light-error: 0 45.5% 93.7%;
+    
+    /* Greys */
+    --grey1: 0 0% 96.1%;
+    --grey2: 0 0% 94.1%;
+    --grey3: 0 0% 55.7%;
+    --grey4: 0 0% 46.1%;
+    --grey5: 0 0% 40%;
+    --grey6: 0 0% 26.7%;
+    --grey7: 0 0% 12.9%;
+  }
+
+  /* Border radius tokens */
+  .widgetic-radius {
+    /* Corner radius values */
+    --radius-pill: 100px;   /* Pill/Extra large corner radius */
+    --radius-large: 15px;   /* Large corner radius */
+    --radius-medium: 12px;  /* Medium corner radius */
+    --radius-small: 8px;    /* Small corner radius */
+  }
+
+  .widgetic-breakpoints {
+    --breakpoint-mobile: 393px;
+    --breakpoint-tablet: 744px;
+    --breakpoint-desktop: 1156px;
+  }
+  /* Utility classes for border radius */
+  .rounded-pill {
+    border-radius: var(--radius-pill);
+  }
+
+  .rounded-large {
+    border-radius: var(--radius-large);
+  }
+
+  .rounded-medium {
+    border-radius: var(--radius-medium);
+  }
+
+  .rounded-small {
+    border-radius: var(--radius-small);
+  }
+
+  /*** GLOBAL STYLE CLASSES ***/
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html, 
+  body {
+    overflow: hidden; /* prevent scroll */
+    margin: 0;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+
+  /* This is the root container of the website(app.html) */
+  .root-ct {
+    @apply min-h-screen;
+    display: block !important;
+  }
+
+  /* This is the root layout container of the website pages */
+  .layout-ct {
+    @apply min-h-screen w-full;
+  }
+
+  .page-ct {
+    width: 100%;
+    height: 100vh;
+    /* background-color: green; */
+  }
+
+  /* Native Scrollbar Customization */
+  /* Use @property for transition */
+  @property --scroll-thumb-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f0f0f0; /* Direct color value matching --grey2 */
+  }
+
+  .native-scrollbar {
+    width: calc(100% + var(--scrollbar-width));
+    overflow-y: scroll;
+    transition: --scroll-thumb-color 250ms linear;
+  }
+
+  .native-scrollbar:hover {
+    --scroll-thumb-color: var(--scrollbar-thumb-hover-color);
+  }
+
+  .native-scrollbar::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+  }
+
+  .native-scrollbar::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    
+    border: calc(var(--scrollbar-width) / 3) solid transparent;
+    background-clip: padding-box;
+    border-radius: var(--scrollbar-width);
+
+    background-color: var(--scroll-thumb-color);
+  }
+
+  .native-scrollbar::-webkit-scrollbar-track {
+    cursor: pointer;
+    background-color: transparent;
+    border-radius: var(--scrollbar-width);
+  }
+  
+
+  /**** Grid Systems ****/
+  /* 1. Site Grid */
+  .site-grid {
+    /* background-color: green; */
+    display: grid;
+    grid-template-columns: repeat(var(--site-columns-desktop), var(--site-column-width));
+    column-gap: var(--site-column-gap);
+    margin: 0 auto;
+    justify-content: center;
+    position: relative;
+  }
+
+  /* Debug class */
+  .site-grid-debug {
+    display: grid;
+    grid-template-columns: repeat(var(--site-columns-desktop), minmax(0, 1fr));
+    gap: var(--site-column-gap);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  /* When debug grid is shown, apply colors */
+  [data-debug-grid="true"] .site-grid-debug > * {
+    @apply bg-red-500/10;
+  }
+
+  [data-debug-grid="true"] .footer-debug {
+    @apply bg-blue-100/30;
+  }
+
+  [data-debug-grid="true"] .footer-logo-debug {
+    @apply bg-blue-100;
+  }
+
+  [data-debug-grid="true"] .footer-links-debug {
+    @apply bg-green-100;
+  }
+
+  [data-debug-grid="true"] .footer-resources-debug {
+    @apply bg-yellow-100;
+  }
+
+  [data-debug-grid="true"] .footer-developers-debug {
+    @apply bg-purple-100;
+  }
+
+  /* Create a container for columns */
+  .site-grid-debug::after {
+    content: '';
+    position: fixed;  /* Fixed to viewport */
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);  /* Center the container */
+    height: 100vh;
+    display: flex;
+    gap: 24px;
+    pointer-events: none;
+  }
+
+  /* Create columns using repeating gradient */
+  .site-grid-debug::after {
+    width: calc(12 * 74px + 11 * 24px);  /* 12 columns + 11 gaps */
+    background: repeating-linear-gradient(
+        to right,
+        rgb(239 68 68 / 0.1),    /* Column color */
+        rgb(239 68 68 / 0.1) 74px,
+        transparent 74px,         /* Gap */
+        transparent 98px          /* 74px + 24px */
+    );
+  }
+
+  /* Style the gutters (2nd and 2nd-to-last columns) */
+  .site-grid-debug > :nth-child(2),
+  .site-grid-debug > :nth-last-child(2) {
+    @apply bg-blue-100/30;  /* Light blue for gutters */
+  }
+
+  /* Style the content columns */
+  .site-grid-debug > :not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
+    @apply bg-red-500/10;  /* Light red for content columns */
+  }
+
+  /* Hide the flexible margins */
+  .site-grid-debug > :first-child,
+  .site-grid-debug > :last-child {
+    @apply bg-transparent;
+  }
+
+  /* Desktop Layout - Stretching (744px - 1156px) */
+  @media (max-width: var(--breakpoint-desktop)) {
+    :root {
+        --site-column-width: 64px;
+        --site-column-gap: 20px;
+    }
+    .site-grid {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+        max-width: none;
+    }
+  }
+
+  /* Tablet (744px and below) */
+  @media (max-width: var(--breakpoint-tablet)) {
+    :root {
+        --site-columns-tablet: 8;
+        --site-column-gap: 16px;
+        --dashboard-sidebar-width: 200px;
+        --dashboard-margin: 16px;
+        --dashboard-gap: 16px;
+        --app-margin: 16px;
+    }
+    .site-grid {
+        grid-template-columns: repeat(var(--site-columns-tablet), minmax(0, 1fr));
+        gap: 16px;
+    }
+  }
+
+  /* Mobile (393px and below) */
+  @media (max-width: var(--breakpoint-mobile)) {    
+    :root {
+        --site-columns-mobile: 4;
+        --dashboard-sidebar-width: auto;
+    }
+    .site-grid {
+        grid-template-columns: repeat(var(--site-columns-mobile), minmax(0, 1fr));
+        gap: 16px;
+    }
+  }
+
+  /* Update other grid breakpoints to match */
+  
+  /* 2. Dashboard Grid - Desktop Layout */
+  .dashboard-grid {
+    /* Desktop Layout */
+    display: grid;
+    grid-template-columns:
+      var(--dashboard-sidebar-width)  /* Sidebar width (240px) */
+      var(--dashboard-margin)         /* Left margin */
+      1fr                             /* Main content area */
+      var(--dashboard-margin);        /* Right margin */
+    grid-template-rows: auto 1fr;
+    gap: 0;                           /* Remove gap as we'll handle it in the content grids */
+    grid-template-areas:
+      "sidebar margin-l header margin-r"
+      "sidebar margin-l main margin-r";
+    height: 100%; /* Ensure the grid container itself has full height */
+  }
+
+  /* Dashboard Grid - Elements */
+  .dashboard-grid .grid-gap, 
+  .dashboard-grid .grid-sidebar {
+    height: 100%;
+  }
+
+  /* Add explicit grid-sidebar class */
+  .grid-sidebar {
+    grid-area: sidebar;
+  }
+
+  .grid-gap {
+    grid-area: gap;
+  }
+
+  /* Header Grid inside Dashboard */
+  .dashboard-header-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--dashboard-columns-desktop), minmax(0, 1fr));
+    gap: var(--dashboard-gap);
+    height: 56px;
+    width: 100%;
+  }
+
+  /* Main Content Grid inside Dashboard */
+  .dashboard-main-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--dashboard-columns-desktop), minmax(0, 1fr));
+    gap: var(--dashboard-gap);
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Grid debug styles */
+  [data-debug="true"] .dashboard-header-grid > div {
+    @apply bg-green-500/10;
+  }
+
+  [data-debug="true"] .dashboard-main-grid > div {
+    @apply bg-red-500/10;
+  }
+
+  /* Remove this to prevent the actual sidebar from showing debug color */
+  /* [data-debug="true"] .grid-sidebar {
+    @apply bg-red-500/10;
+  } */
+
+  /* Tablet (744px and below) */
+  @media (max-width: var(--breakpoint-tablet)) {
+    .dashboard-grid {
+      grid-template-columns: 
+        var(--dashboard-margin)
+        var(--dashboard-sidebar-width)
+        var(--dashboard-gap)
+        1fr
+        var(--dashboard-margin);
+      grid-template-rows: 56px 1fr;
+      gap: var(--dashboard-gap);
+      grid-template-areas:
+        "sidebar margin-l header margin-r"
+        "sidebar margin-l main margin-r";
+    }
+
+    .dashboard-header-grid,
+    .dashboard-main-grid {
+      grid-template-columns: repeat(var(--dashboard-columns-tablet), minmax(0, 1fr));
+    }
+  }
+
+  /* Mobile (393px and below) */
+  @media (max-width: var(--breakpoint-mobile)) {
+    .dashboard-grid {
+      grid-template-columns: 
+        var(--dashboard-margin)
+        1fr
+        var(--dashboard-margin);
+      grid-template-rows: 56px auto 1fr;
+      gap: var(--dashboard-gap);
+      grid-template-areas:
+        "margin-l header margin-r"
+        "margin-l menu margin-r"
+        "margin-l main margin-r";
+    }
+
+    .dashboard-header-grid,
+    .dashboard-main-grid {
+      grid-template-columns: repeat(var(--dashboard-columns-mobile), minmax(0, 1fr));
+    }
+  }
+
+  /* 3. App Grid */
+  .app-grid {
+    /* background-color: red; */
+    display: grid;
+    grid-template-columns: 
+        24px                           /* Left margin */
+        1fr                            /* Main content area */
+        24px;                          /* Right margin */
+    grid-template-rows: auto 1fr;
+    gap: 0;
+    grid-template-areas:
+        "margin-l header margin-r"
+        "margin-l main margin-r";
+    height: 100%;
+  }
+
+  /* Header Grid inside App 
+  .app-header-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--app-columns-desktop), minmax(0, 1fr));
+    gap: var(--app-gap);
+    height: 100%;
+    width: 100%;
+  }*/
+
+  /* Main Content Grid inside App */
+  .app-main-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--app-columns-desktop), minmax(0, 1fr));
+    gap: var(--app-gap);
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Grid Areas */ 
+  .grid-header { grid-area: header; }
+  .grid-main { grid-area: main; }
+  .grid-margin-left { grid-area: margin-l; }
+  .grid-margin-right { grid-area: margin-r; }
+  .grid-margin-left, .grid-margin-right, .site-grid-column, .grid-gap { 
+    background-color: color-mix(in srgb, var(--app-margin-color), transparent calc((1 - var(--app-fill-opacity)) * 100%)) !important;
+    border: 1px solid color-mix(in srgb, var(--app-margin-color), transparent calc((1 - var(--app-stroke-opacity)) * 100%)) !important;
+  }
+  .grid-header-column { 
+    background-color: color-mix(in srgb, var(--app-header-color), transparent calc((1 - var(--app-fill-opacity)) * 100%)) !important;
+    border: 1px solid color-mix(in srgb, var(--app-header-color), transparent calc((1 - var(--app-stroke-opacity)) * 100%)) !important;
+  }    
+  .grid-column, .grid-sidebar { 
+    background-color: color-mix(in srgb, var(--app-main-color), transparent calc((1 - var(--app-fill-opacity)) * 100%));
+    border: 1px solid color-mix(in srgb, var(--app-main-color), transparent calc((1 - var(--app-stroke-opacity)) * 100%));
+  }
+
+  /* Tablet (744px and below) */
+  @media (max-width: var(--breakpoint-tablet)) {
+    .app-grid {
+        grid-template-columns: 
+            24px
+            1fr
+            24px;
+    }
+
+    .app-header-grid,
+    .app-main-grid {
+        grid-template-columns: repeat(var(--app-columns-tablet), minmax(0, 1fr));
+    }
+  }
+
+  /* Mobile (393px and below) */
+  @media (max-width: var(--breakpoint-mobile)) {
+    .app-grid {
+        grid-template-columns: 
+            16px
+            1fr
+            16px;
+    }
+
+    .app-header-grid,
+    .app-main-grid {
+        grid-template-columns: repeat(var(--app-columns-mobile), minmax(0, 1fr));
+    }
+  }
+
+  /* Grid Area Classes */
+  .grid-footer {
+    grid-area: footer;
+  }
+  
+  .grid-toolbar {
+    grid-area: toolbar;
+  }
+
+  /* grid area class for mobile menu */
+  .grid-menu {
+    grid-area: menu;
+  }
+
+  /* Modal System */
+  .modal-overlay {
+    @apply fixed inset-0 z-50;
+    backdrop-filter: blur(30px);
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .modal-shadow {
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+
+  .modal-panel {
+    @apply fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2;
+    background-color: white;
+    border-radius: var(--radius-large);
+    border: 1px solid hsl(var(--forest-green));
+  }
+
+  /* Modal Close Button */
+  .modal-close {
+    @apply fixed z-50;
+    top: 16px;
+    right: 16px;
+    width: 40px;
+    height: 40px;
+  }
+
+  /* Modal Button Container */
+  .modal-actions {
+    @apply flex justify-end gap-4 absolute bottom-6 right-6;
+  }
+
+  /* Modal Button Styles */
+  .modal-btn-primary {
+    @apply h6 inline-flex items-center justify-center !important;
+    padding: 0 16px !important;
+    min-height: 34px !important;
+    border-radius: var(--radius-pill) !important;
+    background-color: hsl(var(--deep-forest-green)) !important;
+    color: white !important;
+    transition: background-color 0.2s ease !important;
+    line-height: 1 !important;
+    padding-bottom: 2px !important;
+  }
+
+  .modal-btn-primary:hover {
+    background-color: color-mix(in srgb, hsl(var(--deep-forest-green)) 90%, black) !important;
+  }
+
+  .modal-btn-secondary {
+    @apply h6 inline-flex items-center justify-center !important;
+    padding: 0 16px !important;
+    min-height: 34px !important;
+    border-radius: var(--radius-pill) !important;
+    background-color: hsl(var(--grey2)) !important;
+    color: hsl(var(--grey5)) !important;
+    border: 1px solid hsl(var(--grey2)) !important;
+    transition: background-color 0.2s ease !important;
+    line-height: 1 !important;
+    padding-bottom: 2px !important;
+  }
+
+  .modal-btn-secondary:hover {
+    background-color: color-mix(in srgb, hsl(var(--grey2)) 96%, black) !important;
+    color: hsl(var(--grey7)) !important;
+  }
+
+  .modal-btn-attention {
+    @apply h6 inline-flex items-center justify-center !important;
+    padding: 0 16px !important;
+    height: 34px;
+    border-radius: var(--radius-pill) !important;
+    background-color: hsl(var(--error)) !important;
+    color: white !important;
+    transition: background-color 0.2s ease !important;
+    line-height: 1 !important;
+    padding-bottom: 2px !important;
+  }
+
+  .modal-btn-attention:hover {
+    background-color: color-mix(in srgb, hsl(var(--error)) 90%, black) !important;
+  }
+
+  /* Button System */
+
+  /* Primary Button - Base styfles */
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 !important;
+    padding: 8px 16px !important;
+    height: 34px !important;
+    border-radius: var(--radius-small) !important;
+    background-color: hsl(var(--deep-forest-green)) !important;
+    color: hsl(var(--light-green)) !important;
+    font-family: 'Riegla Medium' !important;
+    font-size: 18px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+  }
+
+  /* Add hover state for primary button */
+  .btn-primary:hover {
+    color: hsl(var(--light-green)) !important;
+    background-color: color-mix(in srgb, hsl(var(--deep-forest-green)) 90%, black) !important;
+  }
+
+  /* Primary Button sizes */
+  .btn-primary-small {
+    @apply body-medium inline-flex items-center justify-center gap-1 !important;
+    padding: 4px 12px 6px 12px !important;
+    border-radius: var(--radius-medium) !important;
+    background-color: hsl(var(--deep-forest-green)) !important;
+    color: hsl(var(--light-green)) !important;
+  }
+
+  .btn-primary-large {
+    @apply body-medium inline-flex items-center justify-center gap-3 !important;
+    padding: 16px 32px !important;
+    min-height: 56px !important;
+    border-radius: var(--radius-medium) !important;
+    background-color: hsl(var(--deep-forest-green)) !important;
+    color: hsl(var(--light-green)) !important;
+    font-family: 'Riegla Medium' !important;
+    font-size: 18px !important;
+    line-height: 1.4 !important;
+    font-weight: 400 !important;
+  }
+
+  /* Add hover state for large primary button */
+  .btn-primary-large:hover {
+    color: white !important;
+    background-color: color-mix(in srgb, hsl(var(--deep-forest-green)) 90%, black) !important;
+  }
+
+  /* Secondary Button */
+  .btn-secondary {
+    @apply h6 inline-flex items-center justify-center gap-2 !important;
+    padding: 0 16px !important;
+    height: 34px !important;
+    border-radius: var(--radius-small) !important;
+    background-color: hsl(var(--grey1)) !important;
+    color: hsl(var(--grey7)) !important;
+    border: 1px solid hsl(var(--forest-green)) !important;
+    transition: background-color 0.2s ease !important;
+  }
+
+  .btn-secondary:hover {
+    background-color: hsl(var(--grey2)) !important;
+  }
+
+  /* Icon specific styles */
+  .btn-icon-left {
+    @apply order-first;
+  }
+
+  .btn-icon-right {
+    @apply order-last;
+  }
+
+  /* Dropdown System */
+  .dropdown-container {
+    @apply relative;
+  }
+
+  .dropdown-menu {
+    @apply absolute bg-white rounded-lg shadow-lg min-w-[200px];
+    z-index: var(--z-header-dropdown);
+  }
+
+  .header-dropdown-menu {
+    @apply absolute bg-white rounded-lg shadow-lg min-w-[200px];
+    z-index: var(--z-header-dropdown);
+  }
+
+  .dropdown-menu-item {
+    @apply flex items-center gap-2 w-full text-left h6 text-[hsl(var(--grey7))] whitespace-nowrap;
+    padding: 8px 16px;
+  }
+
+  .dropdown-menu-item:hover {
+    @apply bg-[hsl(var(--grey1))];
+  }
+
+  .dropdown-trigger {
+    @apply flex items-center gap-2 text-[hsl(var(--grey7))] h6;
+  }
+
+  /* Remove focus stroke from dropdowns */
+  .dropdown-trigger,
+  [role="combobox"],
+  [aria-haspopup="listbox"],
+  [aria-expanded] {
+    outline: none !important;
+    --tw-ring-offset-width: 0 !important;
+    --tw-ring-width: 0 !important;
+  }
+
+  /* Handle focus-visible state */
+  .dropdown-trigger:focus-visible,
+  [role="combobox"]:focus-visible,
+  [aria-haspopup="listbox"]:focus-visible,
+  [aria-expanded]:focus-visible {
+    outline: none !important;
+    --tw-ring-offset-width: 0 !important;
+    --tw-ring-width: 0 !important;
+  }
+
+  /* Z-index layers */
+  .content-layer {
+    z-index: var(--z-content);
+  }
+
+  .header-layer {
+    z-index: var(--z-header);
+  }
+
+  .dropdown-layer {
+    z-index: var(--z-dropdown);
+  }
+
+  .header-dropdown-layer {
+    z-index: var(--z-header-dropdown);
+  }
+
+  .modal-layer {
+    z-index: var(--z-modal);
+  }
+
+  /* Add the tag component */
+  .tag-element {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    border-radius: var(--radius-small);
+    background-color: hsl(var(--light-green));
+    color: hsl(var(--sage-green));
+    border: 1px solid hsl(var(--sage-green));
+  }
+
+  /* Form Input styles */
+  input.form-input,
+  textarea.form-input,
+  .form-input input {
+    @apply h-[34px] rounded-small border !border-[hsl(var(--forest-green))] bg-white w-full subtext px-3 !ring-0 !ring-offset-0;
+    @apply !text-[hsl(var(--grey7))];
+    transition: border-color 0.2s ease, color 0.2s ease;
+  }
+
+  input.form-input::placeholder,
+  textarea.form-input::placeholder,
+  .form-input input::placeholder {
+    @apply subtext opacity-100;
+    color: hsl(var(--grey3)) !important;
+    transition: color 0.2s ease;
+  }
+
+  /* Focus styles */
+  input.form-input:focus-visible,
+  textarea.form-input:focus-visible,
+  .form-input input:focus-visible {
+    outline: none !important;
+    border-color: hsl(var(--deep-forest-green)) !important;
+    box-shadow: none !important;
+    /* ring: 0 !important; */
+  }
+
+  /* Error states */
+  input.form-input[data-error="true"],
+  .form-input[data-error="true"] input {
+    border-color: hsl(var(--error)) !important;
+    color: hsl(var(--error)) !important;
+  }
+
+  input.form-input[data-error="true"]::placeholder,
+  .form-input[data-error="true"] input::placeholder {
+    color: hsl(var(--error)) !important;
+  }
+
+  /* Focus state when there's an error - revert to normal state */
+  input.form-input[data-error="true"]:focus-visible,
+  .form-input[data-error="true"] input:focus-visible {
+    border-color: hsl(var(--deep-forest-green)) !important;
+    color: hsl(var(--dark)) !important;
+  }
+
+  input.form-input[data-error="true"]:focus-visible::placeholder,
+  .form-input[data-error="true"] input:focus-visible::placeholder {
+    color: hsl(var(--sage-green)) !important;
+  }
+
+  /* Style for password input eye icon */
+  .form-input svg {
+    color: hsl(var(--sage-green)) !important;
+  }
+
+  /* Add H5 text style */
+  .h5 {
+    font-family: 'Riegla Medium';
+    font-size: 16px;
+    line-height: 1.4;
+    font-weight: 400;
+  }
+
+  /* Update the Breadcrumbs specific styles */
+  .breadcrumbs-link {
+    @apply h5;
+    color: hsl(var(--grey6));
+  }
+
+  .breadcrumbs-current {
+    @apply h5;
+    color: hsl(var(--grey3));
+  }
+
+  .breadcrumbs-separator {
+    @apply h5;
+    color: hsl(var(--grey3));
+  }
+
+  .breadcrumbs-nav-button {
+    @apply p-2 transition-colors;
+  }
+
+  .breadcrumbs-nav-button:hover:not(.cursor-not-allowed) svg {
+    color: hsl(var(--grey7));
+  }
+
+  .breadcrumbs-nav-button.cursor-not-allowed svg {
+    color: hsl(var(--grey3));
+  }
+} /* End of Base Layer Styles */
+
+/* Debug styles */
+[data-debug="true"] [data-debug-footer] {
+    @apply bg-blue-100/30;
+}
+
+[data-debug="true"] [data-debug-column="logo"] {
+    @apply bg-blue-100;
+}
+
+[data-debug="true"] [data-debug-column="links"] {
+    @apply bg-green-100;
+}
+
+[data-debug="true"] [data-debug-column="resources"] {
+    @apply bg-yellow-100;
+}
+
+[data-debug="true"] [data-debug-column="developers"] {
+    @apply bg-purple-100;
+}
+
+/* Primary Form Button */
+.btn-primary-form {
+    @apply bg-[hsl(var(--deep-forest-green))] text-[hsl(var(--light-green))] h-[34px];
+}
+
+.btn-primary-form span {
+    @apply h6;
+}
+
+.btn-primary-form:hover {
+  background-color: color-mix(in srgb, hsl(var(--deep-forest-green)) 90%, black) !important;
+  color: white !important;
+}
+
+.accordion-trigger {
+  height: 52px;
+}
+
+[data-radix-collapsible-trigger] {
+  min-height: 52px !important;
+}