/**
 * Swiss Design System - Athena
 *
 * Core design tokens and utilities following Swiss/International Typographic Style principles:
 * - Zero border-radius (sharp geometric forms)
 * - BIZ UDPGothic for Japanese text + JetBrains Mono for code
 * - Pure monochrome palette with high contrast
 * - Grid-based layouts with mathematical precision
 */

/* ═══════════════════════════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Backgrounds - Pure neutrals */
    --bg-page: #F5F5F5;
    --bg-surface: #FFFFFF;
    --bg-subtle: #E5E5E5;
    --bg-hover: #EBEBEB;

    /* Text - High contrast blacks */
    --text-primary: #0A0A0A;
    --text-secondary: #3D3D3D;
    --text-tertiary: #5C5C5C;
    --text-muted: #8A8A8A;

    /* Accent - Monochrome */
    --accent: #1C1C1C;
    --accent-hover: #0A0A0A;
    --accent-light: #E5E5E5;

    /* Borders */
    --border: #B8B8B8;
    --border-light: #E5E5E5;

    /* Functional colors - readability first, not decoration */
    --error: #DC2626;
    --error-bg: #FEF2F2;
    --error-border: #FECACA;
    --success: #3ECF8E;
    --success-bg: #ECFDF5;
    --success-border: #A7F3D0;
    --warning: #D97706;
    --warning-bg: #FFFBEB;
    --warning-border: #FDE68A;
}

/* ═══════════════════════════════════════════════════════════════
   SWISS DESIGN RESET
   ═══════════════════════════════════════════════════════════════ */

/* Swiss design: no border-radius anywhere */
* {
    border-radius: 0 !important;
}

