@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap';
@layer reset, tokens, base, layout, components, utilities, overrides;
/*!
 * IAM Design System v2.0.0 - Complete
 * A modern, utility-first CSS framework
 * License: MIT
 */
/* Import Google Fonts - Roboto Variable */
/* Import all modules */
/* ==================================
   MODERN CSS RESET
   ================================== */
@layer reset {
  *, *::before, *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizespeed;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button, [role="button"] {
    cursor: pointer;
    background: none;
    border: none;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }

  a {
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      -webkit-animation-duration: 0.01ms !important;
              animation-duration: 0.01ms !important;
      -webkit-animation-iteration-count: 1 !important;
              animation-iteration-count: 1 !important;
      -webkit-transition-duration: 0.01ms !important;
              transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
/* ==================================
   DESIGN TOKENS
   ================================== */
@layer tokens {
  :root {
    /* === TYPOGRAPHY TOKENS === */

    /* Using Roboto Variable Font from Google Fonts */
    --font-heading: "Roboto", ui-sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
    --font-body: "Roboto", ui-sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", menlo, consolas, monospace;

    /* Font Weights */
    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* Font Sizes - Fluid Typography */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --fs-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --fs-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --fs-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
    --fs-6xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
    --fs-7xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);

    /* Line Heights */
    --lh-none: 1;
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;
    --lh-loose: 2;

    /* Letter Spacing */
    --ls-tighter: -0.05em;
    --ls-tight: -0.025em;
    --ls-normal: 0;
    --ls-wide: 0.025em;
    --ls-wider: 0.05em;
    --ls-widest: 0.1em;

    /* === COLOR TOKENS === */

    /* Primitive Colors */
    --color-white: #fff;
    --color-black: #000;
    --color-transparent: transparent;
    --color-current: currentcolor;

    /* Core Color Families */

    /* Neutral (Warm Gray) - Versatile grayscale for general use */
    --neutral-50: #fafaf9;
    --neutral-100: #f7f4f1;
    --neutral-200: #e8e1da;
    --neutral-300: #d1c7bd;
    --neutral-400: #9d9287;
    --neutral-500: #867f76;
    --neutral-600: #6b6560;
    --neutral-700: #4a443f;
    --neutral-800: #3b2921;
    --neutral-900: #1e1c1a;
    --neutral-950: #0a0908;

    /* Cocoa (Warm Brown) - Core warm color option */
    --cocoa-50: #faf8f7;
    --cocoa-100: #f2ede9;
    --cocoa-200: #e4d9d1;
    --cocoa-300: #d1bfb0;
    --cocoa-400: #b89e88;
    --cocoa-500: #a0836b;
    --cocoa-600: #8b6f5b;
    --cocoa-700: #725a4b;
    --cocoa-800: #5e4b3f;
    --cocoa-900: #4d3f35;
    --cocoa-950: #2a211c;

    /* Note: Additional color families available in _colors-extended.css */

    /* Users should choose their brand colors based on their project needs */

    /* Semantic Colors */
    --semantic-error-light: #fee;
    --semantic-error: #dc2626;
    --semantic-error-dark: #991b1b;
    --semantic-success-light: #f0fdf4;
    --semantic-success: #16a34a;
    --semantic-success-dark: #166534;
    --semantic-warning-light: #fffbeb;
    --semantic-warning: #f59e0b;
    --semantic-warning-dark: #b45309;
    --semantic-info-light: #eff6ff;
    --semantic-info: #3b82f6;
    --semantic-info-dark: #1e40af;

    /* Functional Color Assignments */
    --color-text-primary: var(--neutral-900);
    --color-text-secondary: var(--neutral-600);
    --color-text-tertiary: var(--neutral-500);
    --color-text-inverse: var(--color-white);
    --color-text-link: var(--cocoa-600);
    --color-text-link-hover: var(--neutral-900);
    --color-bg-primary: var(--neutral-100);
    --color-bg-secondary: var(--neutral-200);
    --color-bg-tertiary: var(--neutral-800);
    --color-bg-inverse: var(--neutral-900);
    --color-bg-surface: var(--color-white);
    --color-border-subtle: hsl(from var(--neutral-900) h s l / 0.08);
    --color-border-default: hsl(from var(--neutral-900) h s l / 0.16);
    --color-border-strong: hsl(from var(--neutral-900) h s l / 0.32);
    --color-accent-primary: var(--cocoa-500);
    --color-accent-secondary: var(--cocoa-600);
    --color-accent-highlight: var(--cocoa-200);

    /* === SPACING TOKENS === */
    --space-px: 1px;
    --space-0: 0;
    --space-0\.5: 0.125rem;
    --space-1: 0.25rem;
    --space-1\.5: 0.375rem;
    --space-2: 0.5rem;
    --space-2\.5: 0.625rem;
    --space-3: 0.75rem;
    --space-3\.5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;

    /* === SIZING TOKENS === */
    --size-0: 0;
    --size-full: 100%;
    --size-screen: 100vw;
    --size-min: min-content;
    --size-max: max-content;
    --size-fit: fit-content;

    /* Container Sizes */
    --width-xs: 20rem;
    --width-sm: 24rem;
    --width-md: 28rem;
    --width-lg: 32rem;
    --width-xl: 36rem;
    --width-2xl: 42rem;
    --width-3xl: 48rem;
    --width-4xl: 56rem;
    --width-5xl: 64rem;
    --width-6xl: 72rem;
    --width-7xl: 80rem;

    /* === BORDER TOKENS === */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width-8: 8px;
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --radius-full: 9999px;

    /* === SHADOW TOKENS === */
    --shadow-xs: 0 1px 2px 0 hsl(0deg 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0 hsl(0deg 0% 0% / 0.1), 0 1px 2px -1px hsl(0deg 0% 0% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(0deg 0% 0% / 0.1), 0 2px 4px -2px hsl(0deg 0% 0% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0deg 0% 0% / 0.1), 0 4px 6px -4px hsl(0deg 0% 0% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0deg 0% 0% / 0.1), 0 8px 10px -6px hsl(0deg 0% 0% / 0.1);
    --shadow-2xl: 0 25px 50px -12px hsl(0deg 0% 0% / 0.25);
    --shadow-inner: inset 0 2px 4px 0 hsl(0deg 0% 0% / 0.05);
    --shadow-none: 0 0 #0000;

    /* === TRANSITION TOKENS === */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast: var(--duration-150) var(--ease-out);
    --transition-base: var(--duration-200) var(--ease-out);
    --transition-normal: var(--duration-300) var(--ease-in-out);
    --transition-slow: var(--duration-500) var(--ease-in-out);

    /* === Z-INDEX TOKENS === */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-max: 999;

    /* === BREAKPOINT TOKENS === */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
  }

  /* Dark Mode Tokens */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text-primary: var(--neutral-50);
      --color-text-secondary: var(--neutral-300);
      --color-text-tertiary: var(--neutral-400);
      --color-text-inverse: var(--neutral-900);
      --color-bg-primary: var(--neutral-900);
      --color-bg-secondary: var(--neutral-800);
      --color-bg-tertiary: var(--neutral-700);
      --color-bg-inverse: var(--neutral-50);
      --color-bg-surface: var(--neutral-800);
    }
  }

  [data-theme="dark"] {
    --color-text-primary: var(--neutral-50);
    --color-text-secondary: var(--neutral-300);
    --color-text-tertiary: var(--neutral-400);
    --color-text-inverse: var(--neutral-900);
    --color-bg-primary: var(--neutral-900);
    --color-bg-secondary: var(--neutral-800);
    --color-bg-tertiary: var(--neutral-700);
    --color-bg-inverse: var(--neutral-50);
    --color-bg-surface: var(--neutral-800);
  }
}
/* ==================================
   BASE STYLES
   ================================== */
@layer base {
  html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--space-20);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
  }

  /* Typography Base */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    color: var(--color-text-primary);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-7xl);
    letter-spacing: var(--ls-tight);
    -webkit-margin-after: var(--space-6);
            margin-block-end: var(--space-6);
  }

  h2 {
    font-size: var(--fs-6xl);
    letter-spacing: var(--ls-tight);
    -webkit-margin-after: var(--space-5);
            margin-block-end: var(--space-5);
  }

  h3 {
    font-size: var(--fs-5xl);
    letter-spacing: var(--ls-tight);
    -webkit-margin-after: var(--space-4);
            margin-block-end: var(--space-4);
  }

  h4 {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-medium);
    -webkit-margin-after: var(--space-4);
            margin-block-end: var(--space-4);
  }

  h5 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    -webkit-margin-after: var(--space-3);
            margin-block-end: var(--space-3);
  }

  h6 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    -webkit-margin-after: var(--space-3);
            margin-block-end: var(--space-3);
  }

  p {
    -webkit-margin-after: var(--space-4);
            margin-block-end: var(--space-4);
    line-height: var(--lh-relaxed);
    text-wrap: pretty;
  }

  a {
    color: var(--color-text-link);
    text-underline-offset: 0.125em;
    text-decoration-thickness: 0.0625em;
    -webkit-transition: color var(--transition-fast);
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-text-link-hover);
  }

  strong, b {
    font-weight: var(--fw-semibold);
  }

  em, i {
    font-style: italic;
  }

  small {
    font-size: var(--fs-sm);
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-base);
  }

  pre {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    padding: var(--space-6);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-xl);
    overflow-x: auto;
    margin-block: var(--space-6);
  }

  pre code {
    padding: 0;
    background: transparent;
  }

  blockquote {
    -webkit-padding-start: var(--space-6);
            padding-inline-start: var(--space-6);
    -webkit-border-start: var(--border-width-4) solid var(--color-accent-highlight);
            border-inline-start: var(--border-width-4) solid var(--color-accent-highlight);
    font-style: italic;
    color: var(--color-text-secondary);
    margin-block: var(--space-6);
  }

  hr {
    border: 0;
    block-size: var(--border-width-1);
    background: -webkit-gradient(
      linear,
      left top, right top,
      from(transparent),
      color-stop(var(--color-border-default)),
      to(transparent)
    );
    background: linear-gradient(
      to right,
      transparent,
      var(--color-border-default),
      transparent
    );
    margin-block: var(--space-12);
  }

  ul, ol {
    -webkit-padding-start: var(--space-6);
            padding-inline-start: var(--space-6);
    -webkit-margin-after: var(--space-4);
            margin-block-end: var(--space-4);
  }

  li {
    -webkit-margin-after: var(--space-2);
            margin-block-end: var(--space-2);
    line-height: var(--lh-relaxed);
  }

  ::-moz-selection {
    background-color: var(--color-accent-highlight);
    color: var(--color-text-primary);
  }

  ::selection {
    background-color: var(--color-accent-highlight);
    color: var(--color-text-primary);
  }
}
/* ==================================
   LAYOUT LAYER
   ================================== */
