/*
 * Galarie "Botanical Study" — DECOUPLED SNAPSHOT for shoot-time.
 * Copied from galarie-app/resources/css/galarie.css (tokens + the components
 * this tool uses). This is a snapshot on purpose: shoot-time reuses the Galarie
 * *visual identity* but shares no code with the app. Fonts per the build brief:
 * Fraunces (display) · Inter (UI) · JetBrains Mono (metadata micro-caps).
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --parchment: #F4F1EC;
    --parchment-deep: #EDE9E1;
    --paper: #FAFAF6;
    --forest: #2C3328;
    --fern: #5C7A52;
    --fern-light: #7A8B72;
    --fern-muted: #A3B09B;
    --terracotta: #C2785C;
    --terracotta-soft: #D4967E;
    --bark: #4A5744;
    --stone: #D4CFC3;
    --stone-light: #E3DFD6;
    --danger: #9b3a3a;
    --success: #2d5a3d;
    --spark: #c9a84c;

    --radius: 6px;
    --radius-card: 10px;
    --radius-pill: 100px;

    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--sans);
    color: var(--forest);
    background: var(--parchment);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .serif {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--forest);
    margin: 0;
}

a { color: var(--fern); text-decoration: none; }
a:hover { color: var(--bark); }

/* Metadata micro-caps — the JetBrains Mono label motif. */
.g-meta {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fern-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font: inherit; font-weight: 500; line-height: 1;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--fern);
    background: var(--fern);
    color: var(--paper);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.g-btn:hover { background: var(--bark); border-color: var(--bark); color: var(--paper); }
.g-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.g-btn-ghost {
    background: transparent; color: var(--fern-light); border-color: transparent;
    padding: 0.5rem 0.75rem;
}
.g-btn-ghost:hover { background: var(--parchment-deep); color: var(--forest); }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.g-field { margin-bottom: 1.1rem; }
.g-field label {
    display: block; font-size: 0.85rem; font-weight: 500;
    color: var(--fern-light); margin-bottom: 0.35rem;
}
.g-input {
    width: 100%; font: inherit; color: var(--forest);
    background: var(--paper); border: 1px solid var(--stone);
    border-radius: var(--radius); padding: 0.65rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.g-input:focus {
    outline: none; border-color: var(--fern);
    box-shadow: 0 0 0 3px rgba(92, 122, 82, 0.15);
}
.g-error { color: var(--danger); font-size: 0.82rem; margin-top: 0.35rem; }
.g-checkbox-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.88rem; color: var(--fern-light);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.g-card {
    background: var(--paper);
    border: 1px solid var(--stone-light);
    border-radius: var(--radius-card);
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(44, 51, 40, 0.04), 0 8px 24px rgba(44, 51, 40, 0.05);
}

/* ── Chips / pills ────────────────────────────────────────────────────────── */
.g-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--stone);
    background: var(--paper);
    color: var(--fern-light);
    cursor: pointer;
    transition: all 0.15s ease;
}
.g-chip:hover { border-color: var(--fern-muted); color: var(--forest); }
.g-chip.is-on {
    background: var(--fern); border-color: var(--fern); color: var(--paper);
}