@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root,
:root[data-theme="light"] {
    /* Surfaces — DESIGN.md §8.1 exact */
    --md-bg: #F4F4F6;
    --md-surface: #FFFFFF;
    --md-surface-low: #E2E4E9;
    --md-surface-high: #D0D2D7;
    --md-primary-container: #E2E4E9;
    --md-secondary-container: #E2E4E9;
    --md-tertiary-container: #E2E4E9;
    --md-error-container: #FFDAD6;
    --md-error: #BA1A1A;

    /* Brand primary — DESIGN.md §8.1 exact desaturated gray */
    --md-primary: #5C6370;
    --md-secondary: #5C6370;
    --md-tertiary: #5C6370;

    /* Text — DESIGN.md §8.1 exact */
    --md-on-primary: #FFFFFF;
    --md-on-primary-container: #212529;
    --md-on-secondary-container: #212529;
    --md-on-tertiary: #FFFFFF;
    --md-on-tertiary-container: #212529;
    --md-text: #212529;
    --md-text-sub: #868E96;
    --md-on-error-container: #410002;
    --md-mushaf-text: #212529;

    /* Borders — all transparent (user: hapus semua outline) */
    --md-outline: transparent;
    --md-outline-variant: transparent;

    /* Misc — DESIGN.md §8.1 exact desaturated values */
    --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);
    --focus-glow: 0 0 0 3px rgba(92, 99, 112, 0.15);

    /* Shape tokens — DESIGN.md §10.1 */
    --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);

    /* Fonts — Geist except Quranic text */
    --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mushaf: 'Noto Naskh Arabic', serif;
    --font-header: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-handwriting: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Type scale — DESIGN.md §9.2 */
    --md-type-display-large-size: 57px;
    --md-type-display-large-lh: 64px;
    --md-type-display-medium-size: 45px;
    --md-type-display-medium-lh: 52px;
    --md-type-display-small-size: 36px;
    --md-type-display-small-lh: 44px;
    --md-type-headline-large-size: 32px;
    --md-type-headline-large-lh: 40px;
    --md-type-headline-medium-size: 28px;
    --md-type-headline-medium-lh: 36px;
    --md-type-headline-small-size: 24px;
    --md-type-headline-small-lh: 32px;
    --md-type-title-large-size: 22px;
    --md-type-title-large-lh: 28px;
    --md-type-title-medium-size: 16px;
    --md-type-title-medium-lh: 24px;
    --md-type-title-small-size: 14px;
    --md-type-title-small-lh: 20px;
    --md-type-body-large-size: 16px;
    --md-type-body-large-lh: 24px;
    --md-type-body-medium-size: 14px;
    --md-type-body-medium-lh: 20px;
    --md-type-body-small-size: 12px;
    --md-type-body-small-lh: 16px;
    --md-type-label-large-size: 14px;
    --md-type-label-large-lh: 20px;
    --md-type-label-medium-size: 12px;
    --md-type-label-medium-lh: 16px;
    --md-type-label-small-size: 11px;
    --md-type-label-small-lh: 16px;

    /* Motion — DESIGN.md §11.1 */
    --md-motion-duration-instant: 100ms;
    --md-motion-duration-short: 200ms;
    --md-motion-duration-medium: 300ms;
    --md-motion-duration-long: 400ms;
    --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);

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