@use 'sass:map';

// ─────────────────────────────────────────────────────────────────────────────
// Smart Form Theme
// Prefix: --cc-sf-
// Two built-in configs supplied:
//   $default-smart-form-config  → Theme 1 · Clean & Professional (light)
//   $theme-2-smart-form-config  → Theme 2 · Vibrant & Modern (dark)
// ─────────────────────────────────────────────────────────────────────────────

// ── Theme 1 — Clean & Professional (default) ─────────────────────────────────
$default-smart-form-config: (
    // Typography
    font-family: ('Inter', 'Segoe UI', sans-serif),
    font-size-base: 0.875rem,

    // ── Accent colour (flows from app primary; replaces hard-coded blue) ────────
    accent-color: #3B82F6,
    selected-color: #3B82F6,

    // ── Form container ──────────────────────────────────────────────────────────
    form-bg: #ffffff,
    form-padding: 24px,
    form-border-radius: 12px,
    form-border: none,
    form-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
    form-max-width: 1200px,
    form-section-gap: 24px,

    // ── Form header (title + description) ──────────────────────────────────────
    form-title-size: 1.5rem,
    form-title-weight: 700,
    form-title-color: #111827,
    form-desc-size: 0.875rem,
    form-desc-color: #6B7280,

    // ── Section / GROUP — flat layout (no card shell) ───────────────────────────
    section-bg: #ffffff,
    section-border: 1px solid #E5E7EB,
    section-radius: 10px,
    section-padding: 20px,
    section-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
    section-gap: 20px,

    section-label-size: 1rem,
    section-label-weight: 600,
    section-label-color: #1F2937,
    section-label-border: 2px solid #E5E7EB,

    // ── Section heading left-accent bar ─────────────────────────────────────────
    section-header-accent-width: 4px,
    section-header-accent-color: #3B82F6,
    section-header-bg: #F9FAFB,

    // ── Repeater accordion ──────────────────────────────────────────────────────
    repeater-accordion-header-bg: #F9FAFB,
    repeater-accordion-header-color: #1F2937,
    repeater-accordion-active-bg: #EFF6FF,
    repeater-badge-bg: #E5E7EB,
    repeater-badge-color: #374151,
    section-border-radius-inner: 8px,

    // ── GROUP repeater instance card ────────────────────────────────────────────
    instance-bg: #F9FAFB,
    instance-border: 1px solid #E5E7EB,
    instance-radius: 8px,
    instance-padding: 16px,
    instance-divider: 1px dashed #D1D5DB,
    instance-num-color: #4B5563,
    instance-num-size: 0.8125rem,

    // ── Grid gap + field gap ─────────────────────────────────────────────────────
    grid-gap: 16px,
    field-gap: 6px,

    // ── Focus ring ──────────────────────────────────────────────────────────────
    focus-ring-width: 3px,
    focus-ring-offset: 0,

    // ── Field label ─────────────────────────────────────────────────────────────
    label-size: 0.875rem,
    label-weight: 500,
    label-color: #111827,
    label-required-color: #DC2626,

    // ── Input ───────────────────────────────────────────────────────────────────
    input-bg: #ffffff,
    input-color: #111827,
    input-placeholder: #9CA3AF,
    input-border: 1.5px solid #D1D5DB,
    input-radius: 8px,
    input-padding: 0.625rem 0.875rem,
    input-font-size: 0.875rem,
    input-shadow: none,

    input-hover-border: #9CA3AF,
    input-focus-border: #3B82F6,
    input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12),
    input-transition: all 0.2s ease,

    input-disabled-bg: #F3F4F6,
    input-disabled-color: #6B7280,
    input-disabled-border:#E5E7EB,

    // ── Error state ─────────────────────────────────────────────────────────────
    error-border: #DC2626,
    error-bg: #FEF2F2,
    error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1),
    error-text-color: #DC2626,
    error-text-size: 0.75rem,

    // ── Hint / helper text ──────────────────────────────────────────────────────
    hint-color: #6B7280,
    hint-size: 0.75rem,

    // ── Chip ────────────────────────────────────────────────────────────────────
    chip-border: 1px solid #D1D5DB,
    chip-radius: 20px,
    chip-padding: 6px 14px,
    chip-bg: #ffffff,
    chip-color: #374151,
    chip-hover-bg: #F3F4F6,
    chip-selected-bg: #3B82F6,
    chip-selected-color: #ffffff,
    chip-selected-border: #3B82F6,

    // ── Switch ──────────────────────────────────────────────────────────────────
    switch-track-off: #D1D5DB,
    switch-track-on: #3B82F6,
    switch-thumb: #ffffff,

    // ── Rating stars ────────────────────────────────────────────────────────────
    star-empty: #D1D5DB,
    star-filled: #F59E0B,
    star-size: 28px,

    // ── Generated (read-only) field ─────────────────────────────────────────────
    generated-bg: #F3F4F6,
    generated-border: 1px solid #E5E7EB,
    generated-color: #6B7280,
    generated-radius: 8px,
    generated-padding: 0.625rem 0.875rem,

    // ── File upload drop-zone ───────────────────────────────────────────────────
    dropzone-bg: #F8FAFC,
    dropzone-border: 1.5px dashed #CBD5E1,
    dropzone-radius: 12px,
    dropzone-hover-bg: #EFF6FF,
    dropzone-hover-border:#93C5FD,
    dropzone-over-border: #3B82F6,
    dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12),
    dropzone-icon-color: #94A3B8,
    dropzone-icon-bg: rgba(59, 130, 246, 0.10),
    dropzone-link-color: #3B82F6,
    dropzone-hint-color: #64748B,

    uploaded-item-bg: #ffffff,
    uploaded-item-border: 1px solid #E2E8F0,
    uploaded-item-radius: 8px,
    uploaded-remove-color: #94A3B8,
    uploaded-remove-hover-bg: #FEF2F2,
    uploaded-remove-hover-color: #DC2626,

    // ── Repeater add/remove buttons ─────────────────────────────────────────────
    btn-add-bg: transparent,
    btn-add-color: #3B82F6,
    btn-add-border: 1px dashed #CBD5E1,
    btn-add-radius: 6px,
    btn-add-hover-bg: #EFF6FF,
    btn-add-hover-border: #BFDBFE,

    btn-remove-bg: #FFF5F5,
    btn-remove-color: #E53E3E,
    btn-remove-border: 1px solid #FED7D7,
    btn-remove-radius: 4px,
    btn-remove-hover-bg: #FED7D7,

    // ── Stepper navigation ──────────────────────────────────────────────────────
    step-connector-color: #E5E7EB,
    step-connector-done: #22C55E,

    step-number-bg: #E5E7EB,
    step-number-color: #6B7280,
    step-number-size: 40px,
    step-number-font-size: 0.875rem,
    step-number-weight: 600,

    step-label-size: 0.875rem,
    step-label-color: #6B7280,
    step-label-weight: 500,

    step-active-bg: #3B82F6,
    step-active-color: #ffffff,
    step-active-label: #1D4ED8,
    step-active-label-weight: 700,

    step-done-bg: #22C55E,
    step-done-color: #ffffff,

    // ── Form action bar (submit / previous) ─────────────────────────────────────
    actions-border: 1px solid #E5E7EB,
    actions-padding: 20px 10px 0,
    actions-gap: 12px,

    btn-primary-bg: #3B82F6,
    btn-primary-color: #ffffff,
    btn-primary-radius: 8px,
    btn-primary-padding: 0.625rem 1.5rem,
    btn-primary-hover-bg: #2563EB,

    btn-secondary-bg: #F3F4F6,
    btn-secondary-color: #374151,
    btn-secondary-radius: 8px,
    btn-secondary-padding: 0.625rem 1.5rem,
    btn-secondary-hover-bg: #E5E7EB,

    btn-font-size: 0.875rem,
    btn-font-weight: 600,
    btn-transition: all 0.2s ease,
    btn-disabled-opacity: 0.55,

    // ── Repeater button sizing ──────────────────────────────────────────────────
    btn-remove-padding: 0.375rem 0.75rem,
    btn-remove-font-size: 0.875rem,
    btn-remove-font-weight: 500,

    btn-add-padding: 0.625rem 1.5rem,
    btn-add-font-size: 0.875rem,
    btn-add-font-weight: 600,

    // ── Instance card polish ────────────────────────────────────────────────────
    stepper-connector-display: block,
    instance-shadow: none,
    instance-hover-shadow: none,
    instance-transition: none,
    instance-header-divider: none,
    instance-header-pb: 0px,
    instance-header-mb: 0px,
    instance-num-weight: 600,

    // ── Section stepper accent (top stripe + active badge) ──────────────────────
    section-stepper-accent: #6366F1,
    section-stepper-accent-end: #8B5CF6,
    section-stepper-active-label: #4F46E5,
    section-stepper-active-glow: rgba(99, 102, 241, 0.25),
);

