styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  a:not(.unstyled) {
    @apply underline decoration-ssw-gray-light decoration-1 transition duration-300 hover:border-sswRed hover:text-sswRed;
  }
  html,
  body {
    @apply scroll-smooth;
    /* see https://github.com/SSWConsulting/SSW.Website/issues/1147 */
    font-size: 18px;
  }
  h2.callToAction {
    @apply mx-auto mb-4 mt-4 w-fit pb-5 pt-15 text-4xl;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    @apply font-sans leading-tight;
  }

  h1 {
    @apply my-4 pb-5 pt-15 text-4xl;
  }

  h2 {
    @apply mb-2.5 mt-10 text-3xl;
  }

  h3 {
    @apply mb-0.5 mt-2.5 text-2xl;
  }

  h1 + h2 {
    @apply !mt-5;
  }

  small {
    @apply text-xs;
  }

  figure {
    @apply mb-4;
  }
  .theme {
    --color-billable: var(--billable);
    --color-text-strong: var(--text-strong);
    --color-text-weak: var(--text-weak);
    --color-text-brand: var(--text-brand);
    --color-text-disabled: var(--text-disabled);
    --color-text-error: var(--text-error);
    --color-text-warning: var(--text-warning);
    --color-text-success: var(--text-success);
    --color-text-information: var(--text-information);
    --color-stroke-strong: var(--stroke-strong);
    --color-stroke-weak: var(--stroke-weak);
    --color-fill-weak: var(--fill-weak);
    --color-fill-weaker: var(--fill-weaker);
    --color-background-base: var(--background-base);
    --color-background-sunken: var(--background-sunken);
    --color-background-raised: var(--background-raised);
    --color-background-overlay: var(--background-overlay);
    --shadow-raised: var(--shadow-raised);
    --shadow-overlay: var(--shadow-overlay);
    --font-family-body: var(--font-family-body);
    --font-family-heading: var(--font-family-heading);
    --font-family-mono: var(--font-family-mono);
    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
  }
  :root {
    --primary: hsla(0, 58%, 53%, 1);
    --primary-foreground: hsla(0, 0%, 100%, 1);
    --secondary: hsla(0, 0%, 20%, 1);
    --secondary-foreground: hsla(0, 0%, 100%, 1);
    --billable: #01b8aa;
    --destructive: hsla(0, 72%, 51%, 1);
    --destructive-foreground: hsla(0, 0%, 100%, 1);
    --ring: hsla(0, 58%, 53%, 0.2);
    --text-strong: rgba(0, 0, 0, 0.9);
    --text-weak: rgba(0, 0, 0, 0.72);
    --text-brand: oklch(57.5% 0.176 24.5);
    --text-disabled: rgba(0, 0, 0, 0.1);
    --text-error: oklch(57.7% 0.215 27.3);
    --text-warning: hsla(42, 70%, 33%, 1);
    --text-success: hsla(162, 90%, 25%, 1);
    --text-information: hsla(262, 74%, 38%, 1);
    --stroke-strong: rgba(0, 0, 0, 0.45);
    --stroke-weak: rgba(0, 0, 0, 0.1);
    --hairline: #e5e7eb;
    --dot-color: rgba(0, 0, 0, 0.12);
    --home-nav-bg: #ffffff;
    --home-nav-border: #f2f2f2;
    --logo-filter: none;
    --fill-weak: rgba(0, 0, 0, 0.04);
    --fill-weaker: rgba(0, 0, 0, 0.02);
    --background-base: white;
    --background-sunken: #fafafa;
    --background-raised: white;
    --background-overlay: white;
    /* Matches the light-mode values consultingCard.tsx hardcodes
       (bg-gray-50 -> hover:bg-white). Filling these in changes no current
       rendering, since every bg-card / bg-card-hover usage today is
       dark:-guarded, but an unprefixed bg-card would otherwise resolve to
       nothing in light mode. */
    --card: #f9f9f9;
    --card-hover: #ffffff;
    --shadow-raised: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    --shadow-overlay: 0px 8px 8px 0px rgba(0, 0, 0, 0.04), 0px 20px 24px 0px rgba(0, 0, 0, 0.08);

    /* TinaCMS brand colours, not part of the SSW palette and not overridden in .dark. */
    --brand-tina-field: #c2360d; /* darkened for 5.49:1 white-text contrast */
    --brand-tina-field-hover: #cf3a0e; /* brightened as far as 4.5:1 allows */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --radius-sm: 4px;
    --radius-lg: 8px;
    --font-family-body: 'Inter', sans-serif;
    --font-family-heading: 'Inter', sans-serif;
    --font-family-mono: 'IBM Plex Mono', monospace;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-lg: 18px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --line-height-h1: 48px;
    --line-height-h2: 40px;
    --line-height-h3: 32px;
    --line-height-h4: 28px;
    --line-height-lg: 28px;
    --line-height-base: 24px;
    --line-height-sm: 20px;
    --line-height-xs: 16px;
    --letter-spacing-h1: -0.5px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --success: hsla(162, 90%, 25%, 1);
    --success-foreground: hsla(0, 0%, 100%, 1);
    --warning: hsla(42, 70%, 33%, 1);
    --warning-foreground: hsla(0, 0%, 100%, 1);
  }
  .dark {
    --primary: hsla(0, 58%, 53%, 1);
    --primary-foreground: hsla(0, 0%, 100%, 1);
    --secondary: hsla(0, 0%, 20%, 1);
    --secondary-foreground: hsla(0, 0%, 100%, 1);
    --billable: #01b8aa;
    --destructive: hsla(0, 72%, 51%, 1);
    --destructive-foreground: hsla(0, 0%, 100%, 1);
    --input: hsla(0, 0%, 100%, 0.2);
    --ring: hsla(0, 58%, 53%, 0.2);
    --text-strong: white;
    --text-weak: rgba(255, 255, 255, 0.78);
    --text-brand: oklch(57.5% 0.176 24.5);
    --text-disabled: rgba(255, 255, 255, 0.12);
    --text-error: hsla(0, 100%, 80%, 1);
    --text-warning: hsla(42, 65%, 66%, 1);
    --text-success: hsla(162, 41%, 62%, 1);
    --text-information: hsla(262, 45%, 75%, 1);
    --stroke-strong: rgba(255, 255, 255, 0.6);
    --stroke-weak: rgba(255, 255, 255, 0.12);
    --hairline: #212121;
    --dot-color: #212121;
    --home-nav-bg: #090909;
    --home-nav-border: rgba(255, 255, 255, 0.3);
    --logo-filter: brightness(0) invert(1);
    --fill-weak: rgba(255, 255, 255, 0.06);
    --fill-weaker: rgba(255, 255, 255, 0.03);
    --background-base: #171717;
    --background-sunken: black;
    --background-raised: #262626;
    --background-overlay: #44403c;
    --card: #101010;
    --card-hover: #151515;
    --shadow-raised: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    --shadow-overlay: 0px 8px 8px 0px rgba(0, 0, 0, 0.04), 0px 20px 24px 0px rgba(0, 0, 0, 0.08);
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --radius-sm: 4px;
    --radius-lg: 8px;
    --font-family-body: 'Inter', sans-serif;
    --font-family-heading: 'Inter', sans-serif;
    --font-family-mono: 'IBM Plex Mono', monospace;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-lg: 18px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --line-height-h1: 48px;
    --line-height-h2: 40px;
    --line-height-h3: 32px;
    --line-height-h4: 28px;
    --line-height-lg: 28px;
    --line-height-base: 24px;
    --line-height-sm: 20px;
    --line-height-xs: 16px;
    --letter-spacing-h1: -0.5px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --success: hsla(162, 41%, 62%, 1);
    --success-foreground: hsla(0, 0%, 9%, 1);
    --warning: hsla(42, 65%, 66%, 1);
    --warning-foreground: hsla(0, 0%, 9%, 1);
  }
}

