/* Core Styles - CSS Variables, Reset, and Base Typography */

/* CSS Variables - Overlay positioning and sizing variables - easily adjustable */
:root {
    --brand-gold: #FBBF24;
    --brand-gold-deep: #d59a12;
    --brand-gold-soft: #f1c75a;
    --overlay-width: 80%; /* Width as percentage of screen */
    --overlay-max-width: 1800px; /* Maximum width in pixels */
    --overlay-height: auto; /* Height - auto for content-based */
    --overlay-top: 50%; /* Vertical position */
    --overlay-left: 50%; /* Horizontal position */
    --overlay-padding: 40px; /* Legacy internal padding token */
    --overlay-border-radius: 12px; /* Corner roundness */
    --overlay-background: rgba(0, 0, 0, 0.7); /* Background opacity */
    --overlay-blur: 15px; /* Backdrop blur amount */
    --overlay-spacing: 24px;
    --overlay-title-item-gap: 12px;
    --overlay-title-divider-extra-space: 6px;
    --overlay-title-font-size: 20px;
    --overlay-title-letter-spacing: 0.04em;
    --overlay-title-field-min-width: 200px;
    --overlay-title-inactive-background: rgba(251, 191, 36, 0.05);
    --overlay-title-shell-base: #1a1a1a;
    --overlay-title-text-color: rgba(251, 191, 36, 0.62);
    --overlay-title-background-color: var(--overlay-title-inactive-background);
    --overlay-title-active-background-color: color-mix(in srgb, var(--brand-gold) 62%, var(--overlay-title-shell-base) 38%);
    --overlay-title-active-text-color: color-mix(in srgb, var(--brand-gold) 5%, var(--overlay-title-shell-base) 95%);
    --overlay-title-active-background: var(--overlay-title-active-background-color);
    --overlay-title-filled-inactive-background: rgba(251, 191, 36, 0.05);
    --reader-selection-background: var(--overlay-title-filled-inactive-background);
    --reader-selection-text-color: var(--brand-gold);
    --reader-selection-border-color: rgba(251, 191, 36, 0.75);
    --overlay-focus-ring-color: rgba(251, 191, 36, 0.9);
    --overlay-focus-ring-width: 2px;
    --overlay-focus-ring-offset: -2px;
    --overlay-title-separator-font-size: 21px;
    --overlay-section-label-inline-offset: 0px;
    --overlay-input-state-label-scale: 1.25;
    --input-text-content-padding-inline: 16px;
    --input-title-left-offset: var(--overlay-section-label-inline-offset);
    --overlay-shell-padding-top: 42px;
    --overlay-shell-padding-inline: var(--overlay-spacing, 16px);
    --overlay-shell-padding-bottom: var(--overlay-spacing, 16px);
    --overlay-button-label-scale: 2;
    --overlay-secondary-button-font-size: 14px;
    --overlay-hero-button-font-size: 16px;
    --overlay-hero-button-min-height: 144px;
    --overlay-primary-action-width: 120px;
    --overlay-primary-action-min-height: 96px;
    --overlay-primary-action-padding-block: 8px;
    --overlay-primary-action-padding-inline: 12px;
    --overlay-primary-action-border-radius: 12px;
    --overlay-primary-action-icon-width: 16px;
    --overlay-primary-action-label-font-family: inherit;
    --overlay-primary-action-label-font-size: calc(var(--overlay-hero-button-font-size, 16px) * var(--overlay-button-label-scale, 2));
    --overlay-primary-action-label-font-weight: 400;
    --overlay-primary-action-label-line-height: 1.1;
    --overlay-primary-action-label-letter-spacing: 0.01em;
    --overlay-primary-action-active-text-color: #1a1a1a;
    --overlay-primary-action-active-border-color: #d59a12;
    --overlay-primary-action-active-background: linear-gradient(135deg, #d59a12 0%, #FBBF24 52%, #f1c75a 100%);
    --overlay-primary-action-active-background-hover: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-soft) 48%, #ffe29a 100%);
    --overlay-primary-action-active-shadow: 0 10px 24px rgba(213, 154, 18, 0.24);
    --mobile-overlay-hero-action-height: 144px;
    --mobile-reader-swipe-zone-height: clamp(96px, 17dvh, 160px);
    --mobile-reader-overlay-max-height: 80dvh;
    --overlay-top-offset: 5vh;
    --overlay-shell-anchor-top: var(--overlay-top-offset, 5vh);
    --overlay-shell-height: 72vh;
    --fullchunkdisplay-font-size-min: 14px;
    --fullchunkdisplay-font-size-max: 48px;
    --input-text-font-size-min: var(--fullchunkdisplay-font-size-min);
    --input-text-font-size-max: var(--fullchunkdisplay-font-size-max);
    --pageviewmode-font-size-min: 18px;
    --pageviewmode-font-size-max: 72px;
    --input-text-viewport-height: clamp(220px, 34vh, 420px);
    --input-text-viewport-max-height: min(420px, calc(100vh - var(--overlay-shell-anchor-top, var(--overlay-top-offset, 5vh)) - 260px));
    --pageview-text-viewport-top-gap: 64px;
    --pageview-text-viewport-bottom-gap: 32px;
    --fullchunk-text-viewport-top-gap: 16px;
    --fullchunk-text-viewport-bottom-gap: 32px;
    --reader-text-viewport-side-gap: 12px;
    --options-offset-below-overlay: 5vh;
    --options-pill-row-height: 52px;
    --input-dock-pill-min-width: 160px;
    --input-dock-pill-min-height: 52px;
    --input-dock-pill-padding-block: 10px;
    --input-dock-pill-padding-inline: 18px;
    --input-dock-pill-radius: 999px;
    --input-dock-pill-border-color: rgba(255, 255, 255, 0.32);
    --input-dock-pill-background: rgba(255, 255, 255, 0.04);
    --input-dock-pill-text-color: rgba(255, 255, 255, 0.84);
    --input-dock-pill-font-size: 17px;
    --input-dock-pill-font-weight: 700;
    --input-dock-pill-letter-spacing: 0.02em;
    --input-dock-pill-hover-border-color: rgba(255, 255, 255, 0.62);
    --input-dock-pill-hover-background: rgba(255, 255, 255, 0.08);
    --input-dock-pill-hover-text-color: rgba(255, 255, 255, 0.96);
    --input-dock-pill-hover-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    --input-dock-pill-toggle-active-background: transparent;
    --input-dock-pill-toggle-active-border-color: rgba(251, 191, 36, 0.75);
    --input-dock-pill-toggle-active-text-color: var(--brand-gold);
    --input-dock-pill-toggle-active-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35);
    --input-dock-pill-toggle-inactive-background: var(--input-dock-pill-background);
    --input-dock-pill-toggle-inactive-border-color: var(--input-dock-pill-border-color);
    --input-dock-pill-toggle-inactive-text-color: var(--input-dock-pill-text-color);
    --input-dock-pill-menu-active-background: transparent;
    --input-dock-pill-menu-active-border-color: rgba(251, 191, 36, 0.75);
    --input-dock-pill-menu-active-text-color: var(--brand-gold);
    --input-dock-pill-menu-active-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35);
    --input-dock-menu-radius: 16px;
    --input-dock-menu-border-color: rgba(89, 255, 202, 0.28);
    --input-dock-menu-background: #31476b;
    --input-dock-menu-shadow: 0 24px 48px rgba(4, 12, 24, 0.42);
    --input-dock-menu-section-border-color: rgba(255, 255, 255, 0.14);
    --input-dock-menu-section-background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    --input-dock-backdrop-background: rgba(2, 6, 16, 0.42);
    --options-card-gap: 12px;
    --options-card-height: 300px;
    --options-card-viewport-gap: 8px;
    --options-card-viewport-fill: 0.8;
    --reader-input-link-reserve: 0px;
    --reader-input-expanded-overlay-height: calc(
        100dvh -
        var(--overlay-shell-anchor-top, var(--overlay-top-offset, 5vh)) -
        var(--reader-input-link-reserve) -
        env(safe-area-inset-bottom, 0px)
    );
    --mobile-overlay-inline-gutter: 24px;
    --overlay-link-offset-below-shell: 3vh;
    --overlay-bottom-anchor: calc(
        var(--overlay-shell-anchor-top, var(--overlay-top-offset, 5vh)) +
        var(--overlay-shell-height-effective, var(--overlay-shell-height, 50vh))
    );
    --input-text-color: var(--brand-gold);
    --input-placeholder-color: var(--input-text-color);
    --fullchunkdisplay-font-size: 22px;
    --input-text-font-size: var(--fullchunkdisplay-font-size);
    --pageviewmode-font-size: 38px;
    --fullchunk-font-size: 24px;
}

/* Reset Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

[disabled],
:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* HTML Element Styles */
html {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: none;
}

/* Base Body Styles */
body {
    font-family: 'Crimson Text', serif;
    background: linear-gradient(135deg, #0c1445 0%, #1a1a2e 50%, #16213e 100%);
    color: #ffffff;
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
    padding-bottom: 0;
    overscroll-behavior-y: none;
}