/* ============================================================
   أديم — Adeem design tokens (mockup system)
   Direction: "بطاقة الدور" — the queue ticket as brand identity.
   Deep oasis green world · warm sand paper · saffron = your turn.
   ============================================================ */

:root {
    /* --- Brand core: institutional navy --- */
    --ink: #0F1B2D;          /* navy-black text */
    --deep: #16325C;         /* deep navy — dominant brand */
    --deep-2: #1E4276;       /* lighter brand for hovers/fills */
    --deep-3: #2A5A96;       /* brightest brand tint */

    /* --- Clinical light world (kiosk, staff) --- */
    --sand: #F5F7FA;         /* app background (cool gray-white) */
    --sand-2: #E8EDF3;       /* recessed surfaces */
    --paper: #FFFFFF;        /* cards / ticket paper */
    --line: #D6DEE8;         /* hairlines */
    --muted: #64748B;        /* secondary text */

    /* --- Night world (TV screen) --- */
    --night: #0A1220;        /* TV background */
    --night-2: #101C30;      /* TV panel */
    --night-line: #22314A;   /* TV hairline */
    --night-text: #F2F6FB;
    --night-muted: #8CA0BC;

    /* --- The one loud color: YOUR TURN --- */
    --saffron: #0891B2;      /* bright medical cyan */
    --saffron-deep: #0E7490;
    --saffron-glow: rgba(8, 145, 178, 0.35);

    /* --- Lane colors (visit types) --- */
    --lane-appt: #2563C4;    /* موعد */
    --lane-walkin: #B45309;  /* بدون موعد */
    --lane-priority: #047857;/* أولوية */

    /* --- Status --- */
    --ok: #157347;
    --warn: #9A6700;
    --danger: #B42318;

    /* --- Shape & rhythm --- */
    --r-s: 10px;
    --r-m: 16px;
    --r-l: 24px;
    --shadow-1: 0 1px 2px rgba(12, 31, 26, 0.06), 0 4px 16px rgba(12, 31, 26, 0.05);
    --shadow-2: 0 2px 6px rgba(12, 31, 26, 0.08), 0 16px 40px rgba(12, 31, 26, 0.10);

    /* --- Type --- */
    --f-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --f-body: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

:focus-visible {
    outline: 3px solid var(--saffron-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

button { font: inherit; cursor: pointer; }

/* ============================================================
   SIGNATURE — .ticket : the tear-off queue ticket
   A lane-colored band, perforation notches, tabular numerals.
   Set --notch to the surrounding background color.
   ============================================================ */
.ticket {
    --lane: var(--lane-appt);
    --notch: var(--sand);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18em 0.75em 0.18em 0.85em;
    border-inline-start: 0.5em solid var(--lane);
    border-radius: 0.5em;
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lane) 38%, transparent),
                0 1px 3px rgba(12, 31, 26, 0.12);
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    white-space: nowrap;
    direction: ltr; /* ticket codes read A017 left-to-right */
}

/* perforation notches at the band tear-line */
.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.22em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--notch);
}

.ticket::before { top: -0.30em; }
.ticket::after  { bottom: -0.30em; }

.ticket--appt     { --lane: var(--lane-appt); }
.ticket--walkin   { --lane: var(--lane-walkin); }
.ticket--priority { --lane: var(--lane-priority); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 26px;
    border: none;
    border-radius: var(--r-m);
    background: var(--deep);
    color: #fff;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--deep-2); }
.btn:active { transform: scale(0.98); }

.btn--quiet {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--line);
    color: var(--deep);
}

.btn--quiet:hover { background: var(--sand-2); }

.btn--saffron {
    background: var(--saffron);
    color: #fff;
}

.btn--saffron:hover { background: #0AA3C8; }

/* Lane legend dot */
.lane-dot {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    border-radius: 0.28em;
    vertical-align: -0.08em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}