@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  --color-primary: #4F626D;
  --color-primary-50: #D9DFE3;
  --color-primary-100: #D3DADF;
  --color-primary-200: #C1CCD2;
  --color-primary-300: #A3B3BD;
  --color-primary-400: #7A919F;
  --color-primary-500: #4F626D;
  --color-primary-600: #3E4D56;
  --color-primary-700: #2D383E;
  --color-primary-800: #1C2326;
  --color-primary-900: #0B0D0F;
  --color-primary-950: #020303;
  --color-accent: #D2D728;
  --color-accent-50: #FAFAE5;
  --color-accent-100: #F8F9DD;
  --color-accent-200: #F3F5C7;
  --color-accent-300: #ECEEA5;
  --color-accent-400: #E0E46C;
  --color-accent-500: #D2D728;
  --color-accent-600: #ACB120;
  --color-accent-700: #828619;
  --color-accent-800: #5C5F11;
  --color-accent-900: #323409;
  --color-accent-950: #222206;
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-text-heading: #0a0a0a;
  --color-text-body: #171717;
  --color-text-muted: #525252;
  --color-text-placeholder: #a3a3a3;
  --color-text-disabled: #d4d4d4;
  --color-text-link: #262626;
  --color-text-link-hover: #171717;
  --color-surface: #fafafa;
  --color-surface-variant: #f5f5f5;
  --color-surface-elevated: #ffffff;
  --color-border: #e5e5e5;
  --color-border-light: #f5f5f5;
  --color-border-dark: #d4d4d4;
  --color-semantic-success: #0d622c;
  --color-semantic-success-light: #98d7af;
  --color-semantic-success-border: #75a687;
  --color-semantic-success-readable: #0d622c;
  --color-semantic-error: #841717;
  --color-semantic-error-light: #ef9999;
  --color-semantic-error-border: #b77777;
  --color-semantic-error-readable: #841717;
  --color-semantic-warning: #7b4f06;
  --color-semantic-warning-light: #f9c66f;
  --color-semantic-warning-border: #aa8d5e;
  --color-semantic-warning-readable: #7b4f06;
  --color-semantic-info: #234e94;
  --color-semantic-info-light: #a3c4fb;
  --color-semantic-info-border: #7e97c0;
  --color-semantic-info-readable: #234e94;
  --color-primary-readable: #3e4d56;
  --color-text-muted-readable: #525252;
  --header-bg: #475660;
  --header-text: #ffffff;
  --header-link: #f5f5f5;
  --header-link-hover: #ffffff;
  --header-border: #4f616c;
  --footer-bg: #4f616c;
  --footer-text: #f5f5f5;
  --footer-link: #d4d4d4;
  --footer-link-hover: #ffffff;
  --footer-border: #4f616c;
  --nav-bg: #fafafa;
  --nav-text: #0a0a0a;
  --nav-link: #171717;
  --nav-link-hover: #0a0a0a;
  --nav-border: #e5e5e5;
  --color-btn-primary-bg: #d4d750;
  --color-btn-primary-text: #475660;
  --color-btn-primary-hover: #dadd6a;
  --color-btn-primary-border: #d8db62;
  --color-btn-secondary-bg: #d2d728;
  --color-btn-secondary-text: #475660;
  --color-btn-secondary-hover: #dadd6a;
  --color-btn-secondary-border: #d8db62;
  --font-family-heading: Ubuntu;
  --font-heading-weights: 400,700;
  --font-family-body: Ubuntu;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --border-width-thin: 1px;
  --border-width: 1px;
  --border-width-thick: 2px;
}

