/*
 * Maqam Academy Design Tokens
 *
 * Safe, global variables controlled by Super Admin > Design.
 * Component CSS belongs in app.css; page-specific visual values should bind to
 * these tokens instead of being duplicated in separate page stylesheets.
 */
:root{
  --design-body-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --design-heading-font:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --design-base-font-size:16px;
  --design-section-title-size:20px;
  --design-small-label-size:10px;
  --design-kicker-color:#155347;

  --design-page-side-gap:26px;
  --design-section-gap:13px;
  --design-card-radius:12px;
  --design-card-border-width:1px;
  --design-card-padding-x:16px;
  --design-card-padding-y:13px;
  --design-card-shadow:0 10px 30px rgba(12,35,30,.055);
  --design-card-surface-mix:88%;

  --design-icon-padding:3px;
  --design-icon-radius:6px;
  --design-icon-dark-bg:#DDE1D9;
  --design-maqamat-icon-size:40px;
  --design-maqamat-icon-x:0px;
  --design-maqamat-icon-y:0px;
  --design-ajnas-icon-size:40px;
  --design-ajnas-icon-x:0px;
  --design-ajnas-icon-y:0px;
  --design-practice-hero-icon-size:92px;
  --design-practice-card-icon-size:50px;
  --design-practice-result-icon-size:50px;

  --design-button-radius:8px;
  --design-button-font-size:10px;
  --design-button-pad-x:12px;
  --design-button-pad-y:8px;
  --design-dropdown-height:42px;
  --design-dropdown-radius:10px;
  --design-dropdown-font-size:11px;
  --design-compact-dropdown-height:36px;
  --design-compact-dropdown-radius:8px;
  --design-dropdown-menu-gap:8px;
  --design-dropdown-trigger-bg:#FAF7F3;
  --design-dropdown-trigger-text:#272623;
  --design-dropdown-trigger-border:#DED8CF;
  --design-dropdown-trigger-hover-bg:#FFFFFF;
  --design-dropdown-trigger-hover-border:#A0BDB5;
  --design-dropdown-trigger-disabled-bg:#F1EDE6;
  --design-dropdown-focus-border:#155347;
  --design-dropdown-menu-bg:#FAF7F3;
  --design-dropdown-menu-border:#DED8CF;
  --design-dropdown-group-bg:#FFFFFF;
  --design-dropdown-group-border:#DED8CF;
  --design-dropdown-group-title-bg:#EEF3F2;
  --design-dropdown-group-title-text:#0C231E;
  --design-dropdown-option-text:#272623;
  --design-dropdown-option-hover-bg:#F1EDE6;
  --design-dropdown-option-hover-text:#0C231E;
  --design-dropdown-option-selected-bg:#DDE1D9;
  --design-dropdown-option-selected-text:#0C231E;
  --design-dropdown-option-disabled-text:#969A97;
  --design-dropdown-icon-color:#155347;
  --design-dropdown-soon-bg:#F1EDE6;
  --design-dropdown-soon-text:#828681;
  --design-dropdown-soon-border:#DED8CF;

  --design-ajnas-stat-label-size:14px;
  --design-ajnas-stat-label-weight:700;
  --design-ajnas-stat-small-size:12px;

  --design-practice-answer-top-gap:22px;
  --design-practice-choice-font-size:14px;
  --design-practice-card-icon-top:20px;
  --design-practice-card-icon-right:20px;
  --design-practice-card-title-size:26px;
  --design-practice-card-title-description-gap:8px;
  --design-practice-card-copy-size:11px;
  --design-practice-start-button-gap:0px;
  --design-practice-start-button-x:0px;
  --design-practice-start-button-y:0px;
  --design-practice-session-label-size:9px;
  --design-practice-session-option-size:9.5px;
  --design-practice-result-dark-bg:#5F6966;
  --design-practice-rotated-watermark-display:block;
  --design-practice-rotated-watermark-x:0px;
  --design-practice-rotated-watermark-y:0px;
  --design-practice-rotated-watermark-rotation:-12deg;
  --design-practice-rotated-watermark-size:18px;
  --design-practice-rotated-watermark-color:#0C231E;
  --design-practice-rotated-watermark-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --design-practice-rotated-watermark-opacity:10;

  /* Maqam Lab page-only differences. Shared components keep their global tokens. */
  --design-lab-page-max-width:1180px;
  --design-lab-page-side-gap:18px;
  --design-lab-page-pad-top:34px;
  --design-lab-page-pad-bottom:60px;
  --design-lab-page-gap:18px;
  --design-lab-hero-pad-x:30px;
  --design-lab-hero-pad-y:28px;
  --design-lab-hero-gap:24px;
  --design-lab-hero-title-size:66px;
  --design-lab-hero-copy-size:13px;
  --design-lab-hero-icon-size:92px;
  --design-lab-hero-icon-x:0px;
  --design-lab-hero-icon-y:0px;
  --design-lab-hero-icon-rotation:3deg;
  --design-lab-settings-margin-top:18px;
  --design-lab-settings-margin-bottom:28px;
  --design-lab-settings-first-column:1.2fr;
  --design-lab-settings-second-column:.8fr;
  --design-lab-catalog-top-gap:4px;
  --design-lab-catalog-max-width:1180px;
  --design-lab-catalog-columns:3;
  --design-lab-catalog-card-min-height:300px;
  --design-lab-build-icon-scale:1;
  --design-lab-build-icon-x:0px;
  --design-lab-build-icon-y:0px;
  --design-lab-build-icon-rotation:0deg;
  --design-lab-tree-icon-scale:1;
  --design-lab-tree-icon-x:0px;
  --design-lab-tree-icon-y:0px;
  --design-lab-tree-icon-rotation:0deg;
  --design-lab-chess-icon-scale:1;
  --design-lab-chess-icon-x:0px;
  --design-lab-chess-icon-y:0px;
  --design-lab-chess-icon-rotation:0deg;
  --design-lab-harmony-icon-scale:1;
  --design-lab-harmony-icon-x:0px;
  --design-lab-harmony-icon-y:0px;
  --design-lab-harmony-icon-rotation:0deg;
  --design-lab-harmony-opacity:.62;
  --design-lab-tool-intro-gap:20px;
  --design-lab-tool-action-gap:10px;
  --design-lab-tool-title-size:30px;
  --design-lab-tool-copy-size:12px;
  --design-lab-tool-status-size:11px;

  --design-staff-watermark-display:inline;
  --design-staff-watermark-x:0px;
  --design-staff-watermark-y:0px;
  --design-staff-watermark-size:11px;
  --design-staff-watermark-color:#0C231E;
  --design-staff-watermark-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --design-staff-watermark-opacity:44;

  --design-staff-rotated-watermark-display:block;
  --design-staff-rotated-watermark-x:0px;
  --design-staff-rotated-watermark-y:0px;
  --design-staff-rotated-watermark-rotation:-12deg;
  --design-staff-rotated-watermark-size:18px;
  --design-staff-rotated-watermark-color:#0C231E;
  --design-staff-rotated-watermark-font:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --design-staff-rotated-watermark-opacity:10;


  /* Guide page */
  --design-guide-heading:#0C231E;
  --design-guide-text:#272623;
  --design-guide-muted:#5F6966;
  --design-guide-accent:#155347;
  --design-guide-kicker:#D39A4A;
  --design-guide-border:#DED8CF;
  --design-guide-section-bg:#FFFFFF;
  --design-guide-inner-bg:#FDFAF5;
  --design-guide-nav-active-bg:#DDE1D9;
  --design-guide-nav-active-text:#0C231E;
  --design-guide-index-bg:#0C231E;
  --design-guide-index-text:#FFFFFF;
  --design-guide-note-bg:#FBF3DF;
  --design-guide-page-max-width:1320px;
  --design-guide-page-side-gap:18px;
  --design-guide-hero-gap:30px;
  --design-guide-hero-pad-top:28px;
  --design-guide-hero-pad-bottom:34px;
  --design-guide-hero-title-size:86px;
  --design-guide-hero-lead-size:15px;
  --design-guide-hero-visual-radius:24px;
  --design-guide-hero-visual-padding:10px;
  --design-guide-hero-note-scale:1;
  --design-guide-hero-note-x:0px;
  --design-guide-hero-note-y:0px;
  --design-guide-hero-copy-x:0px;
  --design-guide-hero-copy-y:0px;
  --design-guide-hero-visual-x:0px;
  --design-guide-hero-visual-y:0px;
  --design-guide-nav-width:230px;
  --design-guide-nav-pad-x:14px;
  --design-guide-nav-pad-y:16px;
  --design-guide-nav-link-size:11px;
  --design-guide-nav-link-padding:8px;
  --design-guide-nav-link-radius:8px;
  --design-guide-nav-x:0px;
  --design-guide-nav-y:0px;
  --design-guide-section-gap:18px;
  --design-guide-section-pad-x:30px;
  --design-guide-section-pad-y:28px;
  --design-guide-section-radius:12px;
  --design-guide-section-title-size:36px;
  --design-guide-body-size:13px;
  --design-guide-large-copy-size:15px;
  --design-guide-subheading-size:27px;
  --design-guide-index-size:36px;
  --design-guide-index-radius:10px;
  --design-guide-index-font-size:10px;
  --design-guide-section-head-x:0px;
  --design-guide-section-head-y:0px;
  --design-guide-index-x:0px;
  --design-guide-index-y:0px;
  --design-guide-inner-gap:11px;
  --design-guide-inner-padding:17px;
  --design-guide-inner-radius:12px;
  --design-guide-inner-title-size:19px;
  --design-guide-inner-body-size:11px;
  --design-guide-visual-bg-top:#FFFFFF;
  --design-guide-visual-bg-bottom:#FDFAF5;
  --design-guide-visual-border:#DED8CF;
  --design-guide-visual-radius:14px;
  --design-guide-visual-padding:8px;
  --design-guide-visual-top-gap:20px;
  --design-guide-quarter-pad-x:34px;
  --design-guide-quarter-pad-top:24px;
  --design-guide-quarter-pad-bottom:20px;
  --design-guide-quarter-button-height:34px;
  --design-guide-quarter-button-radius:9px;
  --design-guide-quarter-button-font-size:10px;
  --design-guide-visual-teal:#155347;
  --design-guide-visual-gold:#D39A4A;
  --design-guide-visual-sage:#DDE1D9;
  --design-guide-visual-ivory:#FDFAF5;
  --design-guide-visual-ink:#0C231E;
  --design-guide-visual-muted:#5F6966;
  --design-guide-visual-plum:#76566D;
  --design-guide-visual-quarter:#C4624F;
  --design-guide-hero-glow-start:#FAE7B7;
  --design-guide-hero-glow-end:#A0BDB5;
  --design-guide-final-bg-start:#0C231E;
  --design-guide-final-bg-end:#17483E;
  --design-guide-final-heading:#FFFFFF;
  --design-guide-final-text:#D7E0DC;
  --design-guide-final-radius:18px;

}

