/* =============================================================
   Cardinal Quiz Converter — shared design tokens + primitives
   Spruce design system · Digital Transformation and Innovation, UIW
   Linked by index.html, new.html, classic.html. Edit tokens here only.

   Third-party: icon paths in the HTML pages are Feather Icons (MIT).
   Fonts: Inter, Instrument Serif, JetBrains Mono (SIL OFL 1.1).
   See THIRD_PARTY_NOTICES.md.
   ============================================================= */

:root {
    /* ---- Brand (UIW) ---------------------------------------- */
    --uiw-red:   #AA1010;
    --uiw-black: #121212;
    --uiw-gray:  #F2F2F2;
    --uiw-cream: #EEEEE7;

    /* ---- Cardinal (accent; primary actions + emphasis only) -- */
    --cardinal:        var(--uiw-red);
    --cardinal-hi:     #B81717;   /* gradient top */
    --cardinal-dark:   #8C0D0D;   /* hover/pressed, borders */
    --cardinal-ink:    #6E0A0A;   /* text on wash: 10.7:1 */
    --cardinal-wash:   #F7EDEC;   /* red on wash: 6.6:1 */
    --cardinal-border: #E3C9C7;

    /* ---- Neutrals -------------------------------------------- */
    --page:         var(--uiw-gray);
    --surface:      #FBFBF9;
    --white:        #FFFFFF;
    --cream:        var(--uiw-cream);
    --cream-soft:   #F2F2EC;
    --cream-border: #DADAD1;

    --ink:      var(--uiw-black);  /* on page: 16.7:1 */
    --gray-900: #1C1C1C;
    --gray-700: #3F3F3F;           /* on cream: 9.0:1 */
    --gray-600: #4F4F4F;
    --gray-500: #5E5E5E;           /* minimum text gray; on cream: 5.6:1 */
    --gray-400: #8A8A8A;           /* non-text only (icons, borders) */
    --gray-300: #C9C9C2;
    --gray-200: #E2E2DC;
    --gray-100: #ECECE7;
    --gray-50:  #F7F7F4;

    /* ---- Status (muted; state only, never decoration) ------- */
    --ok:            #2F6B4A;      /* on ok-soft: 5.5:1; white on ok: 6.3:1 */
    --ok-soft:       #EBF1EC;
    --ok-border:     #C5D8CB;
    --amber:         #7A5600;      /* on amber-soft: 5.8:1 */
    --amber-soft:    #F6F0DF;
    --amber-border:  #E2D3A6;
    --note:          var(--gray-700);
    --note-soft:     #ECECE8;
    --note-border:   #D6D6CF;
    --danger:        var(--cardinal);
    --danger-soft:   var(--cardinal-wash);
    --danger-border: var(--cardinal-border);

    /* ---- Spacing (4px base) ---------------------------------- */
    --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;

    /* ---- Radii ----------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ---- Type ------------------------------------------------ */
    --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --fs-xs:   11px;   /* eyebrows, kickers, badges */
    --fs-meta: 12px;   /* metadata, helper text */
    --fs-sm:   13px;   /* secondary UI */
    --fs-ui:   14px;   /* controls, list items */
    --fs-body: 15px;
    --fs-lead: 16px;

    /* ---- Depth ----------------------------------------------- */
    --shadow-xs: 0 1px 1px rgba(18,18,18,0.04);
    --shadow-sm: 0 1px 2px rgba(18,18,18,0.05), 0 1px 3px rgba(18,18,18,0.05);
    --shadow-md: 0 1px 2px rgba(18,18,18,0.04), 0 4px 8px -2px rgba(18,18,18,0.06), 0 12px 24px -8px rgba(18,18,18,0.08);
    --shadow-lg: 0 2px 4px rgba(18,18,18,0.04), 0 12px 24px -6px rgba(18,18,18,0.10), 0 28px 48px -16px rgba(18,18,18,0.14);
    --hl:        inset 0 1px 0 rgba(255,255,255,0.85);   /* top inner highlight */
    --well:      inset 0 1px 2px rgba(18,18,18,0.06);    /* recessed surfaces */
    --surface-grad: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
    --raised-grad:  linear-gradient(180deg, #FFFFFF 0%, #F3F3EF 100%);
    --sunken-grad:  linear-gradient(180deg, #EBEBE4 0%, #F0F0EA 100%);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");

    /* Wave edge (signature). Single tile, seamless at x=0/28. */
    --wave-h: 10px;
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 0H28V2.5C21 2.5 21 9.5 14 9.5S7 2.5 0 2.5Z'/%3E%3C/svg%3E");

    /* ---- Motion ---------------------------------------------- */
    --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Base ------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Focus ----------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--cardinal);
    outline-offset: 2px;
}
.btn:focus-visible { outline-offset: 3px; }

/* ---- Buttons --------------------------------------------------- */
.btn {
    font-family: var(--sans);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: 1;
    min-height: 40px;
    padding: 0 var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms var(--ease), box-shadow 160ms var(--ease),
                transform 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
/* Extends the hit area 3px above/below so the 1px hover-lift / press-drop
   can never move the button out from under the pointer mid-click. */
.btn::after {
    content: '';
    position: absolute;
    inset: -3px 0;
}
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Primary — the one red action per view */
.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--cardinal-hi) 0%, var(--cardinal) 100%);
    border-color: var(--cardinal-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16),
                0 1px 2px rgba(110,10,10,0.30),
                0 3px 8px -2px rgba(110,10,10,0.22);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.14);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #C01B1B 0%, #B01212 100%);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                0 2px 4px rgba(110,10,10,0.22),
                0 8px 16px -6px rgba(110,10,10,0.32);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    background: linear-gradient(180deg, var(--cardinal-dark) 0%, #9A0E0E 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
}