@layer layout {
  /* Container */
  .container {
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .width-xs { max-inline-size: var(--width-xs); }
  .width-sm { max-inline-size: var(--width-sm); }
  .width-md { max-inline-size: var(--width-md); }
  .width-lg { max-inline-size: var(--width-lg); }
  .width-xl { max-inline-size: var(--width-xl); }
  .width-2xl { max-inline-size: var(--width-2xl); }
  .width-3xl { max-inline-size: var(--width-3xl); }
  .width-4xl { max-inline-size: var(--width-4xl); }
  .width-5xl { max-inline-size: var(--width-5xl); }
  .width-6xl { max-inline-size: var(--width-6xl); }
  .width-7xl { max-inline-size: var(--width-7xl); }

  /* Section */
  .section {
    padding-block: var(--space-24);
    position: relative;
  }

  .section-sm { padding-block: var(--space-12); }
  .section-lg { padding-block: var(--space-32); }
  .section-xl { padding-block: var(--space-40); }

  /* Grid */
  .grid {
    display: grid;
    gap: var(--space-8);
  }

  .grid-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }
  .grid-12 { grid-template-columns: repeat(12, 1fr); }

  /* Auto-fit grids */
  .grid-auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .grid-auto-md {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  /* Flex */
  .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space-4);
  }

  .flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .flex-col-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

  /* Stack - Consistent spacing */
  .stack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .stack > * + * {
    -webkit-margin-before: var(--space-4);
            margin-block-start: var(--space-4);
  }

  .stack-sm > * + * { -webkit-margin-before: var(--space-2); margin-block-start: var(--space-2); }
  .stack-lg > * + * { -webkit-margin-before: var(--space-6); margin-block-start: var(--space-6); }
  .stack-xl > * + * { -webkit-margin-before: var(--space-8); margin-block-start: var(--space-8); }

  /* Cluster - Inline spacing */
  .cluster {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: var(--space-4);
  }

  .cluster-sm { gap: var(--space-2); }
  .cluster-lg { gap: var(--space-6); }
  .cluster-xl { gap: var(--space-8); }
}
/* ==================================
   COMPONENT LAYER
   ================================== */
@layer components {
  /* Button */
  .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    border-width: var(--border-width-1);
    border-style: solid;
    border-color: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all var(--transition-base);
    transition: all var(--transition-base);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap;
  }

  .btn:hover {
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
  }

  .btn:active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Button Variants */
  .btn-primary {
    background-color: var(--cocoa-600);
    color: var(--color-white);
    border-color: transparent;
  }

  .btn-primary:hover {
    background-color: var(--cocoa-500);
  }

  .btn-secondary {
    background-color: var(--cocoa-300);
    color: var(--cocoa-900);
    border-color: transparent;
  }

  .btn-secondary:hover {
    background-color: var(--cocoa-200);
  }

  .btn-outline {
    background-color: transparent;
    border-color: var(--cocoa-600);
    color: var(--cocoa-900);
  }

  .btn-outline:hover {
    background-color: var(--cocoa-200);
    border-color: var(--cocoa-600);
  }

  .btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-link);
    padding-inline: var(--space-2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .btn-ghost:hover {
    color: var(--color-text-link-hover);
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  /* Button Sizes */
  .btn-xs {
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: var(--fs-xs);
  }

  .btn-sm {
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
  }

  .btn-lg {
    padding-block: var(--space-4);
    padding-inline: var(--space-8);
    font-size: var(--fs-base);
  }

  .btn-xl {
    padding-block: var(--space-5);
    padding-inline: var(--space-10);
    font-size: var(--fs-lg);
  }

  /* Card */
  .card {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    -webkit-transition: -webkit-box-shadow var(--transition-base);
    transition: -webkit-box-shadow var(--transition-base);
    transition: box-shadow var(--transition-base);
    transition: box-shadow var(--transition-base), -webkit-box-shadow var(--transition-base);
  }

  .card:hover {
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
  }

  .card-interactive {
    cursor: pointer;
  }

  .card-interactive:hover {
    -webkit-box-shadow: var(--shadow-md);
            box-shadow: var(--shadow-md);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-transition: all var(--transition-base);
    transition: all var(--transition-base);
  }

  /* Badge/Label */
  .badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-none);
  }

  .badge-primary {
    background-color: var(--color-accent-highlight);
    color: var(--color-text-primary);
  }

  .badge-secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
  }

  .badge-dark {
    background-color: hsl(from var(--neutral-900) h s l / 0.9);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--color-white);
  }

  /* Form Elements */
  input,
  textarea,
  select {
    inline-size: 100%;
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    border-width: var(--border-width-1);
    border-style: solid;
    border-color: var(--color-border-default);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    -webkit-transition: all var(--transition-base);
    transition: all var(--transition-base);
  }

  textarea {
    border-radius: var(--radius-2xl);
    resize: vertical;
    min-block-size: 120px;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    -webkit-box-shadow: 0 0 0 3px hsl(from var(--color-accent-primary) h s l / 0.1);
            box-shadow: 0 0 0 3px hsl(from var(--color-accent-primary) h s l / 0.1);
  }

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--color-text-tertiary);
  }

  input::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--color-text-tertiary);
  }

  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: var(--color-text-tertiary);
  }

  input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: var(--color-text-tertiary);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-tertiary);
  }

  label {
    display: block;
    -webkit-margin-after: var(--space-2);
            margin-block-end: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
  }

  /* Alert */
  .alert {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-xl);
    -webkit-border-start: var(--border-width-4) solid;
            border-inline-start: var(--border-width-4) solid;
  }

  .alert-info {
    background-color: var(--semantic-info-light);
    border-color: var(--semantic-info);
    color: var(--semantic-info-dark);
  }

  .alert-success {
    background-color: var(--semantic-success-light);
    border-color: var(--semantic-success);
    color: var(--semantic-success-dark);
  }

  .alert-warning {
    background-color: var(--semantic-warning-light);
    border-color: var(--semantic-warning);
    color: var(--semantic-warning-dark);
  }

  .alert-error {
    background-color: var(--semantic-error-light);
    border-color: var(--semantic-error);
    color: var(--semantic-error-dark);
  }
}
/* ==================================
   UTILITY LAYER
   ================================== */
