/**
 * Runtime Brand Palette v2 (Multi-Brand Tenant Theming)
 * Generated by @pulwave/tokens v0.1.0
 * Brands: 3, Shades per brand: 11
 * Interaction states per brand: 4
 * Semantic mappings per brand: 13
 *
 * Features:
 * - Multi-brand support: configured brand roles
 * - 15-shade palette per brand using relative color syntax
 * - Interaction states (hover/active/focus/disabled) via color-mix()
 * - Authored runtime defaults for configured seed values
 * - Zero CSS growth per tenant (one --brand-* variable per configured role)
 *
 * Usage: Set the configured --brand-* variables on :root, or rely on the
 * authored defaults from source/brand/*.tokens.json. ThemeProvider can
 * override any configured role explicitly.
 *
 * Browser support: Chrome 120+, Safari 17.2+, Firefox 117+ (~89% global).
 * Falls back to static brand preset tokens when unavailable.
 *
 * ThemeProvider sets brand colors from tenant config:
 *   <ThemeProvider
 *     brandVariables={{
 *       "--brand-primary": "#2B5F3B",
 *       "--brand-secondary": "#5B2B5F",
 *       "--brand-tertiary": "#5F3B2B",
 *     }}
 *   />
 *
 * @see https://web.dev/articles/baseline-in-action-color-theme
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
 */

