/* ------------------------------------------------------------
   Edaphia Typography System
   /assets/css/garden-typography.css

   Design direction:
   - Display + body: Plus Jakarta Sans
   - Labels + garden data: DM Mono
   - Supports public pages, My Garden, and Admin
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   Font tokens
   ------------------------------------------------------------ */

:root {
    --garden-font-display:
        "Plus Jakarta Sans",
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --garden-font-body:
        "Plus Jakarta Sans",
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --garden-font-data:
        "DM Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    --garden-text-display: #1b2b1b;
    --garden-text: #253326;
    --garden-text-muted: #6c7c69;
    --garden-text-soft: #81907d;

    --garden-type-xs: .72rem;
    --garden-type-sm: .84rem;
    --garden-type-base: 1rem;
    --garden-type-lg: 1.125rem;
    --garden-type-xl: 1.35rem;
    --garden-type-2xl: 1.75rem;
    --garden-type-3xl: 2.25rem;
    --garden-type-4xl: 3rem;
    --garden-type-hero: clamp(2.85rem, 6vw, 5rem);

    --garden-leading-tight: 1.04;
    --garden-leading-heading: 1.12;
    --garden-leading-body: 1.62;
    --garden-leading-relaxed: 1.75;

    --garden-tracking-tight: -.045em;
    --garden-tracking-heading: -.032em;
    --garden-tracking-normal: 0;
    --garden-tracking-label: .13em;
}


/* ------------------------------------------------------------
   Base document typography
   ------------------------------------------------------------ */

html {
    font-size: 16px;
}

