:root {
    --navy: oklch(0.27 0.055 260);
    --navy-soft: oklch(0.32 0.06 260);
    --gold: oklch(0.75 0.105 88);
    --gold-deep: oklch(0.52 0.09 80);
    --ivory: oklch(0.97 0.015 85);
    --surface: oklch(0.985 0.006 85);
    --gold-tint: oklch(0.95 0.035 85);
    --border: oklch(0.86 0.04 85);
    --muted: oklch(0.55 0.02 255);
    --success: oklch(0.49 0.12 153);
    --success-tint: oklch(0.94 0.035 153);
    --warning: oklch(0.48 0.12 75);
    --warning-tint: oklch(0.95 0.045 80);
    --danger: oklch(0.48 0.17 28);
    --danger-tint: oklch(0.95 0.035 28);
    --info: oklch(0.5 0.13 255);
    --focus: oklch(0.75 0.105 88 / 0.38);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-raised: 0 8px 24px oklch(0.27 0.055 260 / 0.1);
}

* { box-sizing: border-box; }
html { font-family: "Cairo", "Segoe UI", sans-serif; color: var(--navy); background: var(--ivory); }
body { margin: 0; min-width: 320px; overflow-wrap: anywhere; background: var(--ivory); font-size: 16px; line-height: 1.75; }
body.sidebar-open { overflow: hidden; }
a { color: var(--navy-soft); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.75rem; line-height: 1.4; margin-bottom: 4px; }
h2 { font-size: 1.25rem; line-height: 1.5; }
h3 { font-size: 1.08rem; }
p { max-width: 72ch; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--gold-tint); color: var(--navy); }

label { display: grid; gap: 6px; color: var(--navy); font-weight: 600; font-size: 0.9rem; }
input, select, textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--navy);
    padding: 9px 12px;
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
textarea { resize: vertical; line-height: 1.65; }
input:focus, select:focus, textarea:focus { border-color: var(--navy-soft); box-shadow: 0 0 0 3px var(--focus); outline: none; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.62; cursor: not-allowed; }
small { display: block; color: var(--muted); font-weight: 400; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin: 0 0 18px; }
legend { padding: 0 8px; font-weight: 700; }