/**
 * assets/css/variables.css
 * Design tokens (colors, typography, spacing, radii, shadows) + a lightweight
 * CSS reset. Loaded first, before layout.css and components.css, so every other
 * stylesheet can reference these custom properties.
 *
 * Visual direction (per brief Section 18): light background, white cards, deep
 * green/muted teal primary accent, subtle gold accent, dark text, soft borders,
 * light shadows, moderate rounded corners, generous spacing. No neon colors, no
 * heavy gradients, no childish or overly decorative Islamic patterns.
 */

/* ---------------------------------------------------------------------------
   1. CSS RESET (lightweight — not a full normalize.css, just the essentials)
--------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

img, picture, svg {
    display: block;
    max-width: 100%;
}

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

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

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* Respect reduced-motion preferences (accessibility, Phase 15) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS
--------------------------------------------------------------------------- */
:root {

    /* --- Color palette --- */
    --color-bg:              #FAFAF8;   /* light, warm off-white page background */
    --color-surface:         #FFFFFF;   /* white cards */
    --color-surface-alt:     #F3F5F3;   /* subtle alternate section background */

    --color-primary:         #1E5B4F;   /* deep green / muted teal — main accent */
    --color-primary-dark:    #163F37;   /* hover/active states */
    --color-primary-light:   #E7F0EE;   /* tinted backgrounds, badges */

    --color-accent-gold:     #B68A35;   /* subtle gold accent — use sparingly */
    --color-accent-gold-light: #F3E9D2;

    --color-text:            #1F2A24;   /* near-black, slightly warm dark text */
    --color-text-muted:      #5B6B64;
    --color-text-inverse:    #FFFFFF;

    --color-border:          #E3E7E4;   /* soft borders */
    --color-border-strong:   #C9D1CC;

    --color-success:         #2E7D52;
    --color-danger:          #B3423A;
    --color-warning:         #B68A35;

    /* --- Typography --- */
    /* System-font-first stack (fast, no external font request required).
       If a Google Font is added later for headings, load it in header.php
       with font-display: swap and update --font-heading below. */
    --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md:   1.125rem;  /* 18px */
    --fs-lg:   1.375rem;  /* 22px */
    --fs-xl:   1.75rem;   /* 28px */
    --fs-2xl:  2.25rem;   /* 36px */
    --fs-3xl:  2.75rem;   /* 44px */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --lh-tight:  1.2;
    --lh-normal: 1.6;

    /* --- Spacing scale (used for margin/padding/gap consistently) --- */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.5rem;   /* 24px */
    --space-6:  2rem;     /* 32px */
    --space-8:  3rem;     /* 48px */
    --space-10: 4rem;     /* 64px */
    --space-12: 6rem;     /* 96px */

    /* --- Radii --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* --- Shadows (kept very light per brief) --- */
    --shadow-sm: 0 1px 2px rgba(31, 42, 36, 0.06);
    --shadow-md: 0 4px 12px rgba(31, 42, 36, 0.08);
    --shadow-lg: 0 10px 24px rgba(31, 42, 36, 0.10);

    /* --- Layout sizing (referenced by layout.css in Step 1.2) --- */
    --header-height: 72px;
    --sidebar-width: 220px;
    --content-max-width: 1200px;

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* ---------------------------------------------------------------------------
   3. BASE ELEMENT STYLES
--------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* Visible focus states for accessibility (Phase 15) — never remove outline
   without providing this replacement. Includes <summary> (Step 15.1a) for
   the native <details>/<summary> Policies accordion (Step 9.1) — it's
   keyboard-operable by default but wasn't covered by this list before. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}