body {
    font-family: var(--garden-font-body);
    font-size: var(--garden-type-base);
    font-weight: 400;
    line-height: var(--garden-leading-body);
    letter-spacing: var(--garden-tracking-normal);
    color: var(--garden-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ------------------------------------------------------------
   Headings
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.garden-heading,
.garden-display {
    margin-top: 0;
    font-family: var(--garden-font-display);
    font-weight: 700;
    line-height: var(--garden-leading-heading);
    letter-spacing: var(--garden-tracking-heading);
    color: var(--garden-text-display);
}

h1,
.garden-heading-1 {
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: var(--garden-leading-tight);
    letter-spacing: var(--garden-tracking-tight);
}

h2,
.garden-heading-2 {
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    line-height: 1.07;
    letter-spacing: -.04em;
}

h3,
.garden-heading-3 {
    font-size: clamp(1.4rem, 2.35vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.028em;
}

h4,
.garden-heading-4 {
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h5,
.garden-heading-5 {
    font-size: 1.05rem;
    line-height: 1.28;
    letter-spacing: -.012em;
}

h6,
.garden-heading-6 {
    font-size: .92rem;
    line-height: 1.35;
    letter-spacing: 0;
}


/* ------------------------------------------------------------
   Figma-style display treatments
   ------------------------------------------------------------ */

.garden-display-hero {
    max-width: 11ch;
    font-size: var(--garden-type-hero);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.055em;
}

.garden-display-large {
    font-size: clamp(2.5rem, 5.2vw, 4.5rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.055em;
}

.garden-display-medium {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.048em;
}

.garden-display-accent {
    color: var(--green-600, #5f8f45);
}


/* ------------------------------------------------------------
   Body copy
   ------------------------------------------------------------ */

p {
    margin-top: 0;
}

.garden-lead,
.garden-intro {
    max-width: 62ch;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.58;
    color: var(--garden-text-muted);
}

.garden-copy-large {
    font-size: 1.125rem;
    line-height: 1.68;
}

.garden-copy-small {
    font-size: var(--garden-type-sm);
    line-height: 1.55;
}

.garden-muted {
    color: var(--garden-text-muted);
}

.garden-soft {
    color: var(--garden-text-soft);
}

small,
.garden-small {
    font-size: var(--garden-type-sm);
}


/* ------------------------------------------------------------
   Eyebrows, labels, metadata, and technical garden data
   ------------------------------------------------------------ */

.garden-eyebrow,
.garden-kicker,
.garden-section-label,
.garden-data-label,
.garden-meta-label,
.garden-form-label,
.garden-admin-label {
    display: inline-block;
    font-family: var(--garden-font-data);
    font-size: var(--garden-type-xs);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: var(--garden-tracking-label);
    text-transform: uppercase;
    color: var(--garden-text-muted);
}

.garden-eyebrow,
.garden-kicker {
    color: var(--garden-primary, #2f5f35);
}

.garden-data-value,
.garden-plant-code,
.garden-date,
.garden-zone,
.garden-mono,
.garden-admin-mono {
    font-family: var(--garden-font-data);
    font-weight: 400;
    letter-spacing: -.02em;
}

.garden-data-value {
    font-size: .95rem;
    line-height: 1.4;
    color: var(--garden-text);
}

.garden-plant-code,
.garden-date,
.garden-zone {
    font-size: .76rem;
    color: var(--garden-text-muted);
}


/* ------------------------------------------------------------
   Links and inline emphasis
   ------------------------------------------------------------ */

a {
    color: inherit;
}

.garden-text-link {
    color: var(--garden-color-primary, #2a4826);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: .18em;
}

.garden-text-link:hover,
.garden-text-link:focus-visible {
    text-decoration: underline;
}

strong,
b {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}


/* ------------------------------------------------------------
   Buttons and form text
   Typography only — visual button/input styling comes later.
   ------------------------------------------------------------ */

button,
input,
select,
textarea {
    font-family: var(--garden-font-body);
}

button,
.garden-button,
.garden-admin-button {
    font-weight: 600;
    letter-spacing: -.012em;
}

label,
.garden-field-label {
    font-size: var(--garden-type-xs);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: var(--garden-text-display);
}

input,
select,
textarea {
    font-size: .94rem;
    line-height: 1.4;
    color: var(--garden-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--garden-text-soft);
    opacity: 1;
}

.garden-field-help,
.garden-field-description {
    margin-top: .35rem;
    font-size: var(--garden-type-sm);
    line-height: 1.45;
    color: var(--garden-text-muted);
}


/* ------------------------------------------------------------
   Tags, status labels, and small UI text
   ------------------------------------------------------------ */

.garden-tag,
.garden-chip,
.garden-status,
.garden-season-tag,
.garden-pill {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.garden-card-meta,
.garden-task-meta,
.garden-journal-meta,
.garden-alert-meta {
    font-size: var(--garden-type-sm);
    line-height: 1.45;
    color: var(--garden-text-muted);
}


/* ------------------------------------------------------------
   Lists
   ------------------------------------------------------------ */

ul,
ol {
    padding-left: 1.25rem;
}

li + li {
    margin-top: .35rem;
}


/* ------------------------------------------------------------
   Admin typography refinements
   These make the admin data-dense without making it tiny.
   ------------------------------------------------------------ */

.garden-admin-shell,
.garden-admin-main {
    color: var(--garden-text);
}

.garden-admin-page-title {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.garden-admin-table {
    font-size: .82rem;
    line-height: 1.35;
}

.garden-admin-table th {
    font-family: var(--garden-font-data);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.garden-admin-table td {
    font-size: .8rem;
}

.garden-admin-table .garden-admin-table-muted {
    font-size: .75rem;
    color: var(--garden-text-muted);
}

.garden-admin-stat-label,
.garden-admin-nav-label,
.garden-admin-breadcrumb {
    font-family: var(--garden-font-data);
    font-size: .69rem;
    font-weight: 500;
    letter-spacing: .08em;
}

.garden-admin-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
}


/* ------------------------------------------------------------
   Responsive typography
   ------------------------------------------------------------ */

@media (max-width: 700px) {
    html {
        font-size: 15px;
    }

    .garden-display-hero {
        max-width: 12ch;
        letter-spacing: -.05em;
    }

    .garden-lead,
    .garden-intro {
        font-size: 1rem;
    }

    .garden-admin-table {
        font-size: .78rem;
    }

    .garden-admin-table th {
        font-size: .62rem;
    }
}