// ── Theme 2 — Vibrant & Modern (dark) ────────────────────────────────────────
$theme-2-smart-form-config: (
    // Typography
    font-family: ('Poppins', 'Segoe UI', sans-serif),
    font-size-base: 0.875rem,

    // ── Accent colour ───────────────────────────────────────────────────────────
    accent-color: #818CF8,
    selected-color: #818CF8,

    // ── Form container ──────────────────────────────────────────────────────────
    form-bg: #0F172A,
    form-padding: 28px,
    form-border-radius: 16px,
    form-border: 1px solid rgba(255, 255, 255, 0.06),
    form-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    form-max-width: 1200px,
    form-section-gap: 24px,

    // ── Form header ─────────────────────────────────────────────────────────────
    form-title-size: 1.75rem,
    form-title-weight: 700,
    form-title-color: #F1F5F9,
    form-desc-size: 0.9rem,
    form-desc-color: #94A3B8,

    // ── Section / GROUP — flat layout ───────────────────────────────────────────
    section-bg: #1E293B,
    section-border: 1px solid rgba(255, 255, 255, 0.08),
    section-radius: 12px,
    section-padding: 22px,
    section-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
    section-gap: 20px,

    section-label-size: 1rem,
    section-label-weight: 600,
    section-label-color: #E2E8F0,
    section-label-border: 2px solid #334155,

    // ── Section heading left-accent bar ─────────────────────────────────────────
    section-header-accent-width: 4px,
    section-header-accent-color: #818CF8,
    section-header-bg: #162032,

    // ── Repeater accordion ──────────────────────────────────────────────────────
    repeater-accordion-header-bg: #162032,
    repeater-accordion-header-color: #E2E8F0,
    repeater-accordion-active-bg: rgba(129, 140, 248, 0.10),
    repeater-badge-bg: #334155,
    repeater-badge-color: #CBD5E1,
    section-border-radius-inner: 8px,

    // ── GROUP repeater instance card ────────────────────────────────────────────
    instance-bg: #162032,
    instance-border: 1px solid rgba(255, 255, 255, 0.07),
    instance-radius: 8px,
    instance-padding: 16px,
    instance-divider: 1px dashed #334155,
    instance-num-color: #94A3B8,
    instance-num-size: 0.8125rem,

    // ── Grid gap + field gap ─────────────────────────────────────────────────────
    grid-gap: 16px,
    field-gap: 6px,

    // ── Focus ring ──────────────────────────────────────────────────────────────
    focus-ring-width: 3px,
    focus-ring-offset: 0,

    // ── Field label ─────────────────────────────────────────────────────────────
    label-size: 0.875rem,
    label-weight: 500,
    label-color: #CBD5E1,
    label-required-color: #F87171,

    // ── Input ───────────────────────────────────────────────────────────────────
    input-bg: #ffffff,
    input-color: #0D0D0D,
    input-placeholder: #9CA3AF,
    input-border: 1.5px solid #334155,
    input-radius: 8px,
    input-padding: 0.625rem 0.875rem,
    input-font-size: 0.875rem,
    input-shadow: none,

    input-hover-border: #9CA3AF,
    input-focus-border: #39FF14,
    input-focus-shadow: 0 0 0 3px rgba(57, 255, 20, 0.25),
    input-transition: all 0.2s ease,

    input-disabled-bg: #1E293B,
    input-disabled-color: #475569,
    input-disabled-border:#1E293B,

    // ── Error state ─────────────────────────────────────────────────────────────
    error-border: #F87171,
    error-bg: rgba(248, 113, 113, 0.08),
    error-focus-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2),
    error-text-color: #F87171,
    error-text-size: 0.75rem,

    // ── Hint ────────────────────────────────────────────────────────────────────
    hint-color: #64748B,
    hint-size: 0.75rem,

    // ── Chip ────────────────────────────────────────────────────────────────────
    chip-border: 1px solid #334155,
    chip-radius: 20px,
    chip-padding: 6px 14px,
    chip-bg: #1E293B,
    chip-color: #CBD5E1,
    chip-hover-bg: #263548,
    chip-selected-bg: #818CF8,
    chip-selected-color: #ffffff,
    chip-selected-border: #818CF8,

    // ── Switch ──────────────────────────────────────────────────────────────────
    switch-track-off: #334155,
    switch-track-on: #818CF8,
    switch-thumb: #ffffff,

    // ── Rating stars ────────────────────────────────────────────────────────────
    star-empty: #334155,
    star-filled: #F59E0B,
    star-size: 28px,

    // ── Generated field ─────────────────────────────────────────────────────────
    generated-bg: #162032,
    generated-border: 1px solid #334155,
    generated-color: #64748B,
    generated-radius: 8px,
    generated-padding: 0.625rem 0.875rem,

    // ── File upload ─────────────────────────────────────────────────────────────
    dropzone-bg: #162032,
    dropzone-border: 1.5px dashed #334155,
    dropzone-radius: 12px,
    dropzone-hover-bg: #1a253a,
    dropzone-hover-border:#818CF8,
    dropzone-over-border: #818CF8,
    dropzone-over-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2),
    dropzone-icon-color: #475569,
    dropzone-icon-bg: rgba(129, 140, 248, 0.12),
    dropzone-link-color: #818CF8,
    dropzone-hint-color: #64748B,

    uploaded-item-bg: #1E293B,
    uploaded-item-border: 1px solid #334155,
    uploaded-item-radius: 8px,
    uploaded-remove-color: #475569,
    uploaded-remove-hover-bg: rgba(248, 113, 113, 0.12),
    uploaded-remove-hover-color: #F87171,

    // ── Repeater buttons ────────────────────────────────────────────────────────
    btn-add-bg: transparent,
    btn-add-color: #818CF8,
    btn-add-border: 1px dashed #334155,
    btn-add-radius: 6px,
    btn-add-hover-bg: rgba(129, 140, 248, 0.08),
    btn-add-hover-border: #818CF8,

    btn-remove-bg: rgba(248, 113, 113, 0.08),
    btn-remove-color: #F87171,
    btn-remove-border: 1px solid rgba(248, 113, 113, 0.3),
    btn-remove-radius: 4px,
    btn-remove-hover-bg: rgba(248, 113, 113, 0.18),

    // ── Stepper ─────────────────────────────────────────────────────────────────
    step-connector-color: #334155,
    step-connector-done: #34D399,

    step-number-bg: #1E293B,
    step-number-color: #64748B,
    step-number-size: 40px,
    step-number-font-size: 0.875rem,
    step-number-weight: 600,

    step-label-size: 0.875rem,
    step-label-color: #64748B,
    step-label-weight: 500,

    step-active-bg: #818CF8,
    step-active-color: #ffffff,
    step-active-label: #A5B4FC,
    step-active-label-weight: 700,

    step-done-bg: #34D399,
    step-done-color: #0F172A,

    // ── Actions bar ─────────────────────────────────────────────────────────────
    actions-border: 1px solid #1E293B,
    actions-padding: 20px 10px 0,
    actions-gap: 12px,

    btn-primary-bg: #818CF8,
    btn-primary-color: #ffffff,
    btn-primary-radius: 8px,
    btn-primary-padding: 0.625rem 1.5rem,
    btn-primary-hover-bg: #6366F1,

    btn-secondary-bg: #1E293B,
    btn-secondary-color: #CBD5E1,
    btn-secondary-radius: 8px,
    btn-secondary-padding: 0.625rem 1.5rem,
    btn-secondary-hover-bg: #263548,

    btn-font-size: 0.875rem,
    btn-font-weight: 600,
    btn-transition: all 0.2s ease,
    btn-disabled-opacity: 0.45,

    // ── Repeater button sizing ──────────────────────────────────────────────────
    btn-remove-padding: 0.375rem 0.75rem,
    btn-remove-font-size: 0.875rem,
    btn-remove-font-weight: 600,

    btn-add-padding: 0.625rem 1.5rem,
    btn-add-font-size: 0.875rem,
    btn-add-font-weight: 600,

    // ── Instance card polish ────────────────────────────────────────────────────
    stepper-connector-display: block,
    instance-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
    instance-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
    instance-transition: box-shadow 0.15s ease,
    instance-header-divider: 1px solid #1a253a,
    instance-header-pb: 12px,
    instance-header-mb: 16px,
    instance-num-weight: 600,

    // ── Section stepper accent ──────────────────────────────────────────────────
    section-stepper-accent: #818CF8,
    section-stepper-accent-end: #A5B4FC,
    section-stepper-active-label: #A5B4FC,
    section-stepper-active-glow: rgba(129, 140, 248, 0.25),
);

