/* VietTube Design System Tokens */
/* Generated from themes.json - Material Design 3 */

:root {
  /* Primary Colors */
  --vt-color-primary: #8C4F26;
  --vt-color-primary-container: #FFDBC8;
  --vt-color-on-primary: #FFFFFF;
  --vt-color-on-primary-container: #321300;
  --vt-color-primary-fixed: #FFDBC8;
  --vt-color-primary-fixed-dim: #FFB68B;
  --vt-color-on-primary-fixed: #321300;
  --vt-color-on-primary-fixed-variant: #6F3811;

  /* Secondary Colors */
  --vt-color-secondary: #765847;
  --vt-color-secondary-container: #FFDBC8;
  --vt-color-on-secondary: #FFFFFF;
  --vt-color-on-secondary-container: #2B1609;
  --vt-color-secondary-fixed: #FFDBC8;
  --vt-color-secondary-fixed-dim: #E5BFA9;
  --vt-color-on-secondary-fixed: #2B1609;
  --vt-color-on-secondary-fixed-variant: #5C4131;

  /* Tertiary Colors */
  --vt-color-tertiary: #626033;
  --vt-color-tertiary-container: #E8E5AC;
  --vt-color-on-tertiary: #FFFFFF;
  --vt-color-on-tertiary-container: #1D1D00;
  --vt-color-tertiary-fixed: #E8E5AC;
  --vt-color-tertiary-fixed-dim: #CCC992;
  --vt-color-on-tertiary-fixed: #1D1D00;
  --vt-color-on-tertiary-fixed-variant: #4A491E;

  /* Error Colors */
  --vt-color-error: #BA1A1A;
  --vt-color-error-container: #FFDAD6;
  --vt-color-on-error: #FFFFFF;
  --vt-color-on-error-container: #410002;

  /* Surface Colors */
  --vt-color-background: #FFF8F5;
  --vt-color-on-background: #221A15;
  --vt-color-surface: #FFF8F5;
  --vt-color-on-surface: #221A15;
  --vt-color-surface-variant: #F4DED3;
  --vt-color-on-surface-variant: #52443C;
  --vt-color-surface-container-lowest: #FFFFFF;
  --vt-color-surface-container-low: #FFF1EA;
  --vt-color-surface-container: #FCEAE2;
  --vt-color-surface-container-high: #F6E5DD;
  --vt-color-surface-container-highest: #F0DFD7;
  --vt-color-surface-dim: #E7D7CF;
  --vt-color-surface-bright: #FFF8F5;

  /* Outline Colors */
  --vt-color-outline: #85746B;
  --vt-color-outline-variant: #D7C2B8;

  /* Other Colors */
  --vt-color-shadow: #000000;
  --vt-color-scrim: #000000;
  --vt-color-inverse-surface: #382E29;
  --vt-color-inverse-on-surface: #FFEDE5;
  --vt-color-inverse-primary: #FFB68B;
  --vt-color-surface-tint: #8C4F26;

  /* Utility Colors */
  --vt-color-white: #FFFFFF;
  --vt-color-black: #000000;

  /* Typography Scale */
  --vt-font-family-primary: 'Fira Sans', sans-serif;
  --vt-font-family-secondary: 'Montserrat', sans-serif;
  
  --vt-font-size-2xs: 1rem;
  --vt-font-size-xs: 1.2rem;
  --vt-font-size-sm: 1.4rem;
  --vt-font-size-base: 1.6rem;
  --vt-font-size-lg: 1.8rem;
  --vt-font-size-xl: 2.0rem;
  --vt-font-size-2xl: 2.4rem;
  --vt-font-size-3xl: 2.8rem;
  --vt-font-size-4xl: 3.2rem;
  --vt-font-size-5xl: 4.0rem;

  --vt-font-weight-normal: 400;
  --vt-font-weight-medium: 500;
  --vt-font-weight-semibold: 600;
  --vt-font-weight-bold: 700;

  --vt-line-height-tight: 1.1;
  --vt-line-height-base: 1.5;
  --vt-line-height-relaxed: 1.75;

  /* Spacing Scale */
  --vt-space-xs: 0.4rem;
  --vt-space-sm: 0.8rem;
  --vt-space-base: 1.0rem;
  --vt-space-md: 1.2rem;
  --vt-space-lg: 1.6rem;
  --vt-space-xl: 2.0rem;
  --vt-space-2xl: 2.4rem;
  --vt-space-3xl: 3.2rem;

  /* Border Radius */
  --vt-radius-xs: 4px;
  --vt-radius-sm: 8px;
  --vt-radius-base: 12px;
  --vt-radius-lg: 16px;
  --vt-radius-xl: 24px;
  --vt-radius-full: 100px;

  /* Shadows/Elevation */
  --vt-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --vt-shadow-sm: 1px 1px 2px rgba(0, 0, 0, 0.1);
  --vt-shadow-base: 2px 1px 2px rgba(0, 0, 0, 0.2);
  --vt-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --vt-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --vt-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --vt-transition-fast: 0.2s ease;
  --vt-transition-base: 0.3s ease;
  --vt-transition-slow: 0.5s ease;

  /* Component Tokens */
  --vt-button-padding: var(--vt-space-sm) var(--vt-space-base);
  --vt-button-padding-lg: var(--vt-space-lg) var(--vt-space-xl);
  --vt-button-radius: var(--vt-radius-full);
  --vt-button-shadow: var(--vt-shadow-sm);
  --vt-button-shadow-hover: var(--vt-shadow-base);

  --vt-card-padding: var(--vt-space-lg) var(--vt-space-xl);
  --vt-card-radius: var(--vt-radius-xl);
  --vt-card-shadow: var(--vt-shadow-base);

  --vt-input-padding: var(--vt-space-sm) var(--vt-space-md);
  --vt-input-radius: var(--vt-radius-xs);
  --vt-input-border: 1px solid var(--vt-color-outline-variant);
  --vt-input-border-focus: 1px solid var(--vt-color-primary);
}

