/* GENERATED by scripts/build.mjs — DO NOT EDIT.
 * .df-canvas-scoped design tokens + donation-form component classes for the
 * admin-ui theme-editor canvas. Source of truth: t2/t3 marker regions. */
.df-canvas {

  /*
   * Brand palette (plain :root copy) — KEEP IN SYNC with the @theme inline block above.
   * Tailwind v4 tree-shakes @theme inline variables for unused shades. This block
   * ensures all 10 shades are always available as CSS variables (e.g., var(--color-brand-200))
   * even if no utility references them.
   * See docs/frontend/branded-theme-tokens.md §Tailwind v4 tree-shaking caveat.
   */
  --color-brand-50:  oklch(from var(--brand) 0.97 0.02 h);
  --color-brand-100: oklch(from var(--brand) 0.93 0.04 h);
  --color-brand-200: oklch(from var(--brand) 0.87 0.06 h);
  --color-brand-300: oklch(from var(--brand) 0.78 0.09 h);
  --color-brand-400: oklch(from var(--brand) 0.65 0.14 h);
  --color-brand-500: oklch(from var(--brand) 0.55 0.18 h);
  --color-brand-600: oklch(from var(--brand) 0.47 0.17 h);
  --color-brand-700: oklch(from var(--brand) 0.39 0.15 h);
  --color-brand-800: oklch(from var(--brand) 0.32 0.12 h);
  --color-brand-900: oklch(from var(--brand) 0.25 0.10 h);

  --background: oklch(1 0 0);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --sidebar: oklch(from var(--brand) 0.985 0.003 h);
  --secondary: oklch(from var(--secondary-brand) 0.97 0.003 h);
  --muted: oklch(from var(--brand) 0.96 0.003 h);

  --foreground: oklch(from var(--brand) 0.125 0.015 h / 85%);
  --card-foreground: oklch(from var(--brand) 0.125 0.015 h / 85%);
  --popover-foreground: oklch(from var(--brand) 0.125 0.015 h / 85%);
  --secondary-foreground: oklch(from var(--secondary-brand) 0.205 0.015 h / 85%);
  --muted-foreground: oklch(from var(--brand) 0.125 0.005 h / 65%);
  --sidebar-foreground: oklch(from var(--brand) 0.125 0.015 h / 85%);

  --border: oklch(from var(--brand) 0.905 0.003 h);
  --input: oklch(from var(--brand) 0.905 0.003 h);
  --sidebar-border: oklch(from var(--brand) 0.922 0.004 h);
  --ring: oklch(from var(--brand) 0.65 0.04 h);
  --sidebar-ring: oklch(from var(--brand) 0.65 0.04 h);

  --primary: var(--brand);
  --primary-foreground: oklch(0.985 0 0);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --destructive: var(--color-red-600);
  --destructive-foreground: oklch(0.985 0 0);
  --success: var(--color-green-600);
  --success-foreground: oklch(0.985 0 0);
  --warning: var(--color-yellow-500);
  --warning-foreground: oklch(0.16 0 0);
  --info: var(--color-gray-500);
  --info-foreground: oklch(0.16 0 0);

  /* Primary intensities */
  --primary-light:      oklch(from var(--brand) 0.95 0.02 h);
  --primary-strong:     oklch(from var(--brand) 0.47 0.17 h);

  /* Campaign brand row (df layer only). Re-based on --campaign-brand so
     admin-ui can theme the df layer by setting one inline variable.
     --campaign-brand-normalized clamps lightness to L=0.55 (same as brand-500)
     so white foreground text meets WCAG 1.4.3 (≥ 4.5:1) structurally.
     The foreground is a fixed near-white; admins can override both from
     the Design drawer when the brand is too light for the default pairing. */
  --campaign-brand-normalized:       oklch(from var(--campaign-brand) 0.55 0.18 h);
  --campaign-brand-light:      oklch(from var(--campaign-brand) 0.95 0.02 h);
  --campaign-brand-strong:     oklch(from var(--campaign-brand) 0.47 0.17 h);
  --campaign-brand-foreground: oklch(0.985 0 0);

  /* Secondary intensities (derived from --secondary-brand) */
  --secondary-light:    oklch(from var(--secondary-brand) 0.985 0.002 h);
  --secondary-strong:   oklch(from var(--secondary-brand) 0.94 0.005 h);

  /* Status light + strong intensities */
  --destructive-light:  color-mix(in srgb, var(--destructive) 12%, transparent);
  --destructive-strong: var(--color-red-700);
  --success-light:      color-mix(in srgb, var(--success) 12%, transparent);
  --success-strong:     var(--color-green-700);
  --warning-light:      color-mix(in srgb, var(--warning) 12%, transparent);
  --warning-strong:     var(--color-yellow-600);
  --info-light:         color-mix(in srgb, var(--info) 12%, transparent);
  --info-strong:        var(--color-gray-600);

  /* CTA (blue action button) — hex base, variants derived via OKLCH. */
  --cta:            #0073E6;
  --cta-light:      oklch(from var(--cta) 0.93 0.04 h);
  --cta-strong:     oklch(from var(--cta) 0.47 0.17 h);
  --cta-foreground: oklch(0.985 0 0);

  /* Structural */
  --border-weak:        oklch(from var(--brand) 0.94 0.002 h);
  --border-separator:   oklch(from var(--brand) 0.87 0.003 h);
  --overlay:            rgba(0, 0, 0, 0.6);
  --card-hover:         oklch(from var(--brand) 0.97 0.002 h / 0.5);

  /* State */
  --state-hover:        oklch(from var(--brand) 0.97 0.002 h);
  --state-active:       oklch(from var(--brand) 0.94 0.003 h);
  --state-selected:     var(--primary-light);
  --state-disabled:     oklch(from var(--brand) 0.94 0.003 h);

  /* Surface — fixed neutral backgrounds for content areas.
     Decoupled from --brand (values are near-identical regardless of brand hue). */
  --surface-light:  #FFFFFF;
  --surface:        #F8FAFC;
  --surface-strong: #F0F7FF;

  /* Font families - Tailwind v4 expects --font-sans for font-sans utility */
  --font-inter: 'Inter', sans-serif;
  --font-freehand: 'Freehand', cursive;
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-family: var(--font-sans);

  /* Donation form typography */
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;

  /* Semantic colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Sidebar colors */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Border radius */
  --radius-donation-sm: 0.5rem;
  --radius-donation-md: 0.5625rem;
  --radius-donation-lg: 0.6875rem;

  /* Donation shadows */
  --shadow-donation-frame:
    0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.06), 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.06);
  --shadow-donation-option:
    0 0.0150625rem 0.0120625rem -0.0625rem rgb(0 0 0 / 0.06),
    0 0.125rem 0.1rem -0.125rem rgb(0 0 0 / 0.09);
  --shadow-donation-option-selected:
    0 15px 20px -4px rgb(0 0 0 / 3%), 0 6px 8px -5px rgb(0 0 0 / 4%);
  --shadow-donation-button:
    0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.04), 0 0.5rem 1rem 0 rgb(0 0 0 / 0.04);
  --shadow-donation-button-primary:
    0 0.125rem 0.125rem 0 var(--df-button-shadow-primary-color, rgb(0 0 0 / 0.04)),
    0 0.5rem 1rem 0 var(--df-button-shadow-primary-color, rgb(0 0 0 / 0.04));
  --shadow-donation-input:
    0 0.0150625rem 0.0120625rem -0.0625rem rgb(0 0 0 / 0.06),
    0 0.125rem 0.1rem -0.125rem rgb(0 0 0 / 0.09);
  --shadow-dedication-reminder-card:
    rgb(0 0 0 / 0.08) 0.008rem 0.016rem 0.012rem -0.0625rem,
    rgb(0 0 0 / 0.12) 0.0625rem 0.125rem 0.098rem -0.125rem,
    rgb(0 0 0 / 0.15) 0 0.023rem 0.059rem -0.078125rem,
    rgb(0 0 0 / 0.15) 0 0.1875rem 0.4875rem -0.15625rem;
  --shadow-donation-popover: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 0.05), 0 0.25rem 0.375rem -0.25rem rgb(0 0 0 / 0.05);
  --shadow-donation-tablist:
    0 0.0150625rem 0.0625rem 0.0120625rem rgb(0 0 0 / 0.06),
    0 0.125rem 0.1rem -0.125rem rgb(0 0 0 / 0.09);
  --shadow-dedication-collapsed: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.04);
  --shadow-dedication-active: 0 0.125rem 0.5rem rgb(0 0 0 / 0.08);

  /* Spacing */
  --spacing-container: 1.5rem;
  

  /* ── Tier 3: Component-specific tokens (overridable via campaign JSON) ──
     Defaults read from the --campaign-brand row. Solid surfaces that carry
     white foreground text use --campaign-brand-base (L=0.55 normalised) so
     contrast meets WCAG 1.4.3 structurally. See docs/tokens.md. */
  --df-content-bg:           var(--campaign-brand-light);
  --df-form-bg:              #ffffff;
  --df-button-bg:            var(--campaign-brand-normalized);
  --df-button-text:          var(--campaign-brand-foreground);
  --df-button-border:        var(--campaign-brand-strong);
  --df-button-border-width:  1px;
  --df-progress-bg:          var(--campaign-brand-normalized);
  --df-selection:            var(--campaign-brand-normalized);
  --df-selection-border:     var(--campaign-brand-strong);
  --df-selection-foreground: var(--campaign-brand-foreground);
  --df-confetti-fill:        #ea4275;

  /* ── Derived tokens (computed from Tier 3, not directly overridable) ── */
  --df-button-hover: color-mix(in srgb, var(--df-button-bg) 88%, #000000);
  --df-button-shadow-alpha: 100%;
  --df-button-shadow-primary-color: color-mix(
    in oklab,
    color-mix(in oklab, var(--df-button-bg) 9%, transparent)
      var(--df-button-shadow-alpha),
    rgb(0 0 0 / 28%)
  );
  --df-progress-inactive: color-mix(in srgb, var(--df-progress-bg) 20%, transparent);
  --df-selection-light: color-mix(in srgb, var(--df-selection) 9%, transparent);
  --df-confetti-accent-border: color-mix(in srgb, var(--df-confetti-fill) 78%, #000000);
  --df-backdrop: color-mix(in srgb, var(--muted) 72%, #000000 18%);
  --df-frame-shadow: var(--shadow-donation-frame);

  /* Part 4: creative widget tokens kept as-is */
  --df-custom-creative-widget-carousel-background: #ffffff;
  --df-custom-creative-widget-carousel-heading: #171428;
  --df-custom-creative-widget-carousel-description: #7f7798;
  --df-custom-creative-widget-floating-button-background: #000000;
  --df-custom-creative-widget-floating-button-foreground: #ffffff;

  --df-creative-widget-carousel-background: var(--background);
  --df-creative-widget-carousel-heading: var(--foreground);
  --df-creative-widget-carousel-description: var(--muted-foreground);
  --df-creative-widget-floating-button-background: var(
    --df-custom-creative-widget-floating-button-background
  );
  --df-creative-widget-floating-button-foreground: var(
    --df-custom-creative-widget-floating-button-foreground
  );

  /* Donation-flow color aliases — rewired to Tier 3 --df-* tokens */
  --color-df-backdrop: var(--df-backdrop);
  --color-df-progress-active: var(--df-progress-bg);
  --color-df-progress-inactive: var(--df-progress-inactive);
  --color-df-selected-border: var(--df-selection-border);
  --color-df-selected-bg: var(--df-selection-light);
  /* Part 4: creative widget aliases kept as-is */
  --color-df-creative-carousel-bg: var(--df-creative-widget-carousel-background);
  --color-df-creative-carousel-heading: var(--df-creative-widget-carousel-heading);
  --color-df-creative-carousel-description: var(--df-creative-widget-carousel-description);
  --color-df-creative-floating-bg: var(--df-creative-widget-floating-button-background);
  --color-df-creative-floating-fg: var(--df-creative-widget-floating-button-foreground);
  
}

.df-canvas .df-input-field {
    height: 3rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-donation-md);
    background-color: var(--background);
    padding: 0.25rem 0.75rem;
    color: var(--df-form-foreground-muted, var(--foreground));
    box-shadow: var(--shadow-donation-input);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }
.df-canvas .df-input-field::placeholder {
    color: var(--muted-foreground);
    opacity: 0.7;
  }
  

.df-canvas .df-primary-action {
    border: var(--df-button-border-width) solid var(--df-button-border);
    border-radius: var(--radius-donation-lg);
    background-color: var(--df-button-bg);
    color: var(--df-button-text);
    box-shadow: var(--shadow-donation-button);
    letter-spacing: -0.01em;
    transition:
      background-color 150ms ease,
      border-color 150ms ease;
  }
.df-canvas .df-primary-action-prominent-shadow {
    box-shadow: var(--shadow-donation-button-primary);
  }
.df-canvas .df-primary-action:hover {
    border-color: var(--df-button-hover);
    background-color: var(--df-button-hover);
  }
.df-canvas .df-primary-action[aria-disabled='true'] {
    opacity: 0.6;
    cursor: progress;
  }
.df-canvas .df-primary-action[aria-disabled='true']:hover {
    border-color: var(--df-button-border);
    background-color: var(--df-button-bg);
  }
.df-canvas .df-primary-action-semibold {
    font-weight: 600;
  }
  

.df-canvas .df-content-band {
    background-color: var(--df-content-bg);
  }
.df-canvas .df-form-surface {
    background-color: var(--df-form-bg);
  }
.df-canvas .df-option-selected {
    border: 2px solid var(--df-selection-border);
    background-color: var(--df-selection-light);
    box-shadow: var(--shadow-donation-option-selected);
  }
  

.df-canvas .df-checkbox[data-state='checked'],
.df-canvas .df-checkbox > [data-state='checked'] {
  border-color: var(--df-selection);
  background-color: var(--df-selection);
  color: var(--df-selection-foreground);
}
.df-canvas .df-checkbox[aria-invalid='true'][data-state='checked'],
.df-canvas .df-checkbox > [aria-invalid='true'][data-state='checked'] {
  border-color: var(--destructive);
}