:root:where([data-theme-mode="light"]) {
  --color-primary: #4F626D;
  --color-primary-50: #D9DFE3;
  --color-primary-100: #D3DADF;
  --color-primary-200: #C1CCD2;
  --color-primary-300: #A3B3BD;
  --color-primary-400: #7A919F;
  --color-primary-500: #4F626D;
  --color-primary-600: #3E4D56;
  --color-primary-700: #2D383E;
  --color-primary-800: #1C2326;
  --color-primary-900: #0B0D0F;
  --color-primary-950: #020303;
  --color-accent: #D2D728;
  --color-accent-50: #FAFAE5;
  --color-accent-100: #F8F9DD;
  --color-accent-200: #F3F5C7;
  --color-accent-300: #ECEEA5;
  --color-accent-400: #E0E46C;
  --color-accent-500: #D2D728;
  --color-accent-600: #ACB120;
  --color-accent-700: #828619;
  --color-accent-800: #5C5F11;
  --color-accent-900: #323409;
  --color-accent-950: #222206;
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-text-heading: #0a0a0a;
  --color-text-body: #171717;
  --color-text-muted: #525252;
  --color-text-placeholder: #a3a3a3;
  --color-text-disabled: #d4d4d4;
  --color-text-link: #262626;
  --color-text-link-hover: #171717;
  --color-surface: #fafafa;
  --color-surface-variant: #f5f5f5;
  --color-surface-elevated: #ffffff;
  --color-border: #e5e5e5;
  --color-border-light: #f5f5f5;
  --color-border-dark: #d4d4d4;
  --color-semantic-success: #0d622c;
  --color-semantic-success-light: #98d7af;
  --color-semantic-success-border: #75a687;
  --color-semantic-success-readable: #0d622c;
  --color-semantic-error: #841717;
  --color-semantic-error-light: #ef9999;
  --color-semantic-error-border: #b77777;
  --color-semantic-error-readable: #841717;
  --color-semantic-warning: #7b4f06;
  --color-semantic-warning-light: #f9c66f;
  --color-semantic-warning-border: #aa8d5e;
  --color-semantic-warning-readable: #7b4f06;
  --color-semantic-info: #234e94;
  --color-semantic-info-light: #a3c4fb;
  --color-semantic-info-border: #7e97c0;
  --color-semantic-info-readable: #234e94;
  --color-primary-readable: #3e4d56;
  --color-text-muted-readable: #525252;
  --header-bg: #475660;
  --header-text: #ffffff;
  --header-link: #f5f5f5;
  --header-link-hover: #ffffff;
  --header-border: #4f616c;
  --footer-bg: #4f616c;
  --footer-text: #f5f5f5;
  --footer-link: #d4d4d4;
  --footer-link-hover: #ffffff;
  --footer-border: #4f616c;
  --nav-bg: #fafafa;
  --nav-text: #0a0a0a;
  --nav-link: #171717;
  --nav-link-hover: #0a0a0a;
  --nav-border: #e5e5e5;
  --color-btn-primary-bg: #d4d750;
  --color-btn-primary-text: #475660;
  --color-btn-primary-hover: #dadd6a;
  --color-btn-primary-border: #d8db62;
  --color-btn-secondary-bg: #d2d728;
  --color-btn-secondary-text: #475660;
  --color-btn-secondary-hover: #dadd6a;
  --color-btn-secondary-border: #d8db62;
  --font-family-heading: Ubuntu;
  --font-heading-weights: 400,700;
  --font-family-body: Ubuntu;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --border-width-thin: 1px;
  --border-width: 1px;
  --border-width-thick: 2px;
}