@layer utilities {
  /* Display */
  .block { display: block; }
  .inline-block { display: inline-block; }
  .inline { display: inline; }
  .flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
  .grid { display: grid; }
  .inline-grid { display: inline-grid; }
  .hidden { display: none; }

  /* Position */
  .static { position: static; }
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .sticky { position: sticky; }

  /* Alignment */
  .items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
  .items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
  .items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

  .justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
  .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
  .justify-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }

  .self-auto { -ms-flex-item-align: auto; align-self: auto; }
  .self-start { -ms-flex-item-align: start; align-self: flex-start; }
  .self-end { -ms-flex-item-align: end; align-self: flex-end; }
  .self-center { -ms-flex-item-align: center; align-self: center; }
  .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; }

  /* Text Alignment */
  .text-start { text-align: start; }
  .text-end { text-align: end; }
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-justify { text-align: justify; }

  /* Width */
  .w-auto { inline-size: auto; }
  .w-full { inline-size: 100%; }
  .w-screen { inline-size: 100vw; }
  .w-min { inline-size: -webkit-min-content; inline-size: -moz-min-content; inline-size: min-content; }
  .w-max { inline-size: -webkit-max-content; inline-size: -moz-max-content; inline-size: max-content; }
  .w-fit { inline-size: -webkit-fit-content; inline-size: -moz-fit-content; inline-size: fit-content; }

  /* Height */
  .h-auto { block-size: auto; }
  .h-full { block-size: 100%; }
  .h-screen { block-size: 100vh; }
  .h-min { block-size: -webkit-min-content; block-size: -moz-min-content; block-size: min-content; }
  .h-max { block-size: -webkit-max-content; block-size: -moz-max-content; block-size: max-content; }
  .h-fit { block-size: -webkit-fit-content; block-size: -moz-fit-content; block-size: fit-content; }

  /* Overflow */
  .overflow-auto { overflow: auto; }
  .overflow-hidden { overflow: hidden; }
  .overflow-visible { overflow: visible; }
  .overflow-scroll { overflow: scroll; }
  .overflow-x-auto { overflow-x: auto; }
  .overflow-y-auto { overflow-y: auto; }

  /* Cursor */
  .cursor-auto { cursor: auto; }
  .cursor-pointer { cursor: pointer; }
  .cursor-not-allowed { cursor: not-allowed; }
  .cursor-wait { cursor: wait; }
  .cursor-text { cursor: text; }
  .cursor-move { cursor: move; }

  /* User Select */
  .select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  .select-text { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
  .select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; }
  .select-auto { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; }

  /* Pointer Events */
  .pointer-events-none { pointer-events: none; }
  .pointer-events-auto { pointer-events: auto; }

  /* Visibility */
  .visible { visibility: visible; }
  .invisible { visibility: hidden; }

  /* Opacity */
  .opacity-0 { opacity: 0; }
  .opacity-25 { opacity: 0.25; }
  .opacity-50 { opacity: 0.5; }
  .opacity-75 { opacity: 0.75; }
  .opacity-100 { opacity: 1; }

  /* Screen Readers Only */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* === SPACING UTILITIES === */

  /* Common margin utilities */
  .m-0 { margin: var(--space-0); }
  .m-1 { margin: var(--space-1); }
  .m-2 { margin: var(--space-2); }
  .m-3 { margin: var(--space-3); }
  .m-4 { margin: var(--space-4); }
  .m-5 { margin: var(--space-5); }
  .m-6 { margin: var(--space-6); }
  .m-8 { margin: var(--space-8); }
  .m-10 { margin: var(--space-10); }
  .m-12 { margin: var(--space-12); }
  .m-auto { margin: auto; }

  .mx-auto { margin-inline: auto; }
  .my-auto { margin-block: auto; }

  .mt-0 { -webkit-margin-before: var(--space-0); margin-block-start: var(--space-0); }
  .mt-1 { -webkit-margin-before: var(--space-1); margin-block-start: var(--space-1); }
  .mt-2 { -webkit-margin-before: var(--space-2); margin-block-start: var(--space-2); }
  .mt-3 { -webkit-margin-before: var(--space-3); margin-block-start: var(--space-3); }
  .mt-4 { -webkit-margin-before: var(--space-4); margin-block-start: var(--space-4); }
  .mt-6 { -webkit-margin-before: var(--space-6); margin-block-start: var(--space-6); }
  .mt-8 { -webkit-margin-before: var(--space-8); margin-block-start: var(--space-8); }

  .mb-0 { -webkit-margin-after: var(--space-0); margin-block-end: var(--space-0); }
  .mb-1 { -webkit-margin-after: var(--space-1); margin-block-end: var(--space-1); }
  .mb-2 { -webkit-margin-after: var(--space-2); margin-block-end: var(--space-2); }
  .mb-3 { -webkit-margin-after: var(--space-3); margin-block-end: var(--space-3); }
  .mb-4 { -webkit-margin-after: var(--space-4); margin-block-end: var(--space-4); }
  .mb-6 { -webkit-margin-after: var(--space-6); margin-block-end: var(--space-6); }
  .mb-8 { -webkit-margin-after: var(--space-8); margin-block-end: var(--space-8); }

  /* Common padding utilities */
  .p-0 { padding: var(--space-0); }
  .p-1 { padding: var(--space-1); }
  .p-2 { padding: var(--space-2); }
  .p-3 { padding: var(--space-3); }
  .p-4 { padding: var(--space-4); }
  .p-5 { padding: var(--space-5); }
  .p-6 { padding: var(--space-6); }
  .p-8 { padding: var(--space-8); }

  .px-2 { padding-inline: var(--space-2); }
  .px-4 { padding-inline: var(--space-4); }
  .px-6 { padding-inline: var(--space-6); }

  .py-2 { padding-block: var(--space-2); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }
  .py-8 { padding-block: var(--space-8); }
  .py-12 { padding-block: var(--space-12); }
  .py-20 { padding-block: var(--space-20); }

  /* === COLOR UTILITIES === */

  /* Text Colors - Using CSS custom properties */
  .text-primary { color: var(--color-text-primary); }
  .text-secondary { color: var(--color-text-secondary); }
  .text-tertiary { color: var(--color-text-tertiary); }
  .text-inverse { color: var(--color-text-inverse); }
  .text-link { color: var(--color-text-link); }
  .text-white { color: var(--color-white); }
  .text-black { color: var(--color-black); }

  /* Semantic Text Colors */
  .text-error { color: var(--semantic-error); }
  .text-success { color: var(--semantic-success); }
  .text-warning { color: var(--semantic-warning); }
  .text-info { color: var(--semantic-info); }

  /* Background Colors */
  .bg-primary { background-color: var(--color-bg-primary); }
  .bg-secondary { background-color: var(--color-bg-secondary); }
  .bg-tertiary { background-color: var(--color-bg-tertiary); }
  .bg-inverse { background-color: var(--color-bg-inverse); }
  .bg-surface { background-color: var(--color-bg-surface); }
  .bg-white { background-color: var(--color-white); }
  .bg-transparent { background-color: var(--color-transparent); }

  /* Accent Background Colors */
  .bg-accent-primary { background-color: var(--color-accent-primary); }
  .bg-accent-secondary { background-color: var(--color-accent-secondary); }
  .bg-accent-highlight { background-color: var(--color-accent-highlight); }

  /* === SVG UTILITIES === */

  /* SVG Fill Colors - Using CSS custom properties */
  .fill-primary { fill: var(--color-text-primary); }
  .fill-secondary { fill: var(--color-text-secondary); }
  .fill-tertiary { fill: var(--color-text-tertiary); }
  .fill-inverse { fill: var(--color-text-inverse); }
  .fill-link { fill: var(--color-text-link); }
  .fill-white { fill: var(--color-white); }
  .fill-black { fill: var(--color-black); }
  .fill-current { fill: currentColor; }
  .fill-none { fill: none; }

  /* Semantic SVG Fill Colors */
  .fill-error { fill: var(--semantic-error); }
  .fill-success { fill: var(--semantic-success); }
  .fill-warning { fill: var(--semantic-warning); }
  .fill-info { fill: var(--semantic-info); }

  /* SVG Stroke Colors */
  .stroke-primary { stroke: var(--color-text-primary); }
  .stroke-secondary { stroke: var(--color-text-secondary); }
  .stroke-tertiary { stroke: var(--color-text-tertiary); }
  .stroke-inverse { stroke: var(--color-text-inverse); }
  .stroke-link { stroke: var(--color-text-link); }
  .stroke-white { stroke: var(--color-white); }
  .stroke-black { stroke: var(--color-black); }
  .stroke-current { stroke: currentColor; }
  .stroke-none { stroke: none; }

  /* Semantic SVG Stroke Colors */
  .stroke-error { stroke: var(--semantic-error); }
  .stroke-success { stroke: var(--semantic-success); }
  .stroke-warning { stroke: var(--semantic-warning); }
  .stroke-info { stroke: var(--semantic-info); }

  /* === TYPOGRAPHY UTILITIES === */

  /* Font Families */
  .font-heading { font-family: var(--font-heading); }
  .font-body { font-family: var(--font-body); }
  .font-mono { font-family: var(--font-mono); }

  /* Font Sizes */
  .text-xs { font-size: var(--fs-xs); }
  .text-sm { font-size: var(--fs-sm); }
  .text-base { font-size: var(--fs-base); }
  .text-lg { font-size: var(--fs-lg); }
  .text-xl { font-size: var(--fs-xl); }
  .text-2xl { font-size: var(--fs-2xl); }
  .text-3xl { font-size: var(--fs-3xl); }
  .text-4xl { font-size: var(--fs-4xl); }
  .text-5xl { font-size: var(--fs-5xl); }

  /* Font Weights */
  .font-light { font-weight: var(--fw-light); }
  .font-regular { font-weight: var(--fw-regular); }
  .font-medium { font-weight: var(--fw-medium); }
  .font-semibold { font-weight: var(--fw-semibold); }
  .font-bold { font-weight: var(--fw-bold); }

  /* Font Style */
  .italic { font-style: italic; }
  .not-italic { font-style: normal; }

  /* Text Transform */
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }
  .normal-case { text-transform: none; }

  /* Text Decoration */
  .underline { text-decoration: underline; }
  .line-through { text-decoration: line-through; }
  .no-underline { text-decoration: none; }

  /* Line Height */
  .leading-none { line-height: var(--lh-none); }
  .leading-tight { line-height: var(--lh-tight); }
  .leading-snug { line-height: var(--lh-snug); }
  .leading-normal { line-height: var(--lh-normal); }
  .leading-relaxed { line-height: var(--lh-relaxed); }
  .leading-loose { line-height: var(--lh-loose); }

  /* === BORDER UTILITIES === */
  .border { border-width: var(--border-width-1); border-style: solid; }
  .border-0 { border-width: var(--border-width-0); }
  .border-2 { border-width: var(--border-width-2); border-style: solid; }

  /* Border Colors */
  .border-subtle { border-color: var(--color-border-subtle); }
  .border-default { border-color: var(--color-border-default); }
  .border-strong { border-color: var(--color-border-strong); }
  .border-transparent { border-color: var(--color-transparent); }

  /* Border Radius */
  .rounded-none { border-radius: var(--radius-none); }
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded { border-radius: var(--radius-base); }
  .rounded-md { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-2xl { border-radius: var(--radius-2xl); }
  .rounded-full { border-radius: var(--radius-full); }

  /* === SHADOW UTILITIES === */
  .shadow-none { -webkit-box-shadow: var(--shadow-none); box-shadow: var(--shadow-none); }
  .shadow-sm { -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
  .shadow { -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); }
  .shadow-md { -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); }
  .shadow-lg { -webkit-box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg); }
  .shadow-xl { -webkit-box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl); }

  /* === TRANSITION UTILITIES === */
  .transition-none { -webkit-transition: none; transition: none; }
  .transition-all { -webkit-transition: all var(--transition-base); transition: all var(--transition-base); }
  .transition { -webkit-transition: var(--transition-base); transition: var(--transition-base); }

  /* === GAP UTILITIES === */
  .gap-0 { gap: var(--space-0); }
  .gap-1 { gap: var(--space-1); }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }

  /* === RESPONSIVE UTILITIES === */
  @media (width <= 639px) {
    .sm\:hidden { display: none; }
  }

  @media (width >= 640px) {
    .sm\:block { display: block; }
    .sm\:flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
    .sm\:grid { display: grid; }
  }

  @media (width >= 768px) {
    .md\:block { display: block; }
    .md\:flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
    .md\:grid { display: grid; }
  }

  @media (width >= 1024px) {
    .lg\:block { display: block; }
    .lg\:flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
    .lg\:grid { display: grid; }
  }
}
/* ==================================
   ANIMATION UTILITIES
   ================================== */
