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

@font-face {
  font-family: 'KFGQPC_UthmanicHafs';
  src: url('https://cdn.jsdelivr.net/gh/keyvan-m-sadeghi/quran-hafs-font@master/UthmanicHafs.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'KFGQPC Uthman Taha Naskh';
  src: url('../assets/fonts/font_quran.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'La Belle Aurore';
  src: url('../assets/fonts/LaBelleAurore.woff2') format('woff2'),
       url('../assets/fonts/LaBelleAurore.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Uthman Naskh';
  src: local('KFGQPC Uthman Taha Naskh'),
       url('https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/various-woff2/UthmanTN1%20Ver10.woff2') format('woff2'),
       url('https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/various-woff/UthmanTN1%20Ver10.woff') format('woff');
}

@font-face {
  font-family: 'QPC Symbols';
  src: local('KFGQPC Arabic Symbols 01'),
       url('https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/various-woff2/Symbols1_Ver02.woff2') format('woff2'),
       url('https://cdn.rawgit.com/mustafa0x/qpc-fonts/f93bf5f3/various-woff/Symbols1_Ver02.woff') format('woff');
}

: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-warning: #B26A00;
  --md-warning-container: #FFE0B2;
  --md-on-warning-container: #3B2200;
  --md-success: #2F6B3C;
  --md-success-container: #D6F5DB;
  --md-on-success-container: #0D2D15;
  --md-uncertain: #868E96;
  --md-uncertain-container: #E2E4E9;
  --md-mushaf-text: #212529;
  --mushaf-highlight: rgba(92, 99, 112, 0.12);
  --md-fab-glow-color: rgba(92, 99, 112, 0.2);
  --md-error-glow-color: rgba(186, 26, 26, 0.2);
  --chat-bot-bubble-bg: #003527;
  --chat-bot-bubble-text: #FFFFFF;
  --chat-bot-bubble-border: rgba(255, 255, 255, 0.2);
  --chat-user-bubble-bg: #FFFFFF;
  --chat-user-bubble-text: #003527;
  --chat-user-bubble-border: transparent;
  --chat-quick-reply-text: #FFFFFF;
  --chat-quick-reply-border: #FFFFFF;
  --chat-quick-reply-hover-bg: #FFFFFF;
  --chat-quick-reply-hover-text: #003527;
  --chat-quick-reply-disabled-text: rgba(255, 255, 255, 0.3);
  --chat-quick-reply-disabled-border: rgba(255, 255, 255, 0.3);
  --chat-submit-bg: #003527;
  --chat-submit-hover-bg: #00251c;
  --chat-submit-active-bg: #001c15;
  --chat-submit-text: #FFFFFF;
  --welcome-subtitle-text: #003527;
  --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-warning: #F2C27C;
  --md-warning-container: #5B3A00;
  --md-on-warning-container: #FFE0B2;
  --md-success: #B6E7C0;
  --md-success-container: #1E4D2A;
  --md-on-success-container: #D6F5DB;
  --md-uncertain: #B4BAC1;
  --md-uncertain-container: #5C6370;
  --md-mushaf-text: #E2E4E9;
  --mushaf-highlight: rgba(226, 228, 233, 0.18);
  --md-fab-glow-color: rgba(226, 228, 233, 0.2);
  --md-error-glow-color: rgba(255, 180, 171, 0.2);
  --chat-bot-bubble-bg: #16382B;
  --chat-bot-bubble-text: #F7FAF8;
  --chat-bot-bubble-border: rgba(255, 255, 255, 0.12);
  --chat-user-bubble-bg: #2D3033;
  --chat-user-bubble-text: #F7FAF8;
  --chat-user-bubble-border: rgba(255, 255, 255, 0.12);
  --chat-quick-reply-text: #F7FAF8;
  --chat-quick-reply-border: rgba(247, 250, 248, 0.75);
  --chat-quick-reply-hover-bg: #F7FAF8;
  --chat-quick-reply-hover-text: #16382B;
  --chat-quick-reply-disabled-text: rgba(247, 250, 248, 0.35);
  --chat-quick-reply-disabled-border: rgba(247, 250, 248, 0.28);
  --chat-submit-bg: #16382B;
  --chat-submit-hover-bg: #0F2A20;
  --chat-submit-active-bg: #0A2018;
  --chat-submit-text: #FFFFFF;
  --welcome-subtitle-text: #B6E7C0;
  --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;
  --font-handwriting: 'La Belle Aurore', cursive; 
  --font-mushaf: 'KFGQPC Uthman Taha Naskh';
  --font-mushaf-kfgqpc: 'KFGQPC Uthman Taha Naskh';

  --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);
}