// ── Theme 3 — Campus Students (campus red accent) ─────────────────────────────
$type1-config: map.merge($default-smart-form-config, (
    accent-color: #E63E30,
    selected-color: #E63E30,

    input-focus-border: #E63E30,
    input-focus-shadow: 0 0 0 3px rgba(230, 62, 48, 0.08),
    chip-selected-bg: #E63E30,
    chip-selected-border: #E63E30,
    switch-track-on: #E63E30,

    section-bg: transparent,
    section-border: none,
    section-shadow: none,
    section-header-accent-color: #E63E30,

    step-active-bg: #E63E30,
    step-active-label: #C13320,
    stepper-connector-display: none,

    btn-add-color: #E63E30,
    btn-add-border: 1.5px dashed rgba(230, 62, 48, 0.3),
    btn-add-hover-bg: rgba(230, 62, 48, 0.04),
    btn-add-hover-border: rgba(230, 62, 48, 0.6),

    btn-remove-bg: transparent,
    btn-remove-color: #EF4444,
    btn-remove-border: 1px solid #FECACA,
    btn-remove-hover-bg: #FEF2F2,
    btn-remove-radius: 6px,
    btn-remove-padding: 5px 12px,
    btn-remove-font-size: 0.75rem,
    btn-remove-font-weight: 600,

    btn-add-padding: 10px 20px,
    btn-add-font-size: 0.875rem,
    btn-add-font-weight: 600,

    btn-primary-bg: #E63E30,
    btn-primary-hover-bg: #C13320,
    btn-primary-color: #ffffff,

    instance-bg: #ffffff,
    instance-border: 1px solid #E5E7EB,
    instance-radius: 12px,
    instance-shadow: 0 1px 4px rgba(0, 0, 0, 0.04),
    instance-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.07),
    instance-transition: box-shadow 0.15s ease,
    instance-header-divider: 1px solid #F5F5F5,
    instance-header-pb: 12px,
    instance-header-mb: 16px,
    instance-num-color: #9CA3AF,
    instance-num-weight: 600,

    section-stepper-accent: #E63E30,
    section-stepper-accent-end: #C13320,
    section-stepper-active-label: #C13320,
    section-stepper-active-glow: rgba(230, 62, 48, 0.2),
));