@layer utilities {
  .animate-fade-in {
    -webkit-animation: fadeIn var(--duration-500) var(--ease-out);
            animation: fadeIn var(--duration-500) var(--ease-out);
  }

  .animate-fade-in-up {
    -webkit-animation: fadeInUp var(--duration-700) var(--ease-out);
            animation: fadeInUp var(--duration-700) var(--ease-out);
  }

  @-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translateY(30px);
              transform: translateY(30px);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translateY(30px);
              transform: translateY(30px);
    }

    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
}
/* Auto-generated background utilities with automatic text colors */
/* Generated by scripts/generate-auto-colors.js */
/* Text colors are automatically chosen based on WCAG contrast calculations */
/* Each background uses either the 50 (lightest) or 950 (darkest) shade */
/* from the same color family for optimal legibility and brand consistency */
@layer utilities {

  /* Amethyst backgrounds */
  .bg-amethyst-50 {
    background-color: var(--amethyst-50);
    color: var(--amethyst-950);
  } /* Contrast: 13.97:1 (AAA) */
  .bg-amethyst-100 {
    background-color: var(--amethyst-100);
    color: var(--amethyst-950);
  } /* Contrast: 12.71:1 (AAA) */
  .bg-amethyst-200 {
    background-color: var(--amethyst-200);
    color: var(--amethyst-950);
  } /* Contrast: 11.02:1 (AAA) */
  .bg-amethyst-300 {
    background-color: var(--amethyst-300);
    color: var(--amethyst-950);
  } /* Contrast: 8.48:1 (AAA) */
  .bg-amethyst-400 {
    background-color: var(--amethyst-400);
    color: var(--amethyst-950);
  } /* Contrast: 5.68:1 (AA) */
  .bg-amethyst-500 {
    background-color: var(--amethyst-500);
    color: var(--amethyst-950);
  } /* Contrast: 3.79:1 (Fail) */
  .bg-amethyst-600 {
    background-color: var(--amethyst-600);
    color: var(--amethyst-50);
  } /* Contrast: 5.02:1 (AA) */
  .bg-amethyst-700 {
    background-color: var(--amethyst-700);
    color: var(--amethyst-50);
  } /* Contrast: 6.51:1 (AA) */
  .bg-amethyst-800 {
    background-color: var(--amethyst-800);
    color: var(--amethyst-50);
  } /* Contrast: 8.13:1 (AAA) */
  .bg-amethyst-900 {
    background-color: var(--amethyst-900);
    color: var(--amethyst-50);
  } /* Contrast: 10.14:1 (AAA) */
  .bg-amethyst-950 {
    background-color: var(--amethyst-950);
    color: var(--amethyst-50);
  } /* Contrast: 13.97:1 (AAA) */

  /* Cerulean backgrounds */
  .bg-cerulean-50 {
    background-color: var(--cerulean-50);
    color: var(--cerulean-950);
  } /* Contrast: 13.02:1 (AAA) */
  .bg-cerulean-100 {
    background-color: var(--cerulean-100);
    color: var(--cerulean-950);
  } /* Contrast: 12.10:1 (AAA) */
  .bg-cerulean-200 {
    background-color: var(--cerulean-200);
    color: var(--cerulean-950);
  } /* Contrast: 10.46:1 (AAA) */
  .bg-cerulean-300 {
    background-color: var(--cerulean-300);
    color: var(--cerulean-950);
  } /* Contrast: 8.32:1 (AAA) */
  .bg-cerulean-400 {
    background-color: var(--cerulean-400);
    color: var(--cerulean-950);
  } /* Contrast: 6.48:1 (AA) */
  .bg-cerulean-500 {
    background-color: var(--cerulean-500);
    color: var(--cerulean-950);
  } /* Contrast: 5.01:1 (AA) */
  .bg-cerulean-600 {
    background-color: var(--cerulean-600);
    color: var(--cerulean-50);
  } /* Contrast: 3.84:1 (Fail) */
  .bg-cerulean-700 {
    background-color: var(--cerulean-700);
    color: var(--cerulean-50);
  } /* Contrast: 5.57:1 (AA) */
  .bg-cerulean-800 {
    background-color: var(--cerulean-800);
    color: var(--cerulean-50);
  } /* Contrast: 7.09:1 (AAA) */
  .bg-cerulean-900 {
    background-color: var(--cerulean-900);
    color: var(--cerulean-50);
  } /* Contrast: 8.87:1 (AAA) */
  .bg-cerulean-950 {
    background-color: var(--cerulean-950);
    color: var(--cerulean-50);
  } /* Contrast: 13.02:1 (AAA) */

  /* Cinnabar backgrounds */
  .bg-cinnabar-50 {
    background-color: var(--cinnabar-50);
    color: var(--cinnabar-950);
  } /* Contrast: 14.81:1 (AAA) */
  .bg-cinnabar-100 {
    background-color: var(--cinnabar-100);
    color: var(--cinnabar-950);
  } /* Contrast: 13.32:1 (AAA) */
  .bg-cinnabar-200 {
    background-color: var(--cinnabar-200);
    color: var(--cinnabar-950);
  } /* Contrast: 11.26:1 (AAA) */
  .bg-cinnabar-300 {
    background-color: var(--cinnabar-300);
    color: var(--cinnabar-950);
  } /* Contrast: 8.62:1 (AAA) */
  .bg-cinnabar-400 {
    background-color: var(--cinnabar-400);
    color: var(--cinnabar-950);
  } /* Contrast: 5.99:1 (AA) */
  .bg-cinnabar-500 {
    background-color: var(--cinnabar-500);
    color: var(--cinnabar-950);
  } /* Contrast: 4.29:1 (Fail) */
  .bg-cinnabar-600 {
    background-color: var(--cinnabar-600);
    color: var(--cinnabar-50);
  } /* Contrast: 4.49:1 (Fail) */
  .bg-cinnabar-700 {
    background-color: var(--cinnabar-700);
    color: var(--cinnabar-50);
  } /* Contrast: 6.04:1 (AA) */
  .bg-cinnabar-800 {
    background-color: var(--cinnabar-800);
    color: var(--cinnabar-50);
  } /* Contrast: 7.63:1 (AAA) */
  .bg-cinnabar-900 {
    background-color: var(--cinnabar-900);
    color: var(--cinnabar-50);
  } /* Contrast: 9.16:1 (AAA) */
  .bg-cinnabar-950 {
    background-color: var(--cinnabar-950);
    color: var(--cinnabar-50);
  } /* Contrast: 14.81:1 (AAA) */

  /* Cocoa backgrounds */
  .bg-cocoa-50 {
    background-color: var(--cocoa-50);
    color: var(--cocoa-950);
  } /* Contrast: 14.88:1 (AAA) */
  .bg-cocoa-100 {
    background-color: var(--cocoa-100);
    color: var(--cocoa-950);
  } /* Contrast: 13.56:1 (AAA) */
  .bg-cocoa-200 {
    background-color: var(--cocoa-200);
    color: var(--cocoa-950);
  } /* Contrast: 11.36:1 (AAA) */
  .bg-cocoa-300 {
    background-color: var(--cocoa-300);
    color: var(--cocoa-950);
  } /* Contrast: 8.85:1 (AAA) */
  .bg-cocoa-400 {
    background-color: var(--cocoa-400);
    color: var(--cocoa-950);
  } /* Contrast: 6.22:1 (AA) */
  .bg-cocoa-500 {
    background-color: var(--cocoa-500);
    color: var(--cocoa-950);
  } /* Contrast: 4.47:1 (Fail) */
  .bg-cocoa-600 {
    background-color: var(--cocoa-600);
    color: var(--cocoa-50);
  } /* Contrast: 4.39:1 (Fail) */
  .bg-cocoa-700 {
    background-color: var(--cocoa-700);
    color: var(--cocoa-50);
  } /* Contrast: 6.05:1 (AA) */
  .bg-cocoa-800 {
    background-color: var(--cocoa-800);
    color: var(--cocoa-50);
  } /* Contrast: 7.77:1 (AAA) */
  .bg-cocoa-900 {
    background-color: var(--cocoa-900);
    color: var(--cocoa-50);
  } /* Contrast: 9.55:1 (AAA) */
  .bg-cocoa-950 {
    background-color: var(--cocoa-950);
    color: var(--cocoa-50);
  } /* Contrast: 14.88:1 (AAA) */

  /* Fern backgrounds */
  .bg-fern-50 {
    background-color: var(--fern-50);
    color: var(--fern-950);
  } /* Contrast: 14.24:1 (AAA) */
  .bg-fern-100 {
    background-color: var(--fern-100);
    color: var(--fern-950);
  } /* Contrast: 13.57:1 (AAA) */
  .bg-fern-200 {
    background-color: var(--fern-200);
    color: var(--fern-950);
  } /* Contrast: 12.30:1 (AAA) */
  .bg-fern-300 {
    background-color: var(--fern-300);
    color: var(--fern-950);
  } /* Contrast: 10.62:1 (AAA) */
  .bg-fern-400 {
    background-color: var(--fern-400);
    color: var(--fern-950);
  } /* Contrast: 8.55:1 (AAA) */
  .bg-fern-500 {
    background-color: var(--fern-500);
    color: var(--fern-950);
  } /* Contrast: 6.54:1 (AA) */
  .bg-fern-600 {
    background-color: var(--fern-600);
    color: var(--fern-950);
  } /* Contrast: 4.52:1 (AA) */
  .bg-fern-700 {
    background-color: var(--fern-700);
    color: var(--fern-50);
  } /* Contrast: 4.79:1 (AA) */
  .bg-fern-800 {
    background-color: var(--fern-800);
    color: var(--fern-50);
  } /* Contrast: 6.81:1 (AA) */
  .bg-fern-900 {
    background-color: var(--fern-900);
    color: var(--fern-50);
  } /* Contrast: 8.70:1 (AAA) */
  .bg-fern-950 {
    background-color: var(--fern-950);
    color: var(--fern-50);
  } /* Contrast: 14.24:1 (AAA) */

  /* Indigo backgrounds */
  .bg-indigo-50 {
    background-color: var(--indigo-50);
    color: var(--indigo-950);
  } /* Contrast: 14.30:1 (AAA) */
  .bg-indigo-100 {
    background-color: var(--indigo-100);
    color: var(--indigo-950);
  } /* Contrast: 12.98:1 (AAA) */
  .bg-indigo-200 {
    background-color: var(--indigo-200);
    color: var(--indigo-950);
  } /* Contrast: 10.72:1 (AAA) */
  .bg-indigo-300 {
    background-color: var(--indigo-300);
    color: var(--indigo-950);
  } /* Contrast: 8.02:1 (AAA) */
  .bg-indigo-400 {
    background-color: var(--indigo-400);
    color: var(--indigo-950);
  } /* Contrast: 5.36:1 (AA) */
  .bg-indigo-500 {
    background-color: var(--indigo-500);
    color: var(--indigo-50);
  } /* Contrast: 3.99:1 (Fail) */
  .bg-indigo-600 {
    background-color: var(--indigo-600);
    color: var(--indigo-50);
  } /* Contrast: 5.62:1 (AA) */
  .bg-indigo-700 {
    background-color: var(--indigo-700);
    color: var(--indigo-50);
  } /* Contrast: 7.07:1 (AAA) */
  .bg-indigo-800 {
    background-color: var(--indigo-800);
    color: var(--indigo-50);
  } /* Contrast: 8.88:1 (AAA) */
  .bg-indigo-900 {
    background-color: var(--indigo-900);
    color: var(--indigo-50);
  } /* Contrast: 10.22:1 (AAA) */
  .bg-indigo-950 {
    background-color: var(--indigo-950);
    color: var(--indigo-50);
  } /* Contrast: 14.30:1 (AAA) */

  /* Neutral backgrounds */
  .bg-neutral-50 {
    background-color: var(--neutral-50);
    color: var(--neutral-950);
  } /* Contrast: 19.05:1 (AAA) */
  .bg-neutral-100 {
    background-color: var(--neutral-100);
    color: var(--neutral-950);
  } /* Contrast: 18.16:1 (AAA) */
  .bg-neutral-200 {
    background-color: var(--neutral-200);
    color: var(--neutral-950);
  } /* Contrast: 15.36:1 (AAA) */
  .bg-neutral-300 {
    background-color: var(--neutral-300);
    color: var(--neutral-950);
  } /* Contrast: 11.95:1 (AAA) */
  .bg-neutral-400 {
    background-color: var(--neutral-400);
    color: var(--neutral-950);
  } /* Contrast: 6.53:1 (AA) */
  .bg-neutral-500 {
    background-color: var(--neutral-500);
    color: var(--neutral-950);
  } /* Contrast: 5.03:1 (AA) */
  .bg-neutral-600 {
    background-color: var(--neutral-600);
    color: var(--neutral-50);
  } /* Contrast: 5.50:1 (AA) */
  .bg-neutral-700 {
    background-color: var(--neutral-700);
    color: var(--neutral-50);
  } /* Contrast: 9.18:1 (AAA) */
  .bg-neutral-800 {
    background-color: var(--neutral-800);
    color: var(--neutral-50);
  } /* Contrast: 13.18:1 (AAA) */
  .bg-neutral-900 {
    background-color: var(--neutral-900);
    color: var(--neutral-50);
  } /* Contrast: 16.26:1 (AAA) */
  .bg-neutral-950 {
    background-color: var(--neutral-950);
    color: var(--neutral-50);
  } /* Contrast: 19.05:1 (AAA) */

  /* Sand backgrounds */
  .bg-sand-50 {
    background-color: var(--sand-50);
    color: var(--sand-950);
  } /* Contrast: 13.95:1 (AAA) */
  .bg-sand-100 {
    background-color: var(--sand-100);
    color: var(--sand-950);
  } /* Contrast: 13.01:1 (AAA) */
  .bg-sand-200 {
    background-color: var(--sand-200);
    color: var(--sand-950);
  } /* Contrast: 11.28:1 (AAA) */
  .bg-sand-300 {
    background-color: var(--sand-300);
    color: var(--sand-950);
  } /* Contrast: 9.15:1 (AAA) */
  .bg-sand-400 {
    background-color: var(--sand-400);
    color: var(--sand-950);
  } /* Contrast: 6.93:1 (AA) */
  .bg-sand-500 {
    background-color: var(--sand-500);
    color: var(--sand-950);
  } /* Contrast: 5.11:1 (AA) */
  .bg-sand-600 {
    background-color: var(--sand-600);
    color: var(--sand-950);
  } /* Contrast: 4.23:1 (Fail) */
  .bg-sand-700 {
    background-color: var(--sand-700);
    color: var(--sand-50);
  } /* Contrast: 4.52:1 (AA) */
  .bg-sand-800 {
    background-color: var(--sand-800);
    color: var(--sand-50);
  } /* Contrast: 6.08:1 (AA) */
  .bg-sand-900 {
    background-color: var(--sand-900);
    color: var(--sand-50);
  } /* Contrast: 7.90:1 (AAA) */
  .bg-sand-950 {
    background-color: var(--sand-950);
    color: var(--sand-50);
  } /* Contrast: 13.95:1 (AAA) */

  /* Slate backgrounds */
  .bg-slate-50 {
    background-color: var(--slate-50);
    color: var(--slate-950);
  } /* Contrast: 19.28:1 (AAA) */
  .bg-slate-100 {
    background-color: var(--slate-100);
    color: var(--slate-950);
  } /* Contrast: 18.41:1 (AAA) */
  .bg-slate-200 {
    background-color: var(--slate-200);
    color: var(--slate-950);
  } /* Contrast: 16.36:1 (AAA) */
  .bg-slate-300 {
    background-color: var(--slate-300);
    color: var(--slate-950);
  } /* Contrast: 13.59:1 (AAA) */
  .bg-slate-400 {
    background-color: var(--slate-400);
    color: var(--slate-950);
  } /* Contrast: 7.87:1 (AAA) */
  .bg-slate-500 {
    background-color: var(--slate-500);
    color: var(--slate-50);
  } /* Contrast: 4.55:1 (AA) */
  .bg-slate-600 {
    background-color: var(--slate-600);
    color: var(--slate-50);
  } /* Contrast: 7.24:1 (AAA) */
  .bg-slate-700 {
    background-color: var(--slate-700);
    color: var(--slate-50);
  } /* Contrast: 9.90:1 (AAA) */
  .bg-slate-800 {
    background-color: var(--slate-800);
    color: var(--slate-50);
  } /* Contrast: 13.98:1 (AAA) */
  .bg-slate-900 {
    background-color: var(--slate-900);
    color: var(--slate-50);
  } /* Contrast: 17.06:1 (AAA) */
  .bg-slate-950 {
    background-color: var(--slate-950);
    color: var(--slate-50);
  } /* Contrast: 19.28:1 (AAA) */

  /* Stone backgrounds */
  .bg-stone-50 {
    background-color: var(--stone-50);
    color: var(--stone-950);
  } /* Contrast: 18.92:1 (AAA) */
  .bg-stone-100 {
    background-color: var(--stone-100);
    color: var(--stone-950);
  } /* Contrast: 18.11:1 (AAA) */
  .bg-stone-200 {
    background-color: var(--stone-200);
    color: var(--stone-950);
  } /* Contrast: 15.73:1 (AAA) */
  .bg-stone-300 {
    background-color: var(--stone-300);
    color: var(--stone-950);
  } /* Contrast: 13.26:1 (AAA) */
  .bg-stone-400 {
    background-color: var(--stone-400);
    color: var(--stone-950);
  } /* Contrast: 7.83:1 (AAA) */
  .bg-stone-500 {
    background-color: var(--stone-500);
    color: var(--stone-50);
  } /* Contrast: 4.59:1 (AA) */
  .bg-stone-600 {
    background-color: var(--stone-600);
    color: var(--stone-50);
  } /* Contrast: 7.30:1 (AAA) */
  .bg-stone-700 {
    background-color: var(--stone-700);
    color: var(--stone-50);
  } /* Contrast: 9.84:1 (AAA) */
  .bg-stone-800 {
    background-color: var(--stone-800);
    color: var(--stone-50);
  } /* Contrast: 14.52:1 (AAA) */
  .bg-stone-900 {
    background-color: var(--stone-900);
    color: var(--stone-50);
  } /* Contrast: 16.74:1 (AAA) */
  .bg-stone-950 {
    background-color: var(--stone-950);
    color: var(--stone-50);
  } /* Contrast: 18.92:1 (AAA) */

  /* Teal backgrounds */
  .bg-teal-50 {
    background-color: var(--teal-50);
    color: var(--teal-950);
  } /* Contrast: 13.87:1 (AAA) */
  .bg-teal-100 {
    background-color: var(--teal-100);
    color: var(--teal-950);
  } /* Contrast: 12.84:1 (AAA) */
  .bg-teal-200 {
    background-color: var(--teal-200);
    color: var(--teal-950);
  } /* Contrast: 11.48:1 (AAA) */
  .bg-teal-300 {
    background-color: var(--teal-300);
    color: var(--teal-950);
  } /* Contrast: 9.78:1 (AAA) */
  .bg-teal-400 {
    background-color: var(--teal-400);
    color: var(--teal-950);
  } /* Contrast: 7.77:1 (AAA) */
  .bg-teal-500 {
    background-color: var(--teal-500);
    color: var(--teal-950);
  } /* Contrast: 5.81:1 (AA) */
  .bg-teal-600 {
    background-color: var(--teal-600);
    color: var(--teal-950);
  } /* Contrast: 3.86:1 (Fail) */
  .bg-teal-700 {
    background-color: var(--teal-700);
    color: var(--teal-50);
  } /* Contrast: 5.25:1 (AA) */
  .bg-teal-800 {
    background-color: var(--teal-800);
    color: var(--teal-50);
  } /* Contrast: 7.27:1 (AAA) */
  .bg-teal-900 {
    background-color: var(--teal-900);
    color: var(--teal-50);
  } /* Contrast: 9.09:1 (AAA) */
  .bg-teal-950 {
    background-color: var(--teal-950);
    color: var(--teal-50);
  } /* Contrast: 13.87:1 (AAA) */

  /* Terracotta backgrounds */
  .bg-terracotta-50 {
    background-color: var(--terracotta-50);
    color: var(--terracotta-950);
  } /* Contrast: 14.69:1 (AAA) */
  .bg-terracotta-100 {
    background-color: var(--terracotta-100);
    color: var(--terracotta-950);
  } /* Contrast: 13.53:1 (AAA) */
  .bg-terracotta-200 {
    background-color: var(--terracotta-200);
    color: var(--terracotta-950);
  } /* Contrast: 11.37:1 (AAA) */
  .bg-terracotta-300 {
    background-color: var(--terracotta-300);
    color: var(--terracotta-950);
  } /* Contrast: 8.89:1 (AAA) */
  .bg-terracotta-400 {
    background-color: var(--terracotta-400);
    color: var(--terracotta-950);
  } /* Contrast: 6.33:1 (AA) */
  .bg-terracotta-500 {
    background-color: var(--terracotta-500);
    color: var(--terracotta-950);
  } /* Contrast: 4.77:1 (AA) */
  .bg-terracotta-600 {
    background-color: var(--terracotta-600);
    color: var(--terracotta-50);
  } /* Contrast: 4.07:1 (Fail) */
  .bg-terracotta-700 {
    background-color: var(--terracotta-700);
    color: var(--terracotta-50);
  } /* Contrast: 5.57:1 (AA) */
  .bg-terracotta-800 {
    background-color: var(--terracotta-800);
    color: var(--terracotta-50);
  } /* Contrast: 7.19:1 (AAA) */
  .bg-terracotta-900 {
    background-color: var(--terracotta-900);
    color: var(--terracotta-50);
  } /* Contrast: 8.87:1 (AAA) */
  .bg-terracotta-950 {
    background-color: var(--terracotta-950);
    color: var(--terracotta-50);
  } /* Contrast: 14.69:1 (AAA) */

  /* Tumbleweed backgrounds */
  .bg-tumbleweed-50 {
    background-color: var(--tumbleweed-50);
    color: var(--tumbleweed-950);
  } /* Contrast: 14.29:1 (AAA) */
  .bg-tumbleweed-100 {
    background-color: var(--tumbleweed-100);
    color: var(--tumbleweed-950);
  } /* Contrast: 13.24:1 (AAA) */
  .bg-tumbleweed-200 {
    background-color: var(--tumbleweed-200);
    color: var(--tumbleweed-950);
  } /* Contrast: 11.17:1 (AAA) */
  .bg-tumbleweed-300 {
    background-color: var(--tumbleweed-300);
    color: var(--tumbleweed-950);
  } /* Contrast: 8.80:1 (AAA) */
  .bg-tumbleweed-400 {
    background-color: var(--tumbleweed-400);
    color: var(--tumbleweed-950);
  } /* Contrast: 6.44:1 (AA) */
  .bg-tumbleweed-500 {
    background-color: var(--tumbleweed-500);
    color: var(--tumbleweed-950);
  } /* Contrast: 4.89:1 (AA) */
  .bg-tumbleweed-600 {
    background-color: var(--tumbleweed-600);
    color: var(--tumbleweed-950);
  } /* Contrast: 3.92:1 (Fail) */
  .bg-tumbleweed-700 {
    background-color: var(--tumbleweed-700);
    color: var(--tumbleweed-50);
  } /* Contrast: 5.06:1 (AA) */
  .bg-tumbleweed-800 {
    background-color: var(--tumbleweed-800);
    color: var(--tumbleweed-50);
  } /* Contrast: 6.75:1 (AA) */
  .bg-tumbleweed-900 {
    background-color: var(--tumbleweed-900);
    color: var(--tumbleweed-50);
  } /* Contrast: 8.62:1 (AAA) */
  .bg-tumbleweed-950 {
    background-color: var(--tumbleweed-950);
    color: var(--tumbleweed-50);
  } /* Contrast: 14.29:1 (AAA) */

  /* Zinc backgrounds */
  .bg-zinc-50 {
    background-color: var(--zinc-50);
    color: var(--zinc-950);
  } /* Contrast: 19.06:1 (AAA) */
  .bg-zinc-100 {
    background-color: var(--zinc-100);
    color: var(--zinc-950);
  } /* Contrast: 18.10:1 (AAA) */
  .bg-zinc-200 {
    background-color: var(--zinc-200);
    color: var(--zinc-950);
  } /* Contrast: 15.68:1 (AAA) */
  .bg-zinc-300 {
    background-color: var(--zinc-300);
    color: var(--zinc-950);
  } /* Contrast: 13.46:1 (AAA) */
  .bg-zinc-400 {
    background-color: var(--zinc-400);
    color: var(--zinc-950);
  } /* Contrast: 7.76:1 (AAA) */
  .bg-zinc-500 {
    background-color: var(--zinc-500);
    color: var(--zinc-50);
  } /* Contrast: 4.63:1 (AA) */
  .bg-zinc-600 {
    background-color: var(--zinc-600);
    color: var(--zinc-50);
  } /* Contrast: 7.41:1 (AAA) */
  .bg-zinc-700 {
    background-color: var(--zinc-700);
    color: var(--zinc-50);
  } /* Contrast: 10.01:1 (AAA) */
  .bg-zinc-800 {
    background-color: var(--zinc-800);
    color: var(--zinc-50);
  } /* Contrast: 14.27:1 (AAA) */
  .bg-zinc-900 {
    background-color: var(--zinc-900);
    color: var(--zinc-50);
  } /* Contrast: 16.97:1 (AAA) */
  .bg-zinc-950 {
    background-color: var(--zinc-950);
    color: var(--zinc-50);
  } /* Contrast: 19.06:1 (AAA) */
}
/* ==================================
   EXTENDED COLOR PALETTE (OPTIONAL)
   15 color families - include only if needed
   ================================== */