/* Dark — secondary brand action (black) */
.btn-dark {
    color: #fff;
    background: linear-gradient(180deg, #2A2A2A 0%, #151515 100%);
    border-color: #0A0A0A;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
                0 1px 2px rgba(0,0,0,0.30),
                0 3px 8px -2px rgba(0,0,0,0.20);
}
.btn-dark:hover:not(:disabled) {
    background: linear-gradient(180deg, #363636 0%, #1F1F1F 100%);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                0 2px 4px rgba(0,0,0,0.22),
                0 8px 16px -6px rgba(0,0,0,0.30);
}
.btn-dark:active:not(:disabled) {
    transform: translateY(0);
    background: linear-gradient(180deg, #111 0%, #1A1A1A 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
}

/* Secondary — raised neutral */
.btn-secondary {
    color: var(--ink);
    background: var(--raised-grad);
    border-color: var(--gray-300);
    box-shadow: var(--hl), var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
    border-color: var(--gray-400);
    box-shadow: var(--hl), var(--shadow-sm);
}
.btn-secondary:active:not(:disabled) {
    background: var(--sunken-grad);
    box-shadow: var(--well);
}

/* Ghost — tertiary / navigation */
.btn-ghost {
    color: var(--gray-600);
    background: transparent;
}
.btn-ghost:hover:not(:disabled) {
    color: var(--ink);
    background: rgba(18,18,18,0.05);
}
.btn-ghost:active:not(:disabled) { background: rgba(18,18,18,0.08); }

/* Success — download on completion */
.btn-success {
    color: #fff;
    background: linear-gradient(180deg, #367A55 0%, var(--ok) 100%);
    border-color: #275A3E;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16),
                0 1px 2px rgba(20,60,38,0.30),
                0 3px 8px -2px rgba(20,60,38,0.22);
    overflow: visible;
}
.btn-success:hover:not(:disabled) {
    background: linear-gradient(180deg, #3C855D 0%, #326F4E 100%);
    transform: translateY(-1px);
}
.btn-success:active:not(:disabled) {
    transform: translateY(0);
    background: linear-gradient(180deg, #275A3E 0%, #2C6446 100%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

/* Idle sparkle (New converter accent) */
.btn .sparkle {
    position: absolute; line-height: 1; color: #fff;
    pointer-events: none; opacity: 0;
    animation: sparkle-twinkle 2s ease-in-out infinite;
}
.btn .sparkle.s1 { top: 3px;    left: 18%;  font-size: 12px; animation-delay: 0s;    animation-duration: 1.8s; }
.btn .sparkle.s2 { bottom: 3px; right: 22%; font-size: 9px;  animation-delay: 0.5s;  animation-duration: 1.5s; }
.btn .sparkle.s3 { top: 35%;    right: 8%;  font-size: 13px; animation-delay: 1s;    animation-duration: 2.1s; }
.btn .sparkle.s4 { top: 50%;    left: 8%;   font-size: 8px;  animation-delay: 1.4s;  animation-duration: 1.6s; }
.btn .sparkle.s5 { top: 10%;    right: 40%; font-size: 10px; animation-delay: 0.25s; animation-duration: 1.9s; }
@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.1) rotate(25deg); }
}

/* ---- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .btn .sparkle { display: none; }
    .btn:hover, .btn:active { transform: none !important; }
}