@layer utilities {
  /* Hero scoop fill: light is the gray-50 section beneath the hero; dark is the
     section's configured hex (passed in via the --home-scoop-dark custom prop).
     Driven by the `.dark` class so it resolves on first paint — no theme flash. */
  .home-scoop-fill {
    fill: #f9f9f9;
  }
  .dark .home-scoop-fill {
    fill: var(--home-scoop-dark, #090909);
  }

  .mask-horizontal-fade {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

@layer components {
  .icon::before {
    @apply inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  a.done,
  button.done {
    @apply items-center justify-center rounded border-none bg-sswRed px-4 py-3 align-middle text-sm font-normal uppercase leading-[18px] text-white no-underline !outline-sswRed hover:!bg-sswDarkRed hover:!text-white;
  }

  a:hover:not(.unstyled) {
    @apply decoration-sswRed;
  }

  .m-icon {
    @apply mr-1;
  }

  .customTable table,
  .customTable th,
  .customTable td {
    border: 1px solid;
    padding: 8px;
  }

  .customTable li {
    list-style-type: square;
  }

  @media print {
    #chatbase-message-bubbles,
    #chatbase-bubble-button {
      display: none !important;
    }
    .no-print,
    .no-print * {
      display: none !important;
    }
    .pagebreak {
      page-break-before: always;
    }
  }
}