/* <auto-generated>
 * Source: /design/tiklabo.tokens.json. Do not edit by hand.
 * Run: dotnet run --project tools/TikLabo.DesignTokens
 * </auto-generated> */

:root {
  --tik-color-light-background: #F6F4F1;
  --tik-color-light-background-secondary: #F2F0EB;
  --tik-color-light-surface: #FFFEFA;
  --tik-color-light-surface-elevated: #FFFFFF;
  --tik-color-light-border: #E6E3DC;
  --tik-color-light-divider: #E6E3DC;
  --tik-color-light-text-primary: #1C1F24;
  --tik-color-light-text-secondary: #65706D;
  --tik-color-light-text-muted: #65706D;
  --tik-color-light-accent: #0F3D33;
  --tik-color-light-accent-hover: #062C25;
  --tik-color-light-accent-selected: #E7F0EC;
  --tik-color-light-on-accent: #FFFFFF;
  --tik-color-light-brand-gold: #C9A668;
  --tik-color-light-brand-silver: #C7CCD1;
  --tik-color-light-on-brand-gold: #1C1F24;
  --tik-color-light-success: #287954;
  --tik-color-light-success-subtle: #E8F3EC;
  --tik-color-light-on-success: #FFFFFF;
  --tik-color-light-warning: #BA7418;
  --tik-color-light-warning-subtle: #FFF7E4;
  --tik-color-light-danger: #BA3B32;
  --tik-color-light-danger-subtle: #F8E8E8;
  --tik-color-light-on-danger: #FFFFFF;
  --tik-color-light-information: #247DCE;
  --tik-color-light-focus: #247DCE;
  --tik-color-light-disabled: #65706D;
  --tik-color-light-disabled-surface: #ECE9E3;
  --tik-color-light-overlay: #1C1F24;

  --tik-color-dark-background: #081727;
  --tik-color-dark-background-secondary: #142B41;
  --tik-color-dark-surface: #10243A;
  --tik-color-dark-surface-elevated: #17314B;
  --tik-color-dark-border: #2B4055;
  --tik-color-dark-divider: #2B4055;
  --tik-color-dark-text-primary: #F4F1EA;
  --tik-color-dark-text-secondary: #B5C0CB;
  --tik-color-dark-text-muted: #B5C0CB;
  --tik-color-dark-accent: #C9A668;
  --tik-color-dark-accent-hover: #C9A668;
  --tik-color-dark-accent-selected: #24685A;
  --tik-color-dark-on-accent: #0A1726;
  --tik-color-dark-brand-gold: #C9A668;
  --tik-color-dark-brand-silver: #C7CCD1;
  --tik-color-dark-on-brand-gold: #0A1726;
  --tik-color-dark-success: #69C49A;
  --tik-color-dark-success-subtle: #193D34;
  --tik-color-dark-on-success: #081727;
  --tik-color-dark-warning: #E8CE92;
  --tik-color-dark-warning-subtle: #3B321F;
  --tik-color-dark-danger: #EE7777;
  --tik-color-dark-danger-subtle: #402A32;
  --tik-color-dark-on-danger: #081727;
  --tik-color-dark-information: #247DCE;
  --tik-color-dark-focus: #247DCE;
  --tik-color-dark-disabled: #B5C0CB;
  --tik-color-dark-disabled-surface: #1B3146;
  --tik-color-dark-overlay: #081727;

  --tik-color-background: var(--tik-color-light-background);
  --tik-color-background-secondary: var(--tik-color-light-background-secondary);
  --tik-color-surface: var(--tik-color-light-surface);
  --tik-color-surface-elevated: var(--tik-color-light-surface-elevated);
  --tik-color-border: var(--tik-color-light-border);
  --tik-color-divider: var(--tik-color-light-divider);
  --tik-color-text-primary: var(--tik-color-light-text-primary);
  --tik-color-text-secondary: var(--tik-color-light-text-secondary);
  --tik-color-text-muted: var(--tik-color-light-text-muted);
  --tik-color-accent: var(--tik-color-light-accent);
  --tik-color-accent-hover: var(--tik-color-light-accent-hover);
  --tik-color-accent-selected: var(--tik-color-light-accent-selected);
  --tik-color-on-accent: var(--tik-color-light-on-accent);
  --tik-color-brand-gold: var(--tik-color-light-brand-gold);
  --tik-color-brand-silver: var(--tik-color-light-brand-silver);
  --tik-color-on-brand-gold: var(--tik-color-light-on-brand-gold);
  --tik-color-success: var(--tik-color-light-success);
  --tik-color-success-subtle: var(--tik-color-light-success-subtle);
  --tik-color-on-success: var(--tik-color-light-on-success);
  --tik-color-warning: var(--tik-color-light-warning);
  --tik-color-warning-subtle: var(--tik-color-light-warning-subtle);
  --tik-color-danger: var(--tik-color-light-danger);
  --tik-color-danger-subtle: var(--tik-color-light-danger-subtle);
  --tik-color-on-danger: var(--tik-color-light-on-danger);
  --tik-color-information: var(--tik-color-light-information);
  --tik-color-focus: var(--tik-color-light-focus);
  --tik-color-disabled: var(--tik-color-light-disabled);
  --tik-color-disabled-surface: var(--tik-color-light-disabled-surface);
  --tik-color-overlay: var(--tik-color-light-overlay);
  --tik-overlay-opacity: 0.55;

  --tik-space-0: 0px;
  --tik-space-1: 4px;
  --tik-space-2: 8px;
  --tik-space-3: 12px;
  --tik-space-4: 16px;
  --tik-space-5: 20px;
  --tik-space-6: 24px;
  --tik-space-8: 32px;

  --tik-radius-small: 10px;
  --tik-radius-control: 10px;
  --tik-radius-panel: 16px;
  --tik-radius-card: 16px;
  --tik-radius-dialog: 24px;
  --tik-radius-large: 24px;
  --tik-radius-pill: 999px;

  --tik-font-family-sans: Manrope, Inter, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --tik-font-size-caption: 10px;
  --tik-font-size-label: 12.5px;
  --tik-font-size-body: 14px;
  --tik-font-size-body-emphasis: 15px;
  --tik-font-size-section-title: 20px;
  --tik-font-size-mobile-page-title: 24px;
  --tik-font-size-page-title: 30px;
  --tik-font-weight-regular: 400;
  --tik-font-weight-medium: 500;
  --tik-font-weight-semibold: 600;
  --tik-font-weight-bold: 700;
  --tik-line-height-compact: 1.2;
  --tik-line-height-body: 1.5;

  --tik-icon-compact: 16px;
  --tik-icon-navigation: 18px;
  --tik-icon-standard: 24px;
  --tik-icon-large: 32px;
  --tik-icon-hero: 48px;
  --tik-icon-feature: 64px;

  --tik-input-height-compact: 36px;
  --tik-input-height-standard: 44px;
  --tik-input-height-touch: 48px;

  --tik-button-height-compact: 36px;
  --tik-button-height-standard: 44px;
  --tik-button-height-touch: 48px;

  --tik-navigation-desktop-sidebar-width: 210px;
  --tik-navigation-desktop-header-height: 58px;
  --tik-navigation-desktop-status-bar-height: 30px;
  --tik-navigation-mobile-bottom-bar-min-height: 58px;
  --tik-touch-target-min: 44px;
  --tik-content-max-width: 1216px;

  --tik-layout-web-content-padding: 32px;
  --tik-layout-mobile-content-padding: 16px;
  --tik-layout-safe-area-minimum: 16px;
  --tik-icon-stroke-width: 1.75;

  --tik-duration-instant: 0ms;
  --tik-duration-fast: 120ms;
  --tik-duration-standard: 200ms;
  --tik-duration-slow: 350ms;
  --tik-duration-skeleton: 1400ms;

  --tik-breakpoint-compact: 576px;
  --tik-breakpoint-medium: 768px;
  --tik-breakpoint-wide: 1120px;

  --tik-chart-primary: #0F3D33;
  --tik-chart-secondary: #C9A668;
  --tik-chart-tertiary: #24685A;
  --tik-chart-quaternary: #247DCE;
  --tik-chart-positive: #287954;
  --tik-chart-negative: #BA3B32;

  --tik-elevation-low: 0 1px 3px rgba(9, 30, 25, 0.07);
  --tik-elevation-high: 0 20px 60px rgba(9, 30, 25, 0.12);
  --tik-hover-opacity: 0.88;
  --tik-pressed-opacity: 0.72;
  --tik-disabled-opacity: 0.42;
  --tik-focus-ring-width: 3px;
  --tik-focus-ring-offset: 2px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --tik-color-background: var(--tik-color-dark-background);
  --tik-color-background-secondary: var(--tik-color-dark-background-secondary);
  --tik-color-surface: var(--tik-color-dark-surface);
  --tik-color-surface-elevated: var(--tik-color-dark-surface-elevated);
  --tik-color-border: var(--tik-color-dark-border);
  --tik-color-divider: var(--tik-color-dark-divider);
  --tik-color-text-primary: var(--tik-color-dark-text-primary);
  --tik-color-text-secondary: var(--tik-color-dark-text-secondary);
  --tik-color-text-muted: var(--tik-color-dark-text-muted);
  --tik-color-accent: var(--tik-color-dark-accent);
  --tik-color-accent-hover: var(--tik-color-dark-accent-hover);
  --tik-color-accent-selected: var(--tik-color-dark-accent-selected);
  --tik-color-on-accent: var(--tik-color-dark-on-accent);
  --tik-color-brand-gold: var(--tik-color-dark-brand-gold);
  --tik-color-brand-silver: var(--tik-color-dark-brand-silver);
  --tik-color-on-brand-gold: var(--tik-color-dark-on-brand-gold);
  --tik-color-success: var(--tik-color-dark-success);
  --tik-color-success-subtle: var(--tik-color-dark-success-subtle);
  --tik-color-on-success: var(--tik-color-dark-on-success);
  --tik-color-warning: var(--tik-color-dark-warning);
  --tik-color-warning-subtle: var(--tik-color-dark-warning-subtle);
  --tik-color-danger: var(--tik-color-dark-danger);
  --tik-color-danger-subtle: var(--tik-color-dark-danger-subtle);
  --tik-color-on-danger: var(--tik-color-dark-on-danger);
  --tik-color-information: var(--tik-color-dark-information);
  --tik-color-focus: var(--tik-color-dark-focus);
  --tik-color-disabled: var(--tik-color-dark-disabled);
  --tik-color-disabled-surface: var(--tik-color-dark-disabled-surface);
  --tik-color-overlay: var(--tik-color-dark-overlay);
  --tik-overlay-opacity: 0.72;
  --tik-elevation-low: 0 1px 4px rgba(0, 0, 0, 0.25);
  --tik-elevation-high: 0 20px 70px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --tik-color-background: var(--tik-color-dark-background);
    --tik-color-background-secondary: var(--tik-color-dark-background-secondary);
    --tik-color-surface: var(--tik-color-dark-surface);
    --tik-color-surface-elevated: var(--tik-color-dark-surface-elevated);
    --tik-color-border: var(--tik-color-dark-border);
    --tik-color-divider: var(--tik-color-dark-divider);
    --tik-color-text-primary: var(--tik-color-dark-text-primary);
    --tik-color-text-secondary: var(--tik-color-dark-text-secondary);
    --tik-color-text-muted: var(--tik-color-dark-text-muted);
    --tik-color-accent: var(--tik-color-dark-accent);
    --tik-color-accent-hover: var(--tik-color-dark-accent-hover);
    --tik-color-accent-selected: var(--tik-color-dark-accent-selected);
    --tik-color-on-accent: var(--tik-color-dark-on-accent);
    --tik-color-brand-gold: var(--tik-color-dark-brand-gold);
    --tik-color-brand-silver: var(--tik-color-dark-brand-silver);
    --tik-color-on-brand-gold: var(--tik-color-dark-on-brand-gold);
    --tik-color-success: var(--tik-color-dark-success);
    --tik-color-success-subtle: var(--tik-color-dark-success-subtle);
    --tik-color-on-success: var(--tik-color-dark-on-success);
    --tik-color-warning: var(--tik-color-dark-warning);
    --tik-color-warning-subtle: var(--tik-color-dark-warning-subtle);
    --tik-color-danger: var(--tik-color-dark-danger);
    --tik-color-danger-subtle: var(--tik-color-dark-danger-subtle);
    --tik-color-on-danger: var(--tik-color-dark-on-danger);
    --tik-color-information: var(--tik-color-dark-information);
    --tik-color-focus: var(--tik-color-dark-focus);
    --tik-color-disabled: var(--tik-color-dark-disabled);
    --tik-color-disabled-surface: var(--tik-color-dark-disabled-surface);
    --tik-color-overlay: var(--tik-color-dark-overlay);
    --tik-overlay-opacity: 0.72;
    --tik-elevation-low: 0 1px 4px rgba(0, 0, 0, 0.25);
    --tik-elevation-high: 0 20px 70px rgba(0, 0, 0, 0.35);
  }
}

.tik-icon {
  width: var(--tik-icon-standard);
  height: var(--tik-icon-standard);
  color: currentColor;
}