:root:where([data-theme-mode="dark"]) {
  --color-primary: #737373;
  --color-primary-50: #EBEBEB;
  --color-primary-100: #E3E3E3;
  --color-primary-200: #D6D6D6;
  --color-primary-300: #BFBFBF;
  --color-primary-400: #9E9E9E;
  --color-primary-500: #737373;
  --color-primary-600: #5C5C5C;
  --color-primary-700: #454545;
  --color-primary-800: #2E2E2E;
  --color-primary-900: #171717;
  --color-primary-950: #0D0D0D;
  --color-accent: #65758B;
  --color-accent-50: #EAEDF0;
  --color-accent-100: #E4E7EC;
  --color-accent-200: #D3D8DF;
  --color-accent-300: #B8C0CC;
  --color-accent-400: #929EB0;
  --color-accent-500: #65758B;
  --color-accent-600: #515E70;
  --color-accent-700: #3E4856;
  --color-accent-800: #2B323B;
  --color-accent-900: #181B21;
  --color-accent-950: #0D0F12;
  --color-background: #111827;
  --color-foreground: #f9fafb;
  --color-text-heading: #f9fafb;
  --color-text-body: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-text-link: #a3a3a3;
  --color-text-link-hover: #d4d4d4;
  --color-surface: #1f2937;
  --color-surface-variant: #374151;
  --color-surface-elevated: #4b5563;
  --color-border: #374151;
  --color-border-light: #4b5563;
  --color-border-dark: #1f2937;
  --color-semantic-success: #0c5b29;
  --color-semantic-success-light: #9dccaf;
  --color-semantic-success-border: #78a488;
  --color-semantic-success-readable: #92b59f;
  --color-semantic-error: #862323;
  --color-semantic-error-light: #f0a3a3;
  --color-semantic-error-border: #b87e7e;
  --color-semantic-error-readable: #cfa7a7;
  --color-semantic-warning: #764c05;
  --color-semantic-warning-light: #e5c692;
  --color-semantic-warning-border: #b19971;
  --color-semantic-warning-readable: #c1ae8f;
  --color-semantic-info: #214989;
  --color-semantic-info-light: #a3bde5;
  --color-semantic-info-border: #8097bc;
  --color-semantic-info-readable: #9badca;
  --color-primary-readable: #aeaeae;
  --color-text-muted-readable: #a6acb7;
  --header-bg: #0f172a;
  --header-text: #f1f5f9;
  --header-link: #a3a3a3;
  --header-link-hover: #d4d4d4;
  --header-border: #1e293b;
  --footer-bg: #0f172a;
  --footer-text: #cbd5e1;
  --footer-link: #a3a3a3;
  --footer-link-hover: #d4d4d4;
  --footer-border: #1e293b;
  --nav-bg: #1e293b;
  --nav-text: #f1f5f9;
  --nav-link: #cbd5e1;
  --nav-link-hover: #f1f5f9;
  --nav-border: #334155;
  --color-btn-primary-bg: #525252;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #404040;
  --color-btn-primary-border: #525252;
  --color-btn-secondary-bg: #374151;
  --color-btn-secondary-text: #f9fafb;
  --color-btn-secondary-hover: #4b5563;
  --color-btn-secondary-border: #4b5563;
  --font-family-heading: Inter;
  --font-heading-weights: 400,700;
  --font-family-body: Inter;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --border-width-thin: 1px;
  --border-width: 1px;
  --border-width-thick: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme-mode])) {
    --color-primary: #737373;
    --color-primary-50: #EBEBEB;
    --color-primary-100: #E3E3E3;
    --color-primary-200: #D6D6D6;
    --color-primary-300: #BFBFBF;
    --color-primary-400: #9E9E9E;
    --color-primary-500: #737373;
    --color-primary-600: #5C5C5C;
    --color-primary-700: #454545;
    --color-primary-800: #2E2E2E;
    --color-primary-900: #171717;
    --color-primary-950: #0D0D0D;
    --color-accent: #65758B;
    --color-accent-50: #EAEDF0;
    --color-accent-100: #E4E7EC;
    --color-accent-200: #D3D8DF;
    --color-accent-300: #B8C0CC;
    --color-accent-400: #929EB0;
    --color-accent-500: #65758B;
    --color-accent-600: #515E70;
    --color-accent-700: #3E4856;
    --color-accent-800: #2B323B;
    --color-accent-900: #181B21;
    --color-accent-950: #0D0F12;
    --color-background: #111827;
    --color-foreground: #f9fafb;
    --color-text-heading: #f9fafb;
    --color-text-body: #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-text-link: #a3a3a3;
    --color-text-link-hover: #d4d4d4;
    --color-surface: #1f2937;
    --color-surface-variant: #374151;
    --color-surface-elevated: #4b5563;
    --color-border: #374151;
    --color-border-light: #4b5563;
    --color-border-dark: #1f2937;
    --color-semantic-success: #0c5b29;
    --color-semantic-success-light: #9dccaf;
    --color-semantic-success-border: #78a488;
    --color-semantic-success-readable: #92b59f;
    --color-semantic-error: #862323;
    --color-semantic-error-light: #f0a3a3;
    --color-semantic-error-border: #b87e7e;
    --color-semantic-error-readable: #cfa7a7;
    --color-semantic-warning: #764c05;
    --color-semantic-warning-light: #e5c692;
    --color-semantic-warning-border: #b19971;
    --color-semantic-warning-readable: #c1ae8f;
    --color-semantic-info: #214989;
    --color-semantic-info-light: #a3bde5;
    --color-semantic-info-border: #8097bc;
    --color-semantic-info-readable: #9badca;
    --color-primary-readable: #aeaeae;
    --color-text-muted-readable: #a6acb7;
    --header-bg: #0f172a;
    --header-text: #f1f5f9;
    --header-link: #a3a3a3;
    --header-link-hover: #d4d4d4;
    --header-border: #1e293b;
    --footer-bg: #0f172a;
    --footer-text: #cbd5e1;
    --footer-link: #a3a3a3;
    --footer-link-hover: #d4d4d4;
    --footer-border: #1e293b;
    --nav-bg: #1e293b;
    --nav-text: #f1f5f9;
    --nav-link: #cbd5e1;
    --nav-link-hover: #f1f5f9;
    --nav-border: #334155;
    --color-btn-primary-bg: #525252;
    --color-btn-primary-text: #ffffff;
    --color-btn-primary-hover: #404040;
    --color-btn-primary-border: #525252;
    --color-btn-secondary-bg: #374151;
    --color-btn-secondary-text: #f9fafb;
    --color-btn-secondary-hover: #4b5563;
    --color-btn-secondary-border: #4b5563;
    --font-family-heading: Inter;
    --font-heading-weights: 400,700;
    --font-family-body: Inter;
    --font-body-weights: 400,700;
    --spacing-base: 4px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --border-width-thin: 1px;
    --border-width: 1px;
    --border-width-thick: 2px;
  }
}