/* ============================================
   ديوان قراءات — Theme Variables
   ============================================ */

:root {
    /* --- Button & Badge --- */
    --button-outline: #0000001a;
    --badge-outline: #0000000d;
    --opaque-button-border-intensity: -8;
    --elevate-1: #00000008;
    --elevate-2: #00000014;

    /* --- Core Colors (HSL) --- */
    --background: 45 40% 97%;
    --foreground: 210 23% 20%;
    --border: 45 20% 88%;
    --input: 45 20% 88%;
    --ring: 210 25% 22%;

    /* --- Card --- */
    --card: 45 50% 99%;
    --card-foreground: 210 23% 20%;
    --card-border: 45 20% 88%;

    /* --- Popover --- */
    --popover: 45 50% 99%;
    --popover-foreground: 210 23% 20%;
    --popover-border: 45 20% 88%;

    /* --- Primary (Dark Green) --- */
    --primary: 210 27% 24%;
    --primary-foreground: 45 40% 97%;

    /* --- Secondary (Gold) --- */
    --secondary: 35 12% 69%;
    --secondary-foreground: 210 23% 18%;

    /* --- Muted --- */
    --muted: 45 20% 92%;
    --muted-foreground: 210 15% 25%;

    /* --- Accent --- */
    --accent: 35 12% 69%;
    --accent-foreground: 210 23% 18%;

    /* --- Destructive --- */
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 98%;

    /* --- Fonts --- */
    --app-font-sans: "Cairo", sans-serif;
    --app-font-serif: "Noto Naskh Arabic", serif;
    --app-font-mono: monospace;

    /* --- Radius --- */
    --radius: 0.5rem;

    /* --- Shadows --- */
    --shadow-2xs: 0px 2px 0px 0px #1b322a0d;
    --shadow-xs: 0px 2px 0px 0px #1b322a0d;
    --shadow-sm: 0px 2px 0px 0px #1b322a0d, 0px 1px 2px -1px #1b322a0d;
    --shadow: 0px 2px 0px 0px #1b322a0d, 0px 1px 2px -1px #1b322a0d;
    --shadow-md: 0px 2px 0px 0px #1b322a0d, 0px 2px 4px -1px #1b322a0d;
    --shadow-lg: 0px 2px 0px 0px #1b322a0d, 0px 4px 6px -1px #1b322a0d;
    --shadow-xl: 0px 2px 0px 0px #1b322a0d, 0px 8px 10px -1px #1b322a0d;

    /* --- Borders (computed) --- */
    --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

/* ============================================
   Base Styles
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--app-font-sans);
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: hsl(var(--background));
    font-family: var(--app-font-sans);
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    border-color: hsl(var(--border));
}

img,
svg,
video {
    vertical-align: middle;
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ol,
ul,
menu {
    list-style: none;
}

/* ============================================
   Utility: Hover Elevate
   ============================================ */
.hover-elevate {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-elevate:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.active-elevate-2:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}