/* ===================================================================
   ATQAN — infaq-frontend/css/variables.css
   Material 3 True Minimalist · Design Tokens & Color Variables
   =================================================================== */

:root[data-theme="light"] {
  --md-bg: #F4F4F6;
  --md-surface: #FFFFFF;
  --md-surface-low: #E2E4E9;
  --md-surface-high: #D0D2D7;
  --md-primary: #5C6370;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #E2E4E9;
  --md-on-primary-container: #212529;
  --md-secondary: #5C6370;
  --md-secondary-container: #E2E4E9;
  --md-on-secondary-container: #212529;
  --md-tertiary: #5C6370;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #E2E4E9;
  --md-on-tertiary-container: #212529;
  --md-outline: #868E96;
  --md-outline-variant: #E2E4E9;
  --md-text: #212529;
  --md-text-sub: #868E96;
  --md-error: #BA1A1A;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;
  --md-fab-glow-color: rgba(92, 99, 112, 0.2);
  --md-error-glow-color: rgba(186, 26, 26, 0.2);
  --elevation-1: none;
  --elevation-2: none;
  --focus-glow: 0 0 0 3px rgba(92, 99, 112, 0.15);
}

:root[data-theme="dark"] {
  --md-bg: #1A1C1E;
  --md-surface: #2D3033;
  --md-surface-low: #3E4246;
  --md-surface-high: #4F5358;
  --md-primary: #E2E4E9;
  --md-on-primary: #212529;
  --md-primary-container: #5C6370;
  --md-on-primary-container: #E2E4E9;
  --md-secondary: #E2E4E9;
  --md-secondary-container: #5C6370;
  --md-on-secondary-container: #E2E4E9;
  --md-tertiary: #E2E4E9;
  --md-on-tertiary: #212529;
  --md-tertiary-container: #5C6370;
  --md-on-tertiary-container: #E2E4E9;
  --md-outline: #868E96;
  --md-outline-variant: #5C6370;
  --md-text: #E2E4E9;
  --md-text-sub: #868E96;
  --md-error: #FFB4AB;
  --md-error-container: #93000A;
  --md-on-error-container: #FFDAD6;
  --md-fab-glow-color: rgba(226, 228, 233, 0.2);
  --md-error-glow-color: rgba(255, 180, 171, 0.2);
  --elevation-1: none;
  --elevation-2: none;
  --focus-glow: 0 0 0 3px rgba(226, 228, 233, 0.2);
}

:root {
  --md-shape-none: 0px;
  --md-shape-xs: 4px;
  --md-shape-s: 8px;
  --md-shape-m: 16px;
  --md-shape-l: 28px;
  --md-shape-xl: 28px;
  --md-shape-full: 9999px;

  --radius-full: var(--md-shape-full);
  --radius-xl: var(--md-shape-xl);
  --radius-lg: var(--md-shape-l);
  --radius-md: var(--md-shape-m);
  --radius-sm: var(--md-shape-s);
  --radius-card: var(--md-shape-xl);
  --radius-button: var(--md-shape-full);
  --radius-fab: var(--md-shape-full);
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --md-type-display-large-size: 57px;
  --md-type-display-large-weight: 400;
  --md-type-display-large-lh: 64px;
  --md-type-display-large-ls: -0.25px;

  --md-type-display-medium-size: 45px;
  --md-type-display-medium-weight: 400;
  --md-type-display-medium-lh: 52px;
  --md-type-display-medium-ls: 0px;

  --md-type-display-small-size: 36px;
  --md-type-display-small-weight: 400;
  --md-type-display-small-lh: 44px;
  --md-type-display-small-ls: 0px;

  --md-type-headline-large-size: 32px;
  --md-type-headline-large-weight: 400;
  --md-type-headline-large-lh: 40px;
  --md-type-headline-large-ls: 0px;

  --md-type-headline-medium-size: 28px;
  --md-type-headline-medium-weight: 400;
  --md-type-headline-medium-lh: 36px;
  --md-type-headline-medium-ls: 0px;

  --md-type-headline-small-size: 24px;
  --md-type-headline-small-weight: 400;
  --md-type-headline-small-lh: 32px;
  --md-type-headline-small-ls: 0px;

  --md-type-title-large-size: 22px;
  --md-type-title-large-weight: 500;
  --md-type-title-large-lh: 28px;
  --md-type-title-large-ls: 0px;

  --md-type-title-medium-size: 16px;
  --md-type-title-medium-weight: 500;
  --md-type-title-medium-lh: 24px;
  --md-type-title-medium-ls: 0.15px;

  --md-type-title-small-size: 14px;
  --md-type-title-small-weight: 500;
  --md-type-title-small-lh: 20px;
  --md-type-title-small-ls: 0.1px;

  --md-type-body-large-size: 16px;
  --md-type-body-large-weight: 400;
  --md-type-body-large-lh: 24px;
  --md-type-body-large-ls: 0.5px;

  --md-type-body-medium-size: 14px;
  --md-type-body-medium-weight: 400;
  --md-type-body-medium-lh: 20px;
  --md-type-body-medium-ls: 0.25px;

  --md-type-body-small-size: 12px;
  --md-type-body-small-weight: 400;
  --md-type-body-small-lh: 16px;
  --md-type-body-small-ls: 0.4px;

  --md-type-label-large-size: 14px;
  --md-type-label-large-weight: 500;
  --md-type-label-large-lh: 20px;
  --md-type-label-large-ls: 0.1px;

  --md-type-label-medium-size: 12px;
  --md-type-label-medium-weight: 500;
  --md-type-label-medium-lh: 16px;
  --md-type-label-medium-ls: 0.5px;

  --md-type-label-small-size: 11px;
  --md-type-label-small-weight: 500;
  --md-type-label-small-lh: 16px;
  --md-type-label-small-ls: 0.5px;

  --md-icon-fill-outlined: 0;
  --md-icon-fill-filled: 1;
  --md-icon-weight-normal: 400;
  --md-icon-weight-bold: 700;
  --md-icon-grade-normal: 0;
  --md-icon-optical-size-default: 24px;

  --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --md-motion-duration-instant: 100ms;
  --md-motion-duration-short: 200ms;
  --md-motion-duration-medium: 300ms;
  --md-motion-duration-long: 400ms;

  --transition-standard: all var(--md-motion-duration-medium) var(--md-motion-easing-emphasized);
  --transition-decelerate: all var(--md-motion-duration-short) var(--md-motion-easing-emphasized);
  --transition-accelerate: all var(--md-motion-duration-short) var(--md-motion-easing-standard);
  --transition: var(--transition-standard);
}