@layer tokens.foundation {
:root {
  /* Authored brand defaults */
  --brand-primary: oklch(0.62 0.22 160);
  --brand-secondary: oklch(0.67 0.187 280);
  --brand-tertiary: oklch(0.59 0.165 40);

  --relative-color-support-test: 0;
  /* PRIMARY BRAND brand palette */
  /* Source: --brand-primary (authored default or ThemeProvider override) */

  /* Interaction states via color-mix() */
  --brand-primary-hover: color-mix(in oklch, var(--brand-primary) 90%, black); /* Hover state (10% darker) */
  --brand-primary-active: color-mix(in oklch, var(--brand-primary) 85%, black); /* Active/pressed state (15% darker) */
  --brand-primary-focus: color-mix(in oklch, var(--brand-primary) 95%, white); /* Focus ring (5% lighter) */
  --brand-primary-disabled: color-mix(in oklch, var(--brand-primary) 50%, transparent); /* Disabled state (50% opacity) */

  /* Semantic color mappings */
  --color-primary-primary-default: var(--brand-primary-500); /* Primary brand color */
  --color-primary-primary-hover: var(--brand-primary-hover); /* Hover state via color-mix */
  --color-primary-primary-active: var(--brand-primary-active); /* Active/pressed state via color-mix */
  --color-primary-primary-focus: var(--brand-primary-focus); /* Focus state via color-mix */
  --color-primary-primary-disabled: var(--brand-primary-disabled); /* Disabled state via color-mix */
  --color-primary-surface-subtle: var(--brand-primary-50); /* Subtle brand surface */
  --color-primary-surface-muted: var(--brand-primary-100); /* Muted brand surface */

  /* SECONDARY BRAND brand palette */
  /* Source: --brand-secondary (authored default or ThemeProvider override) */

  /* Interaction states via color-mix() */
  --brand-secondary-hover: color-mix(in oklch, var(--brand-secondary) 90%, black); /* Hover state (10% darker) */
  --brand-secondary-active: color-mix(in oklch, var(--brand-secondary) 85%, black); /* Active/pressed state (15% darker) */
  --brand-secondary-focus: color-mix(in oklch, var(--brand-secondary) 95%, white); /* Focus ring (5% lighter) */
  --brand-secondary-disabled: color-mix(in oklch, var(--brand-secondary) 50%, transparent); /* Disabled state (50% opacity) */

  /* Semantic color mappings */
  --color-secondary-primary-default: var(--brand-secondary-500); /* Primary brand color */
  --color-secondary-primary-hover: var(--brand-secondary-hover); /* Hover state via color-mix */
  --color-secondary-primary-active: var(--brand-secondary-active); /* Active/pressed state via color-mix */
  --color-secondary-primary-focus: var(--brand-secondary-focus); /* Focus state via color-mix */
  --color-secondary-primary-disabled: var(--brand-secondary-disabled); /* Disabled state via color-mix */
  --color-secondary-surface-subtle: var(--brand-secondary-50); /* Subtle brand surface */
  --color-secondary-surface-muted: var(--brand-secondary-100); /* Muted brand surface */

  /* TERTIARY BRAND brand palette */
  /* Source: --brand-tertiary (authored default or ThemeProvider override) */

  /* Interaction states via color-mix() */
  --brand-tertiary-hover: color-mix(in oklch, var(--brand-tertiary) 90%, black); /* Hover state (10% darker) */
  --brand-tertiary-active: color-mix(in oklch, var(--brand-tertiary) 85%, black); /* Active/pressed state (15% darker) */
  --brand-tertiary-focus: color-mix(in oklch, var(--brand-tertiary) 95%, white); /* Focus ring (5% lighter) */
  --brand-tertiary-disabled: color-mix(in oklch, var(--brand-tertiary) 50%, transparent); /* Disabled state (50% opacity) */

  /* Semantic color mappings */
  --color-tertiary-primary-default: var(--brand-tertiary-500); /* Primary brand color */
  --color-tertiary-primary-hover: var(--brand-tertiary-hover); /* Hover state via color-mix */
  --color-tertiary-primary-active: var(--brand-tertiary-active); /* Active/pressed state via color-mix */
  --color-tertiary-primary-focus: var(--brand-tertiary-focus); /* Focus state via color-mix */
  --color-tertiary-primary-disabled: var(--brand-tertiary-disabled); /* Disabled state via color-mix */
  --color-tertiary-surface-subtle: var(--brand-tertiary-50); /* Subtle brand surface */
  --color-tertiary-surface-muted: var(--brand-tertiary-100); /* Muted brand surface */

}

@supports not (color: oklch(from var(--relative-color-support-test) l c h)) {
  :root {
    /* Fallback-first ordering: color-mix() baseline declarations */
    /* PRIMARY BRAND shade fallback */
    --brand-primary-50: color-mix(in oklch, var(--brand-primary) 8%, white); /* Lightest tint */
    --brand-primary-100: color-mix(in oklch, var(--brand-primary) 16%, white); /* Very light */
    --brand-primary-200: color-mix(in oklch, var(--brand-primary) 30%, white); /* Light */
    --brand-primary-300: color-mix(in oklch, var(--brand-primary) 45%, white); /* Light-medium */
    --brand-primary-400: color-mix(in oklch, var(--brand-primary) 65%, white); /* Medium-light */
    --brand-primary-500: var(--brand-primary); /* Base (unchanged) */
    --brand-primary-600: color-mix(in oklch, var(--brand-primary) 85%, black); /* Slightly dark */
    --brand-primary-700: color-mix(in oklch, var(--brand-primary) 70%, black); /* Dark */
    --brand-primary-800: color-mix(in oklch, var(--brand-primary) 55%, black); /* Very dark */
    --brand-primary-900: color-mix(in oklch, var(--brand-primary) 40%, black); /* Darkest */
    --brand-primary-950: color-mix(in oklch, var(--brand-primary) 25%, black); /* Near-black */

    --color-primary-text-on-primary: var(--brand-primary-50); /* Light text on brand bg */
    --color-primary-text-on-primary-dark: var(--brand-primary-950); /* Dark text on brand bg */
    --color-primary-alpha-10: color-mix(in oklch, var(--brand-primary) 10%, transparent); /* 10% brand overlay */
    --color-primary-alpha-20: color-mix(in oklch, var(--brand-primary) 20%, transparent); /* 20% brand overlay */
    --color-primary-alpha-30: color-mix(in oklch, var(--brand-primary) 30%, transparent); /* 30% brand overlay */
    --color-primary-border-focus: var(--brand-primary-focus); /* Focus ring color */

    /* SECONDARY BRAND shade fallback */
    --brand-secondary-50: color-mix(in oklch, var(--brand-secondary) 8%, white); /* Lightest tint */
    --brand-secondary-100: color-mix(in oklch, var(--brand-secondary) 16%, white); /* Very light */
    --brand-secondary-200: color-mix(in oklch, var(--brand-secondary) 30%, white); /* Light */
    --brand-secondary-300: color-mix(in oklch, var(--brand-secondary) 45%, white); /* Light-medium */
    --brand-secondary-400: color-mix(in oklch, var(--brand-secondary) 65%, white); /* Medium-light */
    --brand-secondary-500: var(--brand-secondary); /* Base (unchanged) */
    --brand-secondary-600: color-mix(in oklch, var(--brand-secondary) 85%, black); /* Slightly dark */
    --brand-secondary-700: color-mix(in oklch, var(--brand-secondary) 70%, black); /* Dark */
    --brand-secondary-800: color-mix(in oklch, var(--brand-secondary) 55%, black); /* Very dark */
    --brand-secondary-900: color-mix(in oklch, var(--brand-secondary) 40%, black); /* Darkest */
    --brand-secondary-950: color-mix(in oklch, var(--brand-secondary) 25%, black); /* Near-black */

    --color-secondary-text-on-primary: var(--brand-secondary-50); /* Light text on brand bg */
    --color-secondary-text-on-primary-dark: var(--brand-secondary-950); /* Dark text on brand bg */
    --color-secondary-alpha-10: color-mix(in oklch, var(--brand-secondary) 10%, transparent); /* 10% brand overlay */
    --color-secondary-alpha-20: color-mix(in oklch, var(--brand-secondary) 20%, transparent); /* 20% brand overlay */
    --color-secondary-alpha-30: color-mix(in oklch, var(--brand-secondary) 30%, transparent); /* 30% brand overlay */
    --color-secondary-border-focus: var(--brand-secondary-focus); /* Focus ring color */

    /* TERTIARY BRAND shade fallback */
    --brand-tertiary-50: color-mix(in oklch, var(--brand-tertiary) 8%, white); /* Lightest tint */
    --brand-tertiary-100: color-mix(in oklch, var(--brand-tertiary) 16%, white); /* Very light */
    --brand-tertiary-200: color-mix(in oklch, var(--brand-tertiary) 30%, white); /* Light */
    --brand-tertiary-300: color-mix(in oklch, var(--brand-tertiary) 45%, white); /* Light-medium */
    --brand-tertiary-400: color-mix(in oklch, var(--brand-tertiary) 65%, white); /* Medium-light */
    --brand-tertiary-500: var(--brand-tertiary); /* Base (unchanged) */
    --brand-tertiary-600: color-mix(in oklch, var(--brand-tertiary) 85%, black); /* Slightly dark */
    --brand-tertiary-700: color-mix(in oklch, var(--brand-tertiary) 70%, black); /* Dark */
    --brand-tertiary-800: color-mix(in oklch, var(--brand-tertiary) 55%, black); /* Very dark */
    --brand-tertiary-900: color-mix(in oklch, var(--brand-tertiary) 40%, black); /* Darkest */
    --brand-tertiary-950: color-mix(in oklch, var(--brand-tertiary) 25%, black); /* Near-black */

    --color-tertiary-text-on-primary: var(--brand-tertiary-50); /* Light text on brand bg */
    --color-tertiary-text-on-primary-dark: var(--brand-tertiary-950); /* Dark text on brand bg */
    --color-tertiary-alpha-10: color-mix(in oklch, var(--brand-tertiary) 10%, transparent); /* 10% brand overlay */
    --color-tertiary-alpha-20: color-mix(in oklch, var(--brand-tertiary) 20%, transparent); /* 20% brand overlay */
    --color-tertiary-alpha-30: color-mix(in oklch, var(--brand-tertiary) 30%, transparent); /* 30% brand overlay */
    --color-tertiary-border-focus: var(--brand-tertiary-focus); /* Focus ring color */

  }
}

@supports (color: oklch(from var(--relative-color-support-test) l c h)) {
  :root {
    /* Modern RCS declarations */
  /* 15-shade palette via relative color syntax */
  --brand-primary-50: oklch(from var(--brand-primary) 0.97 calc(c * 0.15) h); /* Lightest tint */
  --brand-primary-100: oklch(from var(--brand-primary) 0.93 calc(c * 0.25) h); /* Very light */
  --brand-primary-200: oklch(from var(--brand-primary) 0.87 calc(c * 0.40) h); /* Light */
  --brand-primary-300: oklch(from var(--brand-primary) 0.78 calc(c * 0.60) h); /* Light-medium */
  --brand-primary-400: oklch(from var(--brand-primary) 0.65 calc(c * 0.80) h); /* Medium-light */
  --brand-primary-500: var(--brand-primary); /* Base (unchanged) */
  --brand-primary-600: oklch(from var(--brand-primary) calc(l - 0.07) c h); /* Slightly dark */
  --brand-primary-700: oklch(from var(--brand-primary) calc(l - 0.14) c h); /* Dark */
  --brand-primary-800: oklch(from var(--brand-primary) calc(l - 0.21) c h); /* Very dark */
  --brand-primary-900: oklch(from var(--brand-primary) calc(l - 0.28) c h); /* Darkest */
  --brand-primary-950: oklch(from var(--brand-primary) calc(l - 0.33) calc(c * 0.8) h); /* Near-black */

  --color-primary-text-on-primary: oklch(from var(--brand-primary) 0.98 calc(c * 0.1) h); /* Light text on brand bg */
  --color-primary-text-on-primary-dark: oklch(from var(--brand-primary) 0.15 calc(c * 0.1) h); /* Dark text on brand bg */
  --color-primary-alpha-10: oklch(from var(--brand-primary) l c h / 0.1); /* 10% brand overlay */
  --color-primary-alpha-20: oklch(from var(--brand-primary) l c h / 0.2); /* 20% brand overlay */
  --color-primary-alpha-30: oklch(from var(--brand-primary) l c h / 0.3); /* 30% brand overlay */
  --color-primary-border-focus: oklch(from var(--brand-primary) calc(l + (1 - l) * 0.2) c h); /* Focus ring color */

  /* 15-shade palette via relative color syntax */
  --brand-secondary-50: oklch(from var(--brand-secondary) 0.97 calc(c * 0.15) h); /* Lightest tint */
  --brand-secondary-100: oklch(from var(--brand-secondary) 0.93 calc(c * 0.25) h); /* Very light */
  --brand-secondary-200: oklch(from var(--brand-secondary) 0.87 calc(c * 0.40) h); /* Light */
  --brand-secondary-300: oklch(from var(--brand-secondary) 0.78 calc(c * 0.60) h); /* Light-medium */
  --brand-secondary-400: oklch(from var(--brand-secondary) 0.65 calc(c * 0.80) h); /* Medium-light */
  --brand-secondary-500: var(--brand-secondary); /* Base (unchanged) */
  --brand-secondary-600: oklch(from var(--brand-secondary) calc(l - 0.07) c h); /* Slightly dark */
  --brand-secondary-700: oklch(from var(--brand-secondary) calc(l - 0.14) c h); /* Dark */
  --brand-secondary-800: oklch(from var(--brand-secondary) calc(l - 0.21) c h); /* Very dark */
  --brand-secondary-900: oklch(from var(--brand-secondary) calc(l - 0.28) c h); /* Darkest */
  --brand-secondary-950: oklch(from var(--brand-secondary) calc(l - 0.33) calc(c * 0.8) h); /* Near-black */

  --color-secondary-text-on-primary: oklch(from var(--brand-secondary) 0.98 calc(c * 0.1) h); /* Light text on brand bg */
  --color-secondary-text-on-primary-dark: oklch(from var(--brand-secondary) 0.15 calc(c * 0.1) h); /* Dark text on brand bg */
  --color-secondary-alpha-10: oklch(from var(--brand-secondary) l c h / 0.1); /* 10% brand overlay */
  --color-secondary-alpha-20: oklch(from var(--brand-secondary) l c h / 0.2); /* 20% brand overlay */
  --color-secondary-alpha-30: oklch(from var(--brand-secondary) l c h / 0.3); /* 30% brand overlay */
  --color-secondary-border-focus: oklch(from var(--brand-secondary) calc(l + (1 - l) * 0.2) c h); /* Focus ring color */

  /* 15-shade palette via relative color syntax */
  --brand-tertiary-50: oklch(from var(--brand-tertiary) 0.97 calc(c * 0.15) h); /* Lightest tint */
  --brand-tertiary-100: oklch(from var(--brand-tertiary) 0.93 calc(c * 0.25) h); /* Very light */
  --brand-tertiary-200: oklch(from var(--brand-tertiary) 0.87 calc(c * 0.40) h); /* Light */
  --brand-tertiary-300: oklch(from var(--brand-tertiary) 0.78 calc(c * 0.60) h); /* Light-medium */
  --brand-tertiary-400: oklch(from var(--brand-tertiary) 0.65 calc(c * 0.80) h); /* Medium-light */
  --brand-tertiary-500: var(--brand-tertiary); /* Base (unchanged) */
  --brand-tertiary-600: oklch(from var(--brand-tertiary) calc(l - 0.07) c h); /* Slightly dark */
  --brand-tertiary-700: oklch(from var(--brand-tertiary) calc(l - 0.14) c h); /* Dark */
  --brand-tertiary-800: oklch(from var(--brand-tertiary) calc(l - 0.21) c h); /* Very dark */
  --brand-tertiary-900: oklch(from var(--brand-tertiary) calc(l - 0.28) c h); /* Darkest */
  --brand-tertiary-950: oklch(from var(--brand-tertiary) calc(l - 0.33) calc(c * 0.8) h); /* Near-black */

  --color-tertiary-text-on-primary: oklch(from var(--brand-tertiary) 0.98 calc(c * 0.1) h); /* Light text on brand bg */
  --color-tertiary-text-on-primary-dark: oklch(from var(--brand-tertiary) 0.15 calc(c * 0.1) h); /* Dark text on brand bg */
  --color-tertiary-alpha-10: oklch(from var(--brand-tertiary) l c h / 0.1); /* 10% brand overlay */
  --color-tertiary-alpha-20: oklch(from var(--brand-tertiary) l c h / 0.2); /* 20% brand overlay */
  --color-tertiary-alpha-30: oklch(from var(--brand-tertiary) l c h / 0.3); /* 30% brand overlay */
  --color-tertiary-border-focus: oklch(from var(--brand-tertiary) calc(l + (1 - l) * 0.2) c h); /* Focus ring color */

  }
}
}