/*
 * Plain :root token sheet for non-Tailwind consumers (static HTML, Elysia start pages).
 * Mirrors the @theme block in brand.css — update both when adding or changing tokens.
 */

:root {
  /* Black and white */
  --brand-white: oklch(100% 0 0deg); /* #FFFFFF */
  --brand-black: oklch(0% 0 0deg); /* #000000 */

  /* ---------------------------------------------------------------- */
  /* Green                                                            */
  /* ---------------------------------------------------------------- */
  --brand-green-neutral: oklch(84.19% 0.0164 106.75deg); /* #CCCCC0 */
  --brand-green-neutral-dark: oklch(20% 0.0164 106.75deg); /* #17170e */
  --brand-green-pastel: oklch(95.75% 0.0495 107.3deg); /* #F4F4CE */
  --brand-green-tint: oklch(96.68% 0.127 115.67deg); /* #F0FF99 */
  --brand-green-primary: oklch(87.77% 0.1768 117.11deg); /* #CFE548 */
  --brand-green-earth: oklch(39.14% 0.0428 149.42deg); /* #354C39 */

  --brand-green-50: color-mix(in oklab, var(--brand-green-100) 50%, white 50%);
  --brand-green-100: var(--brand-green-pastel);
  --brand-green-200: var(--brand-green-neutral);
  --brand-green-300: var(--brand-green-tint);
  --brand-green-400: color-mix(in oklab, var(--brand-green-300) 50%, var(--brand-green-500) 50%);
  --brand-green-500: var(--brand-green-primary);
  --brand-green-600: color-mix(in oklab, var(--brand-green-500) 50%, var(--brand-green-700) 50%);
  --brand-green-700: var(--brand-green-earth);
  --brand-green-800: color-mix(in oklab, var(--brand-green-700) 50%, black 50%);
  --brand-green-900: color-mix(in oklab, var(--brand-green-700) 80%, black 20%);

  /* ---------------------------------------------------------------- */
  /* Purple                                                           */
  /* ---------------------------------------------------------------- */
  --brand-purple-neutral: oklch(81.71% 0.0139 286.09deg); /* #C2C2CC */
  --brand-purple-pastel: oklch(86.29% 0.0496 285.31deg); /* #CECEF2 */
  --brand-purple-tint: oklch(72.96% 0.1456 284.41deg); /* #9e99ff */
  --brand-purple-primary: oklch(54.41% 0.2288 289.91deg); /* #7546E8 */
  --brand-purple-earth: oklch(34.65% 0.0383 292.62deg); /* #3A364C */

  --brand-purple-50: color-mix(in oklab, var(--brand-purple-100) 50%, white 50%);
  --brand-purple-100: var(--brand-purple-pastel);
  --brand-purple-200: var(--brand-purple-neutral);
  --brand-purple-300: var(--brand-purple-tint);
  --brand-purple-400: color-mix(in oklab, var(--brand-purple-300) 50%, var(--brand-purple-500) 50%);
  --brand-purple-500: var(--brand-purple-primary);
  --brand-purple-600: color-mix(in oklab, var(--brand-purple-500) 50%, var(--brand-purple-700) 50%);
  --brand-purple-700: var(--brand-purple-earth);
  --brand-purple-800: color-mix(in oklab, var(--brand-purple-700) 50%, black 50%);
  --brand-purple-900: color-mix(in oklab, var(--brand-purple-700) 80%, black 20%);

  /* ---------------------------------------------------------------- */
  /* Blue                                                             */
  /* ---------------------------------------------------------------- */
  --brand-blue-neutral: oklch(83.49% 0.0072 219.57deg); /* #C4CACC */
  --brand-blue-pastel: oklch(91% 0.0283 222.3deg); /* #CEE6EF */
  --brand-blue-tint: oklch(87.48% 0.0827 224.91deg); /* #99E2FF */
  --brand-blue-primary: oklch(72.12% 0.1216 233.69deg); /* #48B1E5 */
  --brand-blue-earth: oklch(37.29% 0.0208 225.79deg); /* #354349 */

  --brand-blue-50: color-mix(in oklab, var(--brand-blue-100) 50%, white 50%);
  --brand-blue-100: var(--brand-blue-pastel);
  --brand-blue-200: var(--brand-blue-neutral);
  --brand-blue-300: var(--brand-blue-tint);
  --brand-blue-400: color-mix(in oklab, var(--brand-blue-300) 50%, var(--brand-blue-500) 50%);
  --brand-blue-500: var(--brand-blue-primary);
  --brand-blue-600: color-mix(in oklab, var(--brand-blue-500) 50%, var(--brand-blue-700) 50%);
  --brand-blue-700: var(--brand-blue-earth);
  --brand-blue-800: color-mix(in oklab, var(--brand-blue-700) 50%, black 50%);
  --brand-blue-900: color-mix(in oklab, var(--brand-blue-700) 80%, black 20%);

  /* Blue earth scale (success colors - derived from --brand-blue-earth) */
  --brand-blue-earth-50: color-mix(in oklab, var(--brand-blue-earth-100) 50%, white 50%);
  --brand-blue-earth-100: color-mix(in oklab, var(--brand-blue-earth) 30%, var(--brand-blue-pastel) 70%);
  --brand-blue-earth-200: color-mix(in oklab, var(--brand-blue-earth) 50%, var(--brand-blue-pastel) 50%);
  --brand-blue-earth-300: color-mix(in oklab, var(--brand-blue-earth) 70%, var(--brand-blue-pastel) 30%);
  --brand-blue-earth-400: color-mix(in oklab, var(--brand-blue-earth) 85%, var(--brand-blue-tint) 15%);
  --brand-blue-earth-500: color-mix(in oklab, var(--brand-blue-earth) 50%, var(--brand-blue-primary) 50%);
  --brand-blue-earth-600: color-mix(in oklab, var(--brand-blue-earth) 70%, var(--brand-blue-primary) 30%);
  --brand-blue-earth-700: var(--brand-blue-earth);
  --brand-blue-earth-800: color-mix(in oklab, var(--brand-blue-earth) 50%, black 50%);
  --brand-blue-earth-900: color-mix(in oklab, var(--brand-blue-earth) 80%, black 20%);

  /* ---------------------------------------------------------------- */
  /* Orange                                                           */
  /* ---------------------------------------------------------------- */
  --brand-orange-neutral: oklch(84% 0.0035 67.78deg); /* #CCCAC8 */
  --brand-orange-pastel: oklch(90.44% 0.0266 61.98deg); /* #EDDCCE */
  --brand-orange-tint: oklch(86.89% 0.0877 60.68deg); /* #FFC799 */
  --brand-orange-primary: oklch(71.88% 0.1294 57.82deg); /* #E08E4B */
  --brand-orange-earth: oklch(39.53% 0.0269 89.92deg); /* #4C4636 */

  --brand-orange-50: color-mix(in oklab, var(--brand-orange-100) 50%, white 50%);
  --brand-orange-100: var(--brand-orange-pastel);
  --brand-orange-200: var(--brand-orange-neutral);
  --brand-orange-300: var(--brand-orange-tint);
  --brand-orange-400: color-mix(in oklab, var(--brand-orange-300) 50%, var(--brand-orange-500) 50%);
  --brand-orange-500: var(--brand-orange-primary);
  --brand-orange-600: color-mix(in oklab, var(--brand-orange-500) 50%, var(--brand-orange-700) 50%);
  --brand-orange-700: var(--brand-orange-earth);
  --brand-orange-800: color-mix(in oklab, var(--brand-orange-700) 50%, black 50%);
  --brand-orange-900: color-mix(in oklab, var(--brand-orange-700) 80%, black 20%);

  /* ---------------------------------------------------------------- */
  /* Red                                                              */
  /* ---------------------------------------------------------------- */
  --brand-red-neutral: oklch(83.49% 0.0072 29deg); /* #CFC4C6 */
  --brand-red-pastel: oklch(91% 0.0283 28deg); /* #F5CED6 */
  --brand-red-tint: oklch(87.48% 0.0827 28deg); /* #FF99B2 */
  --brand-red-primary: oklch(72.12% 0.1216 28deg); /* #E5486B */
  --brand-red-earth: oklch(37.29% 0.0208 28deg); /* #49353A */

  --brand-red-50: color-mix(in oklab, var(--brand-red-100) 50%, white 50%);
  --brand-red-100: var(--brand-red-pastel);
  --brand-red-200: var(--brand-red-neutral);
  --brand-red-300: var(--brand-red-tint);
  --brand-red-400: color-mix(in oklab, var(--brand-red-300) 50%, var(--brand-red-500) 50%);
  --brand-red-500: var(--brand-red-primary);
  --brand-red-600: color-mix(in oklab, var(--brand-red-500) 50%, var(--brand-red-700) 50%);
  --brand-red-700: var(--brand-red-earth);
  --brand-red-800: color-mix(in oklab, var(--brand-red-700) 50%, black 50%);
  --brand-red-900: color-mix(in oklab, var(--brand-red-700) 80%, black 20%);

  /* ---------------------------------------------------------------- */
  /* Gray                                                             */
  /* ---------------------------------------------------------------- */
  --brand-gray-50: color-mix(in oklab, var(--brand-gray-100) 50%, white 50%);
  --brand-gray-100: oklch(94.01% 0 0deg); /* #ebebeb */
  --brand-gray-200: color-mix(in oklab, var(--brand-gray-100) 50%, var(--brand-gray-300) 50%);
  --brand-gray-300: oklch(84.52% 0 0deg); /* #cccccc */
  --brand-gray-400: color-mix(in oklab, var(--brand-gray-300) 50%, var(--brand-gray-500) 50%);
  --brand-gray-500: oklch(59.65% 0 0deg); /* #7f7f7f */
  --brand-gray-600: color-mix(in oklab, var(--brand-gray-500) 50%, var(--brand-gray-700) 50%);
  --brand-gray-700: oklch(32.11% 0 0deg); /* #333333 */
  --brand-gray-800: color-mix(in oklab, var(--brand-gray-700) 50%, var(--brand-gray-900) 50%);
  --brand-gray-900: oklch(21.34% 0 0deg); /* #191919 */
  --brand-gray-foreground: var(--brand-white);
  --brand-gray-default-foreground: var(--brand-black);

  /* ---------------------------------------------------------------- */
  /* Foreground scale (inverted gray for text hierarchy)              */
  /* ---------------------------------------------------------------- */
  --brand-foreground-50: oklch(0.9037 0 0); /* #dfdfdf */
  --brand-foreground-100: var(--brand-gray-900);
  --brand-foreground-200: var(--brand-gray-800);
  --brand-foreground-300: var(--brand-gray-700);
  --brand-foreground-400: var(--brand-gray-600);
  --brand-foreground-500: var(--brand-gray-500);
  --brand-foreground-600: var(--brand-gray-400);
  --brand-foreground-700: var(--brand-gray-300);
  --brand-foreground-800: var(--brand-gray-200);
  --brand-foreground-900: var(--brand-gray-100);
  --brand-foreground: var(--brand-white);
  --brand-default-foreground: var(--brand-black);

  /* ---------------------------------------------------------------- */
  /* Semantic: Pills                                                  */
  /* ---------------------------------------------------------------- */
  --brand-pill-background-default: var(--brand-green-pastel);
  --brand-pill-background-customer-service: var(--brand-purple-primary);
  --brand-pill-background-sales: var(--brand-orange-primary);
  --brand-pill-background-marketing: var(--brand-green-tint);
  --brand-pill-background-project-management: var(--brand-blue-tint);
  --brand-pill-background-field-service: var(--brand-orange-primary);

  --brand-pill-foreground-default: var(--brand-purple-earth);
  --brand-pill-foreground-customer-service: var(--brand-green-pastel);
  --brand-pill-foreground-sales: var(--brand-purple-earth);
  --brand-pill-foreground-marketing: var(--brand-green-earth);
  --brand-pill-foreground-project-management: var(--brand-orange-earth);
  --brand-pill-foreground-field-service: var(--brand-purple-earth);

  /* ---------------------------------------------------------------- */
  /* Semantic: Theme foreground (text on page background)             */
  /* ---------------------------------------------------------------- */
  --brand-foreground-marketing: var(--brand-gray-900);
  --brand-foreground-sales: var(--brand-gray-900);
  --brand-foreground-customer-service: var(--brand-gray-900);
  --brand-foreground-project-management: var(--brand-gray-900);
  --brand-foreground-field-service: var(--brand-gray-900);
  --brand-foreground-service: var(--brand-foreground-customer-service);
  --brand-foreground-delivery: var(--brand-foreground-project-management);

  /* Foreground for text on primary colors */
  --brand-blue-foreground: var(--brand-white);
  --brand-green-foreground: var(--brand-black);

  /* ---------------------------------------------------------------- */
  /* Semantic: Page backgrounds                                       */
  /* ---------------------------------------------------------------- */
  --brand-page-background-default: var(--brand-green-neutral);
  --brand-page-background-customer-service: var(--brand-green-pastel);
  --brand-page-background-sales: var(--brand-blue-pastel);
  --brand-page-background-marketing: var(--brand-purple-pastel);
  --brand-page-background-project-management: var(--brand-orange-pastel);
  --brand-page-background-field-service: var(--brand-purple-neutral);
  --brand-page-background-service: var(--brand-page-background-customer-service);
  --brand-page-background-delivery: var(--brand-page-background-project-management);

  /* ---------------------------------------------------------------- */
  /* Semantic: Borders and frames                                     */
  /* ---------------------------------------------------------------- */
  --brand-border-default: var(--brand-green-neutral);
  --brand-border-customer-service: var(--brand-green-neutral);
  --brand-border-sales: var(--brand-blue-tint);
  --brand-border-marketing: var(--brand-purple-pastel);
  --brand-border-project-management: var(--brand-orange-earth);
  --brand-border-field-service: var(--brand-green-tint);
  --brand-border-service: var(--brand-border-customer-service);
  --brand-border-delivery: var(--brand-border-project-management);

  /* ---------------------------------------------------------------- */
  /* Semantic: Image backgrounds and placeholders                     */
  /* ---------------------------------------------------------------- */
  --brand-image-background-default: var(--brand-green-earth);
  --brand-image-background-customer-service: var(--brand-green-pastel);
  --brand-image-background-sales: var(--brand-blue-pastel);
  --brand-image-background-marketing: var(--brand-purple-earth);
  --brand-image-background-project-management: var(--brand-orange-pastel);
  --brand-image-background-field-service: var(--brand-green-neutral);

  /* ---------------------------------------------------------------- */
  /* Neutral color combinations                                       */
  /* ---------------------------------------------------------------- */
  --neutral-green-pastel: var(--brand-green-pastel);
  --neutral-green-neutral: var(--brand-green-neutral);
  --neutral-purple-pastel: var(--brand-purple-pastel);
  --neutral-purple-neutral: var(--brand-purple-neutral);
  --neutral-blue-pastel: var(--brand-blue-pastel);
  --neutral-blue-neutral: var(--brand-blue-neutral);
  --neutral-orange-pastel: var(--brand-orange-pastel);
  --neutral-orange-neutral: var(--brand-orange-neutral);

  /* ---------------------------------------------------------------- */
  /* Harmony color combinations (CTA / attention)                     */
  /* ---------------------------------------------------------------- */
  --harmony-green-earth: var(--brand-green-earth);
  --harmony-green-tint: var(--brand-green-tint);
  --harmony-green-pastel: var(--brand-green-pastel);
  --harmony-purple-earth: var(--brand-purple-earth);
  --harmony-purple-tint: var(--brand-purple-tint);
  --harmony-purple-pastel: var(--brand-purple-pastel);
  --harmony-blue-earth: var(--brand-blue-earth);
  --harmony-blue-tint: var(--brand-blue-tint);
  --harmony-blue-pastel: var(--brand-blue-pastel);
  --harmony-orange-earth: var(--brand-orange-earth);
  --harmony-orange-tint: var(--brand-orange-tint);
  --harmony-orange-pastel: var(--brand-orange-pastel);

  /* ---------------------------------------------------------------- */
  /* Gradients                                                        */
  /* ---------------------------------------------------------------- */
  --gradient-green-primary-pastel-tint: linear-gradient(to right, var(--brand-green-primary), var(--brand-green-tint), var(--brand-green-pastel));
  --gradient-purple-primary-pastel-tint: linear-gradient(to right, var(--brand-purple-primary), var(--brand-purple-tint), var(--brand-purple-pastel));
  --gradient-blue-primary-pastel-tint: linear-gradient(to right, var(--brand-blue-primary), var(--brand-blue-tint), var(--brand-blue-pastel));
  --gradient-orange-primary-pastel-tint: linear-gradient(to right, var(--brand-orange-primary), var(--brand-orange-tint), var(--brand-orange-pastel));

  /* ---------------------------------------------------------------- */
  /* Shared layout tokens                                             */
  /* ---------------------------------------------------------------- */
  --font-size-base: 1rem;

  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 14px;

  --border-width-small: 1px;
  --border-width-medium: 2px;
  --border-width-large: 3px;

  --disabled-opacity: 0.5;

  --focus-ring-width: 2px;
  --focus-ring-offset-width: 2px;
  --focus-ring-offset-color: var(--brand-green-neutral);
  --focus-ring-color: var(--brand-green-neutral);
  --focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset-width) var(--focus-ring-offset-color);
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  --spacing-paragraph: 1rem;

  /*
   * Shared content UI — @workspace/shared-content-ui primitives (Card / CardBody / CardHeader)
   * Consumed via CSS variables in primitives; tune radius and spacing here for site-wide cards.
   */
  --radius-content-card: var(--radius-medium);
  --content-card-body-gap: 1rem;
  --content-card-body-padding: 1rem;

  /* Multi-card sections — row and column gap between cards (grid row-gap + column-gap) */
  --content-cards-section-gap: 3rem;
}