@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
/* Fonts */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/static/fonts/material-symbols-outlined.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-1.woff2') format('woff2');
  unicode-range: U+0020, U+00A0, U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-7.woff2') format('woff2');
  unicode-range: U+0020, U+00A0, U+0100-024F, U+1E00-1EFF, U+20A3-20BD, U+2113;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0323, U+2002, U+2009, U+200B, U+2013-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FEFF;
}

/* Dark Theme (Default) */
:root, html[data-theme="dark"] {
  --md-sys-color-primary: #00ff66;
  --md-sys-color-on-primary: #000000;
  --md-sys-color-primary-container: #121620;
  --md-sys-color-on-primary-container: #00ff66;

  --md-sys-color-secondary: #00f0ff;
  --md-sys-color-on-secondary: #000000;
  --md-sys-color-secondary-container: #002a30;
  --md-sys-color-on-secondary-container: #00f0ff;

  --md-sys-color-tertiary: #ff007f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #330019;
  --md-sys-color-on-tertiary-container: #ff007f;

  --md-sys-color-error: #ef4444;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #450a0a;
  --md-sys-color-on-error-container: #fca5a5;

  --md-sys-color-success: #00ff66;
  --md-sys-color-on-success: #000000;
  --md-sys-color-success-container: #121620;
  --md-sys-color-on-success-container: #00ff66;

  --md-sys-color-background: #060709;
  --md-sys-color-on-background: #f8fafc;
  --md-sys-color-surface: #0a0b0e;
  --md-sys-color-on-surface: #f8fafc;
  --md-sys-color-surface-variant: #141720;
  --md-sys-color-on-surface-variant: #94a3b8;
  --md-sys-color-surface-container-lowest: #040507;
  --md-sys-color-surface-container-low: #0a0b0e;
  --md-sys-color-surface-container: #141720;
  --md-sys-color-surface-container-high: #262b3a;
  --md-sys-color-surface-container-highest: #475569;

  --md-sys-color-outline: #262b3a;
  --md-sys-color-outline-variant: #141720;

  --ui-border: var(--md-sys-color-outline-variant);
  --ui-surface: var(--md-sys-color-surface);
  --ui-surface-raised: var(--md-sys-color-surface-container);
  --ui-focus-ring: 0 0 0 3px rgba(0, 240, 255, 0.22);
}

/* Light Theme */
html[data-theme="light"] {
  --md-sys-color-primary: #00993d;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e6f9ed;
  --md-sys-color-on-primary-container: #004d1f;

  --md-sys-color-secondary: #007a8a;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #e0f6fa;
  --md-sys-color-on-secondary-container: #00373e;

  --md-sys-color-tertiary: #d80068;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffe5f1;
  --md-sys-color-on-tertiary-container: #60002b;

  --md-sys-color-error: #dc2626;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fef2f2;
  --md-sys-color-on-error-container: #991b1b;

  --md-sys-color-success: #00993d;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #e6f9ed;
  --md-sys-color-on-success-container: #004d1f;

  --md-sys-color-background: #f8fafc;
  --md-sys-color-on-background: #0a0b0e;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #0a0b0e;
  --md-sys-color-surface-variant: #f1f5f9;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafc;
  --md-sys-color-surface-container: #f1f5f9;
  --md-sys-color-surface-container-high: #e2e8f0;
  --md-sys-color-surface-container-highest: #cbd5e1;

  --md-sys-color-outline: #cbd5e1;
  --md-sys-color-outline-variant: #e2e8f0;

  --ui-border: var(--md-sys-color-outline-variant);
  --ui-surface: var(--md-sys-color-surface);
  --ui-surface-raised: var(--md-sys-color-surface-container);
}

/* Global Tokens */
:root {
  --md-sys-elevation-1: 0 0 10px rgba(0, 255, 102, 0.1);
  --md-sys-elevation-2: 0 0 15px rgba(0, 240, 255, 0.15);
  --md-sys-elevation-3: 0 0 25px rgba(255, 0, 127, 0.2);
  --md-sys-elevation-4: 0 0 35px rgba(0, 255, 102, 0.25);

  --md-shadow-sm: 0 0 5px rgba(0, 255, 102, 0.1);
  --md-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
  --md-shadow-md: 0 0 15px rgba(255, 0, 127, 0.2);
  --md-shadow-lg: 0 0 25px rgba(0, 255, 102, 0.25);

  --md-spacing-xs: 4px;
  --md-spacing-sm: 8px;
  --md-spacing-md: 12px;
  --md-spacing-lg: 16px;
  --md-spacing-xl: 24px;
  --md-spacing-2xl: 32px;
  --md-spacing-3xl: 40px;
  --md-spacing-4xl: 48px;

  --ui-content-max: 1400px;
  --ui-page-space: clamp(20px, 3vw, 40px);
  --ui-gutter: clamp(12px, 2.4vw, 24px);
  --ui-gap: clamp(12px, 1.8vw, 24px);

  --md-sys-shape-corner-extra-small: 0px;
  --md-sys-shape-corner-small: 0px;
  --md-sys-shape-corner-medium: 0px;
  --md-sys-shape-corner-large: 0px;
  --md-sys-shape-corner-extra-large: 0px;
  --md-sys-shape-corner-full: 0px;

  --md-container-padding: var(--md-spacing-lg);

  --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-standard: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  --md-accent-gradient: linear-gradient(135deg, #00ff66 0%, #00f0ff 50%, #ff007f 100%);
  --md-chip-bg: rgba(0, 255, 102, 0.1);
}
}