/* Dark Theme Override */
@media (prefers-color-scheme: dark) {
  :root {
    --vt-color-primary: #FFB68B;
    --vt-color-primary-container: #6F3811;
    --vt-color-on-primary: #522300;
    --vt-color-on-primary-container: #FFDBC8;

    --vt-color-secondary: #E5BFA9;
    --vt-color-secondary-container: #5C4131;
    --vt-color-on-secondary: #432B1C;
    --vt-color-on-secondary-container: #FFDBC8;

    --vt-color-tertiary: #CCC992;
    --vt-color-tertiary-container: #4A491E;
    --vt-color-on-tertiary: #333209;
    --vt-color-on-tertiary-container: #E8E5AC;

    --vt-color-error: #FFB4AB;
    --vt-color-error-container: #93000A;
    --vt-color-on-error: #690005;
    --vt-color-on-error-container: #FFDAD6;

    --vt-color-background: #1A120D;
    --vt-color-on-background: #F0DFD7;
    --vt-color-surface: #1A120D;
    --vt-color-on-surface: #F0DFD7;
    --vt-color-surface-variant: #52443C;
    --vt-color-on-surface-variant: #D7C2B8;
    --vt-color-surface-container-lowest: #140D08;
    --vt-color-surface-container-low: #221A15;
    --vt-color-surface-container: #271E19;
    --vt-color-surface-container-high: #312823;
    --vt-color-surface-container-highest: #3D332D;
    --vt-color-surface-dim: #1A120D;
    --vt-color-surface-bright: #413732;

    --vt-color-outline: #9F8D84;
    --vt-color-outline-variant: #52443C;
    --vt-color-inverse-surface: #F0DFD7;
    --vt-color-inverse-on-surface: #382E29;
    --vt-color-inverse-primary: #8C4F26;
    --vt-color-surface-tint: #FFB68B;
  }
}