body {
    font-family: 'BIZ UDPGothic', 'Helvetica Neue', 'Arial', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Display text - Headlines and titles */
.font-display {
    font-family: 'BIZ UDPGothic', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Monospace - Code, dates, technical data */
.font-mono {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Display scale - Dramatic Swiss typographic contrast (4:1+ ratio vs body) */
.text-display-xl {
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.text-display-lg {
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Uppercase labels - Swiss style categorical markers */
.label-swiss {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   12-COLUMN MODULAR GRID (Muller-Brockmann)
   Mathematical foundation for all page layouts.
   12 columns divide by 1, 2, 3, 4, 6 — maximum flexibility.
   ═══════════════════════════════════════════════════════════════ */

.swiss-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem; /* 24px gutter */
}

/* Column span utilities */
.col-span-full { grid-column: 1 / -1; }
.col-span-8 { grid-column: span 8; }
.col-span-6 { grid-column: span 6; }
.col-span-5 { grid-column: span 5; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

/* Offset utilities - asymmetric placement */
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }

/* Content-width column: 8 cols centered (cols 3-10) */
.col-content {
    grid-column: 3 / 11;
}

/* Responsive: stack on mobile, grid on desktop */
@media (max-width: 767px) {
    .swiss-grid > * {
        grid-column: 1 / -1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 400ms ease-out forwards;
}

/* Alias used by auth pages */
.animate-fade-in-up {
    animation: fadeInUp 400ms ease forwards;
}

/* Staggered animation delays */
.animation-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animation-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animation-delay-3 { animation-delay: 0.3s; opacity: 0; }

@keyframes pulse-precise {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.animate-pulse-precise {
    animation: pulse-precise 1s ease-in-out infinite;
}

/* Spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR - Minimal Swiss style
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-subtle);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS STYLES - Precise, accessible
   ═══════════════════════════════════════════════════════════════ */
input:focus, textarea:focus {
    outline: none;
    border-color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR UTILITIES
   Named after graphite/pencil shades for consistency
   ═══════════════════════════════════════════════════════════════ */

/* Backgrounds */
.bg-page { background-color: #F5F5F5; }
.bg-surface { background-color: #FFFFFF; }
.bg-subtle { background-color: #E5E5E5; }
.bg-hover { background-color: #EBEBEB; }
.bg-pewter { background-color: #8A8A8A; }
.bg-charcoal { background-color: #1C1C1C; }
.bg-ink { background-color: #0A0A0A; }
.bg-ash { background-color: #E5E5E5; }
.bg-ash\/50 { background-color: rgba(229, 229, 229, 0.5); }
.bg-ash\/40 { background-color: rgba(229, 229, 229, 0.4); }
.bg-ash\/30 { background-color: rgba(229, 229, 229, 0.3); }

/* Text colors */
.text-surface { color: #FFFFFF; }
.text-ink { color: #0A0A0A; }
.text-charcoal { color: #1C1C1C; }
.text-graphite { color: #3D3D3D; }
.text-slate { color: #5C5C5C; }
.text-pewter { color: #8A8A8A; }
.text-silver { color: #B8B8B8; }

/* Borders */
.border-silver { border-color: #B8B8B8; }
.border-ash { border-color: #E5E5E5; }
.border-charcoal { border-color: #1C1C1C; }

/* Functional color utilities */
.text-error { color: var(--error); }
.bg-error-light { background-color: var(--error-bg); }
.border-error { border-color: var(--error); }
.border-error-light { border-color: var(--error-border); }
.text-success { color: var(--success); }
.bg-success-light { background-color: var(--success-bg); }
.border-success { border-color: var(--success); }
.border-success-light { border-color: var(--success-border); }
.text-warning { color: var(--warning); }
.bg-warning { background-color: var(--warning); }
.bg-warning-light { background-color: var(--warning-bg); }

/* Hover variants for custom colors */
.hover\:bg-ash:hover { background-color: #E5E5E5; }
.hover\:bg-hover:hover { background-color: #EBEBEB; }
.hover\:bg-silver:hover { background-color: #B8B8B8; }
.hover\:border-l-charcoal:hover { border-left-color: #1C1C1C; }
.hover\:text-error:hover { color: var(--error); }
.hover\:bg-error-light:hover { background-color: var(--error-bg); }

/* Group-hover variants */
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:pointer-events-auto { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   ALPINE.JS UTILITIES
   ═══════════════════════════════════════════════════════════════ */

/* Hide elements until Alpine initializes (prevents FOUC) */
[x-cloak] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DECORATIVE ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Heavy horizontal rule - Swiss structural element */
.decorative-line {
    width: 48px;
    height: 3px;
    background: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   RULED LINES - Structural beams (Muller-Brockmann)
   Heavy rules create architectural hierarchy, not decoration
   ═══════════════════════════════════════════════════════════════ */

/* Heavy bottom rule - primary section divider */
.rule-heavy {
    border-bottom: 3px solid var(--text-primary);
}

/* Section top rule - marks the start of a new content block */
.rule-section {
    border-top: 2px solid var(--text-primary);
    padding-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   FUNCTIONAL MESSAGES - Readability-first color usage
   ═══════════════════════════════════════════════════════════════ */

.error-message {
    background: var(--error-bg);
    border-left: 3px solid var(--error);
    padding: 0.75rem 1rem;
    color: var(--error);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.field-error {
    color: var(--error);
    font-size: 0.75rem;
    margin-top: 0.375rem;
}

.success-message {
    background: var(--success-bg);
    border-left: 3px solid var(--success);
    padding: 1rem 1.25rem;
    color: var(--success);
}

.warning-message {
    background: var(--warning-bg);
    border-left: 3px solid var(--warning);
    padding: 1rem 1.25rem;
    color: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   GEOMETRIC ELEMENTS (Max Bill / Richard Paul Lohse)
   Abstract forms that encode information visually
   ═══════════════════════════════════════════════════════════════ */

/* Score visualization bar - width proportional to score value */
.score-bar {
    position: relative;
    width: 100%;
    height: 3px;
    background: var(--bg-subtle);
    margin-top: 0.5rem;
}

.score-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--text-primary);
    /* Width set via inline style: style="--score: 85" */
    width: calc(var(--score, 0) * 1%);
    transition: width 600ms ease-out;
}

/* Section marker - small geometric square alongside label-swiss */
.marker-swiss::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--text-primary);
    margin-right: 0.5rem;
    vertical-align: middle;
}

.modal-backdrop {
    background-color: rgba(10, 10, 10, 0.6);
}