/*
 * Bay Gio La May Gio — CSS Foundation
 * v1.6.25
 *
 * Design tokens, reset, typography, layout primitives, shared cards,
 * buttons and form controls live here. Page/component CSS stays in main.css.
 */

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f3f6f9;
    --surface-blue: #eef4ff;
    --text: #172033;
    --text-soft: #667085;
    --border: #e3e8ef;
    --border-strong: #cfd7e3;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff6ff;
    --success: #16803c;
    --danger: #c2410c;
    --footer: #111827;
    --footer-text: #dbe2ec;
    --shadow: 0 1px 2px rgba(16, 24, 40, .035);
    --shadow-raised: 0 10px 30px rgba(16, 24, 40, .08);
    --radius: 10px;
    --radius-sm: 8px;
    --container: 1120px;
    --header-h: 64px;
}

html[data-theme="dark"] {
    --bg: #0c111b;
    --surface: #121925;
    --surface-soft: #182130;
    --surface-blue: #172640;
    --text: #edf1f7;
    --text-soft: #9ca9bb;
    --border: #273244;
    --border-strong: #354257;
    --primary: #75a7ff;
    --primary-hover: #9bc0ff;
    --primary-soft: #182b4c;
    --success: #5bd184;
    --danger: #fb923c;
    --footer: #090d15;
    --footer-text: #dbe2ec;
    --shadow: 0 1px 2px rgba(0, 0, 0, .18);
    --shadow-raised: 0 12px 34px rgba(0, 0, 0, .24);
}

*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-soft); color: var(--text); }

button, input, select, textarea { font: inherit; font-family: var(--font-sans); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.015em;
}

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow-container { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.wide-tool-container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
    clip: auto !important;
    width: auto;
    height: auto;
    margin: 10px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    z-index: 9999;
    border: 1px solid var(--border);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Shared page rhythm */
.section-block { scroll-margin-top: 84px; }
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.section-heading h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.018em;
}
.section-heading > a,
.section-heading .text-button { font-size: 13px; font-weight: 650; }
.compact-heading { margin-bottom: 8px; }
.heading-note { color: var(--text-soft); font-size: .76em; font-weight: 500; }
.eyebrow {
    margin: 0 0 5px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.section-intro { max-width: 900px; margin: 0 0 14px; color: var(--text-soft); line-height: 1.7; }

/* Shared surfaces */
.content-card,
.tool-panel,
.clock-panel,
.today-card,
.stopwatch-card,
.timer-card,
.alarm-card,
.difference-tool,
.date-tool,
.meeting-planner,
.year-progress-card,
.pomodoro-card,
.unix-tool,
.dst-tool,
.solar-tool {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.content-card { padding: 22px; }
.tool-panel { padding: 24px; }

/* Shared buttons */
.button,
.segmented {
    min-height: 44px;
    padding: 9px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.button {
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.button:active,
.segmented:active { transform: translateY(1px); }
.button-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: none;
}
.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.button-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.button-secondary:hover { background: var(--surface-soft); border-color: var(--border-strong); color: var(--text); }
.segmented {
    min-width: 72px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.segmented.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }

/* Shared form controls */
.world-search input,
.form-grid input,
.form-grid select,
.date-add-grid input,
.date-add-grid select,
.meeting-controls input,
.meeting-controls select,
.meeting-work-hours input,
.field-block input,
.field-block select,
.solar-preset-row select,
.pomodoro-settings input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 9px 12px;
    outline: none;
    box-shadow: none;
}
.world-search input:hover,
.form-grid input:hover,
.form-grid select:hover,
.date-add-grid input:hover,
.date-add-grid select:hover,
.meeting-controls input:hover,
.meeting-controls select:hover,
.field-block input:hover,
.field-block select:hover,
.solar-preset-row select:hover { border-color: #aeb9c8; }
.world-search input:focus,
.form-grid input:focus,
.form-grid select:focus,
.date-add-grid input:focus,
.date-add-grid select:focus,
.meeting-controls input:focus,
.meeting-controls select:focus,
.field-block input:focus,
.field-block select:focus,
.solar-preset-row select:focus,
.pomodoro-settings input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-grid label,
.date-add-grid label,
.meeting-controls label,
.meeting-work-hours label,
.field-block,
.solar-preset-row label,
.pomodoro-settings label {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}