/*
 * Base Element Styles
 *
 * Default styles for HTML elements in @layer base.
 * Replaces Pico CSS base styling with custom defaults.
 *
 * Categories:
 * - Body defaults (font, color, background)
 * - Typography (headings, paragraphs, links)
 * - Container utility
 * - Code elements
 * - Tables
 * - Form elements (solid backgrounds for accessibility)
 */

@layer base {
    /* ===== Body Defaults ===== */
    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        color: var(--color-text);
        background: var(--color-gray-50);  /* Light background for glass visibility */
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* ===== Typography ===== */

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: var(--space-md);
        color: var(--color-text);
    }

    h1 {
        font-size: var(--text-4xl);
    }

    h2 {
        font-size: var(--text-3xl);
    }

    h3 {
        font-size: var(--text-2xl);
    }

    h4 {
        font-size: var(--text-xl);
    }

    h5 {
        font-size: var(--text-lg);
    }

    h6 {
        font-size: var(--text-base);
    }

    /* Paragraphs */
    p {
        margin-top: 0;
        margin-bottom: var(--space-md);
    }

    /* Links */
    a {
        color: var(--color-primary);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    a:hover {
        color: var(--color-primary-hover);
        text-decoration: underline;
    }

    a:focus-visible {
        outline: var(--focus-ring-width) solid var(--color-focus);
        outline-offset: var(--focus-ring-offset);
        border-radius: 2px;
    }

    /* Lists (styled lists, not reset [role="list"]) */
    ul, ol {
        margin-top: 0;
        margin-bottom: var(--space-md);
        padding-left: var(--space-lg);
    }

    li {
        margin-bottom: var(--space-xs);
    }

    /* ===== Container Utility ===== */
    .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }

    /* ===== Code Elements ===== */
    code, pre, kbd, samp {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

    /* Inline code */
    code {
        background: var(--color-gray-100);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        color: hsl(220 18% 30%);
    }

    /* Code blocks */
    pre {
        background: hsl(220 18% 22%);
        color: var(--color-white);
        padding: var(--space-md);
        border-radius: var(--glass-radius);
        overflow-x: auto;
        margin-top: 0;
        margin-bottom: var(--space-md);
    }

    /* Reset inline code styling inside pre blocks */
    pre code {
        background: none;
        padding: 0;
        color: inherit;
        font-size: inherit;
    }

    /* ===== Table Styling ===== */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: var(--space-md);
    }

    th, td {
        padding: var(--space-sm) var(--space-md);
        text-align: left;
        border-bottom: 1px solid var(--color-border);
    }

    th {
        font-weight: 600;
        color: var(--color-text);
        background: var(--color-gray-50);
    }

    tr:hover {
        background: var(--color-gray-50);
    }

    /* ===== Form Elements ===== */
    /* Solid backgrounds for accessibility - never glass on inputs */

    input,
    select,
    textarea {
        display: block;
        width: 100%;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-base);
        font-family: var(--font-sans);
        color: var(--color-text);
        background-color: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 0.375rem;
        transition: border-color var(--transition-fast),
                    box-shadow var(--transition-fast);
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: none;
        border-color: var(--color-focus);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    /* Placeholder styling */
    input::placeholder,
    textarea::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    /* Select arrow styling */
    select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    /* Textarea */
    textarea {
        min-height: 100px;
        resize: vertical;
    }

    /* Labels */
    label {
        display: block;
        margin-bottom: var(--space-xs);
        font-weight: 500;
        color: var(--color-text);
    }

    /* Fieldset and legend */
    fieldset {
        border: 1px solid var(--color-border);
        border-radius: 0.375rem;
        padding: var(--space-md);
        margin: 0 0 var(--space-md) 0;
    }

    legend {
        padding: 0 var(--space-sm);
        font-weight: 600;
    }

    /* Buttons */
    button,
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-white);
        background-color: var(--color-primary);
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: background-color var(--transition-fast),
                    transform var(--transition-fast);
    }

    button:hover,
    .btn:hover {
        background-color: var(--color-primary-hover);
    }

    button:focus-visible,
    .btn:focus-visible {
        outline: var(--focus-ring-width) solid var(--color-focus);
        outline-offset: var(--focus-ring-offset);
    }

    button:active,
    .btn:active {
        transform: translateY(1px);
    }

    button:disabled,
    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Secondary button variant */
    button.secondary,
    .btn--secondary {
        background-color: var(--color-gray-200);
        color: var(--color-text);
    }

    button.secondary:hover,
    .btn--secondary:hover {
        background-color: var(--color-gray-300);
    }

    /* ===== Horizontal Rule ===== */
    hr {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: var(--space-lg) 0;
    }

    /* ===== Blockquote ===== */
    blockquote {
        margin: 0 0 var(--space-md) 0;
        padding: var(--space-md) var(--space-lg);
        border-left: 4px solid var(--color-primary);
        background: var(--color-gray-50);
        font-style: italic;
    }

    blockquote p:last-child {
        margin-bottom: 0;
    }

    /* ===== Small text ===== */
    small {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
    }

    /* ===== Strong and emphasis ===== */
    strong, b {
        font-weight: 600;
    }

    em, i {
        font-style: italic;
    }

    /* ===== Mark (highlight) ===== */
    mark {
        background-color: var(--color-warning);
        padding: 0.125rem 0.25rem;
        border-radius: 0.125rem;
    }

    /* ===== Focus Indicators (Keyboard Navigation) ===== */
    /* Using :focus-visible for keyboard-only indicators (not mouse clicks) */

    summary:focus-visible {
        outline: var(--focus-ring-width) solid var(--color-focus);
        outline-offset: var(--focus-ring-offset);
        border-radius: 2px;
    }

    details:focus-within summary {
        /* Highlight summary when details content is focused */
        color: var(--color-primary);
    }

    /* ===== Footer ===== */
    .footer {
        margin-top: var(--space-xl);
        padding: var(--space-md) 0;
        border-top: 1px solid var(--color-border);
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        text-align: center;
    }

    .footer-machine {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .footer-branding {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .footer-separator {
        margin: 0 var(--space-xs);
        opacity: 0.5;
    }

    .footer a {
        color: var(--color-primary);
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }

    @media (min-width: 768px) {
        .footer-content {
            flex-direction: row;
            justify-content: space-between;
        }
    }
}