html[data-theme="dark"]{
  --design-kicker-color:#A0BDB5;
  --design-card-shadow:0 12px 34px rgba(0,0,0,.26);
  --design-icon-dark-bg:#DDE1D9;
  --design-practice-result-dark-bg:#5F6966;
  --design-card-surface-mix:93%;
  --design-dropdown-trigger-bg:#111C18;
  --design-dropdown-trigger-text:#E7EEEA;
  --design-dropdown-trigger-border:#31433D;
  --design-dropdown-trigger-hover-bg:#15211D;
  --design-dropdown-trigger-hover-border:#A0BDB5;
  --design-dropdown-trigger-disabled-bg:#1B2824;
  --design-dropdown-focus-border:#A0BDB5;
  --design-dropdown-menu-bg:#14201C;
  --design-dropdown-menu-border:#31433D;
  --design-dropdown-group-bg:#15211D;
  --design-dropdown-group-border:#31433D;
  --design-dropdown-group-title-bg:#A0BDB5;
  --design-dropdown-group-title-text:#0C231E;
  --design-dropdown-option-text:#E7EEEA;
  --design-dropdown-option-hover-bg:#1B2824;
  --design-dropdown-option-hover-text:#F1F6F3;
  --design-dropdown-option-selected-bg:#29483F;
  --design-dropdown-option-selected-text:#F1F6F3;
  --design-dropdown-option-disabled-text:#88968F;
  --design-dropdown-icon-color:#A0BDB5;
  --design-dropdown-soon-bg:#1B2824;
  --design-dropdown-soon-text:#A5B0AB;
  --design-dropdown-soon-border:#31433D;

  --design-guide-heading:#F1F6F3;
  --design-guide-text:#E7EEEA;
  --design-guide-muted:#9BA9A3;
  --design-guide-accent:#A0BDB5;
  --design-guide-kicker:#FAE7B7;
  --design-guide-border:#31433D;
  --design-guide-section-bg:#15211D;
  --design-guide-inner-bg:#111C18;
  --design-guide-nav-active-bg:#29483F;
  --design-guide-nav-active-text:#F1F6F3;
  --design-guide-index-bg:#A0BDB5;
  --design-guide-index-text:#0C231E;
  --design-guide-note-bg:#2A261D;
}