// ─────────────────────────────────────────────────────────────────────────────
// Mixin — apply theme by emitting CSS custom properties
// Usage:
//   .my-wrapper { @include smart-form-theme(); }            ← default (theme 1)
//   .dark-wrapper { @include smart-form-theme($theme-2-smart-form-config); }
//   .custom { @include smart-form-theme((btn-primary-bg: #e91e63)); }
// ─────────────────────────────────────────────────────────────────────────────
@mixin smart-form-theme($user-config: ()) {
    $config: map.merge($default-smart-form-config, $user-config);

    // Typography
    --cc-sf-font-family: #{map.get($config, font-family)};
    --cc-sf-font-size-base: #{map.get($config, font-size-base)};

    // Accent colour
    --cc-sf-accent-color: #{map.get($config, accent-color)};
    --cc-sf-selected-color: #{map.get($config, selected-color)};

    // Form container
    --cc-sf-form-bg: #{map.get($config, form-bg)};
    --cc-sf-form-padding: #{map.get($config, form-padding)};
    --cc-sf-form-border-radius: #{map.get($config, form-border-radius)};
    --cc-sf-form-border: #{map.get($config, form-border)};
    --cc-sf-form-shadow: #{map.get($config, form-shadow)};
    --cc-sf-form-max-width: #{map.get($config, form-max-width)};
    --cc-sf-form-section-gap: #{map.get($config, form-section-gap)};

    // Header
    --cc-sf-form-title-size: #{map.get($config, form-title-size)};
    --cc-sf-form-title-weight: #{map.get($config, form-title-weight)};
    --cc-sf-form-title-color: #{map.get($config, form-title-color)};
    --cc-sf-form-desc-size: #{map.get($config, form-desc-size)};
    --cc-sf-form-desc-color: #{map.get($config, form-desc-color)};

    // Section — flat layout tokens
    --cc-sf-section-bg: #{map.get($config, section-bg)};
    --cc-sf-section-border: #{map.get($config, section-border)};
    --cc-sf-section-radius: #{map.get($config, section-radius)};
    --cc-sf-section-padding: #{map.get($config, section-padding)};
    --cc-sf-section-shadow: #{map.get($config, section-shadow)};
    --cc-sf-section-gap: #{map.get($config, section-gap)};
    --cc-sf-section-label-size: #{map.get($config, section-label-size)};
    --cc-sf-section-label-weight: #{map.get($config, section-label-weight)};
    --cc-sf-section-label-color: #{map.get($config, section-label-color)};
    --cc-sf-section-label-border: #{map.get($config, section-label-border)};

    // Section heading accent bar
    --cc-sf-section-header-accent-width: #{map.get($config, section-header-accent-width)};
    --cc-sf-section-header-accent-color: #{map.get($config, section-header-accent-color)};
    --cc-sf-section-header-bg: #{map.get($config, section-header-bg)};

    // Repeater accordion
    --cc-sf-repeater-accordion-header-bg: #{map.get($config, repeater-accordion-header-bg)};
    --cc-sf-repeater-accordion-header-color: #{map.get($config, repeater-accordion-header-color)};
    --cc-sf-repeater-accordion-active-bg: #{map.get($config, repeater-accordion-active-bg)};
    --cc-sf-repeater-badge-bg: #{map.get($config, repeater-badge-bg)};
    --cc-sf-repeater-badge-color: #{map.get($config, repeater-badge-color)};
    --cc-sf-section-border-radius-inner: #{map.get($config, section-border-radius-inner)};

    // Repeater instance
    --cc-sf-instance-bg: #{map.get($config, instance-bg)};
    --cc-sf-instance-border: #{map.get($config, instance-border)};
    --cc-sf-instance-radius: #{map.get($config, instance-radius)};
    --cc-sf-instance-padding: #{map.get($config, instance-padding)};
    --cc-sf-instance-divider: #{map.get($config, instance-divider)};
    --cc-sf-instance-num-color:#{map.get($config, instance-num-color)};
    --cc-sf-instance-num-size: #{map.get($config, instance-num-size)};

    // Grid + field gap
    --cc-sf-grid-gap: #{map.get($config, grid-gap)};
    --cc-sf-field-gap: #{map.get($config, field-gap)};

    // Focus ring
    --cc-sf-focus-ring-width: #{map.get($config, focus-ring-width)};
    --cc-sf-focus-ring-offset: #{map.get($config, focus-ring-offset)};

    // Label
    --cc-sf-label-size: #{map.get($config, label-size)};
    --cc-sf-label-weight: #{map.get($config, label-weight)};
    --cc-sf-label-color: #{map.get($config, label-color)};
    --cc-sf-label-required-color: #{map.get($config, label-required-color)};
    --cc-sf-label-mb: 0px;

    // Input
    --cc-sf-input-bg: #{map.get($config, input-bg)};
    --cc-sf-input-color: #{map.get($config, input-color)};
    --cc-sf-input-placeholder: #{map.get($config, input-placeholder)};
    --cc-sf-input-border: #{map.get($config, input-border)};
    --cc-sf-input-radius: #{map.get($config, input-radius)};
    --cc-sf-input-padding: #{map.get($config, input-padding)};
    --cc-sf-input-font-size: #{map.get($config, input-font-size)};
    --cc-sf-input-shadow: #{map.get($config, input-shadow)};
    --cc-sf-input-hover-border:#{map.get($config, input-hover-border)};
    --cc-sf-input-focus-border:#{map.get($config, input-focus-border)};
    --cc-sf-input-focus-shadow:#{map.get($config, input-focus-shadow)};
    --cc-sf-input-transition: #{map.get($config, input-transition)};
    --cc-sf-input-disabled-bg: #{map.get($config, input-disabled-bg)};
    --cc-sf-input-disabled-color: #{map.get($config, input-disabled-color)};
    --cc-sf-input-disabled-border:#{map.get($config, input-disabled-border)};

    // Error
    --cc-sf-error-border: #{map.get($config, error-border)};
    --cc-sf-error-bg: #{map.get($config, error-bg)};
    --cc-sf-error-focus-shadow: #{map.get($config, error-focus-shadow)};
    --cc-sf-error-text-color: #{map.get($config, error-text-color)};
    --cc-sf-error-text-size: #{map.get($config, error-text-size)};

    // Hint
    --cc-sf-hint-color: #{map.get($config, hint-color)};
    --cc-sf-hint-size: #{map.get($config, hint-size)};

    // Chip
    --cc-sf-chip-border: #{map.get($config, chip-border)};
    --cc-sf-chip-radius: #{map.get($config, chip-radius)};
    --cc-sf-chip-padding: #{map.get($config, chip-padding)};
    --cc-sf-chip-bg: #{map.get($config, chip-bg)};
    --cc-sf-chip-color: #{map.get($config, chip-color)};
    --cc-sf-chip-hover-bg: #{map.get($config, chip-hover-bg)};
    --cc-sf-chip-selected-bg: #{map.get($config, chip-selected-bg)};
    --cc-sf-chip-selected-color: #{map.get($config, chip-selected-color)};
    --cc-sf-chip-selected-border:#{map.get($config, chip-selected-border)};

    // Switch
    --cc-sf-switch-track-off: #{map.get($config, switch-track-off)};
    --cc-sf-switch-track-on: #{map.get($config, switch-track-on)};
    --cc-sf-switch-thumb: #{map.get($config, switch-thumb)};

    // Rating
    --cc-sf-star-empty: #{map.get($config, star-empty)};
    --cc-sf-star-filled: #{map.get($config, star-filled)};
    --cc-sf-star-size: #{map.get($config, star-size)};

    // Generated
    --cc-sf-generated-bg: #{map.get($config, generated-bg)};
    --cc-sf-generated-border: #{map.get($config, generated-border)};
    --cc-sf-generated-color: #{map.get($config, generated-color)};
    --cc-sf-generated-radius: #{map.get($config, generated-radius)};
    --cc-sf-generated-padding: #{map.get($config, generated-padding)};

    // File upload
    --cc-sf-dropzone-bg: #{map.get($config, dropzone-bg)};
    --cc-sf-dropzone-border: #{map.get($config, dropzone-border)};
    --cc-sf-dropzone-radius: #{map.get($config, dropzone-radius)};
    --cc-sf-dropzone-hover-bg: #{map.get($config, dropzone-hover-bg)};
    --cc-sf-dropzone-hover-border: #{map.get($config, dropzone-hover-border)};
    --cc-sf-dropzone-over-border: #{map.get($config, dropzone-over-border)};
    --cc-sf-dropzone-over-shadow: #{map.get($config, dropzone-over-shadow)};
    --cc-sf-dropzone-icon-color: #{map.get($config, dropzone-icon-color)};
    --cc-sf-dropzone-icon-bg: #{map.get($config, dropzone-icon-bg)};
    --cc-sf-dropzone-link-color: #{map.get($config, dropzone-link-color)};
    --cc-sf-dropzone-hint-color: #{map.get($config, dropzone-hint-color)};

    --cc-sf-uploaded-item-bg: #{map.get($config, uploaded-item-bg)};
    --cc-sf-uploaded-item-border: #{map.get($config, uploaded-item-border)};
    --cc-sf-uploaded-item-radius: #{map.get($config, uploaded-item-radius)};
    --cc-sf-uploaded-remove-color: #{map.get($config, uploaded-remove-color)};
    --cc-sf-uploaded-remove-hover-bg: #{map.get($config, uploaded-remove-hover-bg)};
    --cc-sf-uploaded-remove-hover-color: #{map.get($config, uploaded-remove-hover-color)};

    // Repeater buttons
    --cc-sf-btn-add-bg: #{map.get($config, btn-add-bg)};
    --cc-sf-btn-add-color: #{map.get($config, btn-add-color)};
    --cc-sf-btn-add-border: #{map.get($config, btn-add-border)};
    --cc-sf-btn-add-radius: #{map.get($config, btn-add-radius)};
    --cc-sf-btn-add-hover-bg: #{map.get($config, btn-add-hover-bg)};
    --cc-sf-btn-add-hover-border: #{map.get($config, btn-add-hover-border)};

    --cc-sf-btn-remove-bg: #{map.get($config, btn-remove-bg)};
    --cc-sf-btn-remove-color: #{map.get($config, btn-remove-color)};
    --cc-sf-btn-remove-border: #{map.get($config, btn-remove-border)};
    --cc-sf-btn-remove-radius: #{map.get($config, btn-remove-radius)};
    --cc-sf-btn-remove-hover-bg: #{map.get($config, btn-remove-hover-bg)};
    --cc-sf-btn-remove-padding: #{map.get($config, btn-remove-padding)};
    --cc-sf-btn-remove-font-size: #{map.get($config, btn-remove-font-size)};
    --cc-sf-btn-remove-font-weight: #{map.get($config, btn-remove-font-weight)};
    --cc-sf-btn-add-padding: #{map.get($config, btn-add-padding)};
    --cc-sf-btn-add-font-size: #{map.get($config, btn-add-font-size)};
    --cc-sf-btn-add-font-weight: #{map.get($config, btn-add-font-weight)};
    --cc-sf-stepper-connector-display: #{map.get($config, stepper-connector-display)};
    --cc-sf-instance-shadow: #{map.get($config, instance-shadow)};
    --cc-sf-instance-hover-shadow: #{map.get($config, instance-hover-shadow)};
    --cc-sf-instance-transition: #{map.get($config, instance-transition)};
    --cc-sf-instance-header-divider: #{map.get($config, instance-header-divider)};
    --cc-sf-instance-header-pb: #{map.get($config, instance-header-pb)};
    --cc-sf-instance-header-mb: #{map.get($config, instance-header-mb)};
    --cc-sf-instance-num-weight: #{map.get($config, instance-num-weight)};
    --cc-sf-section-stepper-accent: #{map.get($config, section-stepper-accent)};
    --cc-sf-section-stepper-accent-end: #{map.get($config, section-stepper-accent-end)};
    --cc-sf-section-stepper-active-label: #{map.get($config, section-stepper-active-label)};
    --cc-sf-section-stepper-active-glow: #{map.get($config, section-stepper-active-glow)};

    // Stepper
    --cc-sf-step-connector-color: #{map.get($config, step-connector-color)};
    --cc-sf-step-connector-done: #{map.get($config, step-connector-done)};
    --cc-sf-step-number-bg: #{map.get($config, step-number-bg)};
    --cc-sf-step-number-color: #{map.get($config, step-number-color)};
    --cc-sf-step-number-size: #{map.get($config, step-number-size)};
    --cc-sf-step-number-font-size: #{map.get($config, step-number-font-size)};
    --cc-sf-step-number-weight: #{map.get($config, step-number-weight)};
    --cc-sf-step-label-size: #{map.get($config, step-label-size)};
    --cc-sf-step-label-color: #{map.get($config, step-label-color)};
    --cc-sf-step-label-weight: #{map.get($config, step-label-weight)};
    --cc-sf-step-active-bg: #{map.get($config, step-active-bg)};
    --cc-sf-step-active-color: #{map.get($config, step-active-color)};
    --cc-sf-step-active-label: #{map.get($config, step-active-label)};
    --cc-sf-step-active-label-weight: #{map.get($config, step-active-label-weight)};
    --cc-sf-step-done-bg: #{map.get($config, step-done-bg)};
    --cc-sf-step-done-color: #{map.get($config, step-done-color)};

    // Action bar / submit buttons
    --cc-sf-actions-border: #{map.get($config, actions-border)};
    --cc-sf-actions-padding: #{map.get($config, actions-padding)};
    --cc-sf-actions-gap: #{map.get($config, actions-gap)};

    --cc-sf-btn-primary-bg: #{map.get($config, btn-primary-bg)};
    --cc-sf-btn-primary-color: #{map.get($config, btn-primary-color)};
    --cc-sf-btn-primary-radius: #{map.get($config, btn-primary-radius)};
    --cc-sf-btn-primary-padding: #{map.get($config, btn-primary-padding)};
    --cc-sf-btn-primary-hover-bg: #{map.get($config, btn-primary-hover-bg)};

    --cc-sf-btn-secondary-bg: #{map.get($config, btn-secondary-bg)};
    --cc-sf-btn-secondary-color: #{map.get($config, btn-secondary-color)};
    --cc-sf-btn-secondary-radius: #{map.get($config, btn-secondary-radius)};
    --cc-sf-btn-secondary-padding: #{map.get($config, btn-secondary-padding)};
    --cc-sf-btn-secondary-hover-bg: #{map.get($config, btn-secondary-hover-bg)};

    --cc-sf-btn-font-size: #{map.get($config, btn-font-size)};
    --cc-sf-btn-font-weight: #{map.get($config, btn-font-weight)};
    --cc-sf-btn-transition: #{map.get($config, btn-transition)};
    --cc-sf-btn-disabled-opacity: #{map.get($config, btn-disabled-opacity)};

    // ── Structural rules using the emitted tokens ─────────────────────────────
    ::ng-deep {
        .stepper-nav .stepper-step:not(:last-child)::after {
            display: var(--cc-sf-stepper-connector-display) !important;
        }

        .section-instance {
            background: var(--cc-sf-instance-bg) !important;
            border: var(--cc-sf-instance-border) !important;
            border-radius: var(--cc-sf-instance-radius) !important;
            box-shadow: var(--cc-sf-instance-shadow);
            transition: var(--cc-sf-instance-transition);

            &:hover {
                box-shadow: var(--cc-sf-instance-hover-shadow);
            }
        }

        .section-instance-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: var(--cc-sf-instance-header-pb);
            margin-bottom: var(--cc-sf-instance-header-mb);
            border-bottom: var(--cc-sf-instance-header-divider);
        }

        .section-instance-num {
            font-size: var(--cc-sf-instance-num-size);
            font-weight: var(--cc-sf-instance-num-weight);
            color: var(--cc-sf-instance-num-color);
        }

        .btn-instance-remove {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: var(--cc-sf-btn-remove-padding);
            border-radius: var(--cc-sf-btn-remove-radius);
            border: var(--cc-sf-btn-remove-border) !important;
            background: var(--cc-sf-btn-remove-bg);
            color: var(--cc-sf-btn-remove-color) !important;
            font-size: var(--cc-sf-btn-remove-font-size);
            font-weight: var(--cc-sf-btn-remove-font-weight);
            cursor: pointer;
            transition: all 0.15s ease;

            &:hover {
                background: var(--cc-sf-btn-remove-hover-bg);
            }
        }

        .btn-add-section {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: var(--cc-sf-btn-add-padding);
            border-radius: var(--cc-sf-btn-add-radius);
            border: var(--cc-sf-btn-add-border) !important;
            background: var(--cc-sf-btn-add-bg);
            color: var(--cc-sf-btn-add-color);
            font-size: var(--cc-sf-btn-add-font-size);
            font-weight: var(--cc-sf-btn-add-font-weight);
            cursor: pointer;
            transition: all 0.18s ease;

            &:hover {
                background: var(--cc-sf-btn-add-hover-bg);
                border-color: var(--cc-sf-btn-add-hover-border) !important;
            }
        }

        // ── Section stepper — accent colour override ──────────────────────────
        .section-stepper-nav::before {
            background: linear-gradient(
                90deg,
                var(--cc-sf-section-stepper-accent) 0%,
                var(--cc-sf-section-stepper-accent-end) 100%
            ) !important;
        }

        .section-stepper-step {
            &.ss-active {
                .ss-badge {
                    background: linear-gradient(
                        135deg,
                        var(--cc-sf-section-stepper-accent) 0%,
                        var(--cc-sf-section-stepper-accent-end) 100%
                    ) !important;
                    box-shadow:
                        0 0 0 4px var(--cc-sf-section-stepper-active-glow),
                        0 4px 12px var(--cc-sf-section-stepper-active-glow) !important;
                }

                .ss-label {
                    color: var(--cc-sf-section-stepper-active-label) !important;
                }
            }

            &:not(.ss-active):not(.ss-completed):not(.ss-warning):hover {
                .ss-badge {
                    color: var(--cc-sf-section-stepper-accent) !important;
                    border-color: var(--cc-sf-section-stepper-accent-end) !important;
                }
            }

            .ss-connector::after {
                background: linear-gradient(
                    90deg,
                    var(--cc-sf-section-stepper-accent),
                    var(--cc-sf-section-stepper-accent-end)
                ) !important;
            }
        }
    }
}