@layer tokens {
  :root {
    /* WARM COLORS */

    /* Terracotta (Burnt Orange) */
    --terracotta-50: #fef6f3;
    --terracotta-100: #fcebe4;
    --terracotta-200: #f9d4c4;
    --terracotta-300: #f4b59a;
    --terracotta-400: #ed8b68;
    --terracotta-500: #e56843;
    --terracotta-600: #d24d2e;
    --terracotta-700: #af3e24;
    --terracotta-800: #903623;
    --terracotta-900: #753122;
    --terracotta-950: #3f170f;

    /* Tumbleweed (Sandy Beige) */
    --tumbleweed-50: #faf8f5;
    --tumbleweed-100: #f4efe7;
    --tumbleweed-200: #e7dcc9;
    --tumbleweed-300: #d6c3a4;
    --tumbleweed-400: #c3a47c;
    --tumbleweed-500: #b38b5f;
    --tumbleweed-600: #a67853;
    --tumbleweed-700: #8a6246;
    --tumbleweed-800: #70513e;
    --tumbleweed-900: #5b4334;
    --tumbleweed-950: #31231a;

    /* Sand (Warm Taupe) */
    --sand-50: #faf9f7;
    --sand-100: #f3f1ed;
    --sand-200: #e6e1d9;
    --sand-300: #d4cbbe;
    --sand-400: #bfb09d;
    --sand-500: #a99583;
    --sand-600: #9d8576;
    --sand-700: #836f63;
    --sand-800: #6b5c54;
    --sand-900: #574c46;
    --sand-950: #2e2723;

    /* Cinnabar (Warm Red) */
    --cinnabar-50: #fef3f2;
    --cinnabar-100: #fde4e2;
    --cinnabar-200: #fbcdca;
    --cinnabar-300: #f7aaa5;
    --cinnabar-400: #f17b72;
    --cinnabar-500: #e55147;
    --cinnabar-600: #d2362b;
    --cinnabar-700: #b02a21;
    --cinnabar-800: #92271f;
    --cinnabar-900: #782720;
    --cinnabar-950: #41100c;

    /* COOL COLORS */

    /* Slate (Cool Blue-Gray) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Cerulean (Sky Blue) */
    --cerulean-50: #f0f9ff;
    --cerulean-100: #e0f2fe;
    --cerulean-200: #bae6fd;
    --cerulean-300: #7dd3fc;
    --cerulean-400: #38bdf8;
    --cerulean-500: #0ea5e9;
    --cerulean-600: #0284c7;
    --cerulean-700: #0369a1;
    --cerulean-800: #075985;
    --cerulean-900: #0c4a6e;
    --cerulean-950: #082f49;

    /* Teal (Blue-Green) */
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
    --teal-950: #042f2e;

    /* Fern (Forest Green) */
    --fern-50: #f0fdf4;
    --fern-100: #dcfce7;
    --fern-200: #bbf7d0;
    --fern-300: #86efac;
    --fern-400: #4ade80;
    --fern-500: #22c55e;
    --fern-600: #16a34a;
    --fern-700: #15803d;
    --fern-800: #166534;
    --fern-900: #14532d;
    --fern-950: #052e16;

    /* Amethyst (Purple) */
    --amethyst-50: #faf5ff;
    --amethyst-100: #f3e8ff;
    --amethyst-200: #e9d5ff;
    --amethyst-300: #d8b4fe;
    --amethyst-400: #c084fc;
    --amethyst-500: #a855f7;
    --amethyst-600: #9333ea;
    --amethyst-700: #7e22ce;
    --amethyst-800: #6b21a8;
    --amethyst-900: #581c87;
    --amethyst-950: #3b0764;

    /* Indigo (Deep Blue-Purple) */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;
    --indigo-950: #1e1b4b;

    /* NEUTRALS */

    /* Stone (Warm Gray) */
    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;

    /* Zinc (Cool Gray) */
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
  }
}
/* Color utility classes */
@layer utilities {
  /* NOTE: Background utilities (.bg-*) are auto-generated in _auto-colors.css */

  /* with automatic text colors based on WCAG contrast calculations */

  /* Common text color utilities for manual override */
  .text-terracotta-600 { color: var(--terracotta-600); }
  .text-terracotta-800 { color: var(--terracotta-800); }
  .text-sand-600 { color: var(--sand-600); }
  .text-fern-600 { color: var(--fern-600); }
  .text-fern-700 { color: var(--fern-700); }
  .text-fern-800 { color: var(--fern-800); }
  .text-cinnabar-600 { color: var(--cinnabar-600); }
  .text-cinnabar-700 { color: var(--cinnabar-700); }
  .text-cinnabar-800 { color: var(--cinnabar-800); }
  .text-cerulean-600 { color: var(--cerulean-600); }
  .text-cerulean-800 { color: var(--cerulean-800); }
  .text-cocoa-600 { color: var(--cocoa-600); }
  .text-cocoa-800 { color: var(--cocoa-800); }
  .text-cocoa-900 { color: var(--cocoa-900); }
  .text-slate-500 { color: var(--slate-500); }
  .text-slate-600 { color: var(--slate-600); }
  .text-teal-600 { color: var(--teal-600); }
  .text-amethyst-600 { color: var(--amethyst-600); }
  .text-indigo-600 { color: var(--indigo-600); }
  .text-neutral-500 { color: var(--neutral-500); }
  .text-stone-600 { color: var(--stone-600); }
  .text-zinc-600 { color: var(--zinc-600); }

  /* Common border color utilities */
  .border-terracotta-500 { border-color: var(--terracotta-500); }
  .border-sand-200 { border-color: var(--sand-200); }
  .border-fern-500 { border-color: var(--fern-500); }
  .border-cinnabar-500 { border-color: var(--cinnabar-500); }
  .border-cerulean-200 { border-color: var(--cerulean-200); }
  .border-cerulean-600 { border-color: var(--cerulean-600); }
  .border-cocoa-200 { border-color: var(--cocoa-200); }
  .border-cocoa-300 { border-color: var(--cocoa-300); }

  /* SVG Fill utilities for brand colors */
  .fill-terracotta-600 { fill: var(--terracotta-600); }
  .fill-terracotta-800 { fill: var(--terracotta-800); }
  .fill-sand-600 { fill: var(--sand-600); }
  .fill-fern-600 { fill: var(--fern-600); }
  .fill-fern-700 { fill: var(--fern-700); }
  .fill-fern-800 { fill: var(--fern-800); }
  .fill-cinnabar-600 { fill: var(--cinnabar-600); }
  .fill-cinnabar-700 { fill: var(--cinnabar-700); }
  .fill-cinnabar-800 { fill: var(--cinnabar-800); }
  .fill-cerulean-600 { fill: var(--cerulean-600); }
  .fill-cerulean-800 { fill: var(--cerulean-800); }
  .fill-cocoa-600 { fill: var(--cocoa-600); }
  .fill-cocoa-800 { fill: var(--cocoa-800); }
  .fill-cocoa-900 { fill: var(--cocoa-900); }
  .fill-slate-500 { fill: var(--slate-500); }
  .fill-slate-600 { fill: var(--slate-600); }
  .fill-teal-600 { fill: var(--teal-600); }
  .fill-amethyst-600 { fill: var(--amethyst-600); }
  .fill-indigo-600 { fill: var(--indigo-600); }
  .fill-neutral-500 { fill: var(--neutral-500); }
  .fill-stone-600 { fill: var(--stone-600); }
  .fill-zinc-600 { fill: var(--zinc-600); }

  /* SVG Stroke utilities for brand colors */
  .stroke-terracotta-600 { stroke: var(--terracotta-600); }
  .stroke-terracotta-800 { stroke: var(--terracotta-800); }
  .stroke-sand-600 { stroke: var(--sand-600); }
  .stroke-fern-600 { stroke: var(--fern-600); }
  .stroke-fern-700 { stroke: var(--fern-700); }
  .stroke-fern-800 { stroke: var(--fern-800); }
  .stroke-cinnabar-600 { stroke: var(--cinnabar-600); }
  .stroke-cinnabar-700 { stroke: var(--cinnabar-700); }
  .stroke-cinnabar-800 { stroke: var(--cinnabar-800); }
  .stroke-cerulean-600 { stroke: var(--cerulean-600); }
  .stroke-cerulean-800 { stroke: var(--cerulean-800); }
  .stroke-cocoa-600 { stroke: var(--cocoa-600); }
  .stroke-cocoa-800 { stroke: var(--cocoa-800); }
  .stroke-cocoa-900 { stroke: var(--cocoa-900); }
  .stroke-slate-500 { stroke: var(--slate-500); }
  .stroke-slate-600 { stroke: var(--slate-600); }
  .stroke-teal-600 { stroke: var(--teal-600); }
  .stroke-amethyst-600 { stroke: var(--amethyst-600); }
  .stroke-indigo-600 { stroke: var(--indigo-600); }
  .stroke-neutral-500 { stroke: var(--neutral-500); }
  .stroke-stone-600 { stroke: var(--stone-600); }
  .stroke-zinc-600 { stroke: var(--zinc-600); }
}
/* CSS Layers - Cascade Control */
/* Frontend activation class */
.frontend {
  /* Framework is active */
}