/* ============================================================
   CRASA public design system primitives (ROADMAP.md Phase 1.3)

   A small, documented foundation that every later public page
   (homepage, publications, news) is built from, so no page needs
   one-off styles. It is built entirely on the brand tokens
   (config/brand.php, surfaced as --crasa-* by brand-tokens.blade.php):
   there are no new hardcoded brand values here. A brand-kit swap in
   config/brand.php re-skins these primitives with no edits here.

   Bootstrap-compatible: every class is namespaced .ds-* so nothing
   collides with Bootstrap. Hierarchy comes from type weight, size and
   spacing, not decorative colour. Every default pairing meets WCAG AA
   (the green used for TEXT is deliberately darker than the green used
   for fills and bars, so small green text still clears 4.5:1). No em
   dashes.
   ============================================================ */

:root {
    /* --------------------------------------------------------
       Type scale (modular, ~1.2 minor third, 16px base).
       Headings inherit Lora/navy from the public layout; these
       sizes give a consistent, documented vertical hierarchy.
       -------------------------------------------------------- */
    --ds-text-xs:   0.78rem;   /* 12.5px  eyebrows, meta, labels, table head */
    --ds-text-sm:   0.9rem;    /* 14.4px  small body, captions, card text */
    --ds-text-base: 1rem;      /* 16px    body copy */
    --ds-text-md:   1.125rem;  /* 18px    lead paragraphs */
    --ds-text-lg:   1.35rem;   /* 21.6px  card titles, h4 */
    --ds-text-xl:   1.6rem;    /* 25.6px  h3 */
    --ds-text-2xl:  2rem;      /* 32px    section titles, h2 */
    --ds-text-3xl:  clamp(2.2rem, 4vw, 2.9rem); /* h1 / display */

    /* --------------------------------------------------------
       Spacing scale (8px rhythm). Use these for padding, gaps
       and stack spacing so spacing stays consistent everywhere.
       -------------------------------------------------------- */
    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.5rem;
    --ds-space-6: 2rem;
    --ds-space-7: 3rem;
    --ds-space-8: 4rem;
    --ds-space-9: 6rem;        /* section vertical rhythm */

    /* Radii */
    --ds-radius-sm: 6px;
    --ds-radius:    10px;
    --ds-radius-lg: 14px;

    /* --------------------------------------------------------
       Restrained neutral palette, aliased from the brand tokens
       (no new hex). Semantic names so intent is clear in markup.
       Contrast on white/cream surfaces:
         ink   navy        ~16:1
         body  charcoal    ~12:1
         muted slate       ~5.2:1  (AA for body text)
         faint slate-light ~2.7:1  (decorative / large only)
       -------------------------------------------------------- */
    --ds-ink:          var(--crasa-navy);        /* headings */
    --ds-body:         var(--crasa-charcoal);    /* body copy */
    --ds-muted:        var(--crasa-slate);       /* secondary text */
    --ds-faint:        var(--crasa-slate-light); /* NOT for body text */
    --ds-line:         var(--crasa-border);      /* hairline borders */
    --ds-surface:      #ffffff;                  /* card / page surface */
    --ds-surface-soft: var(--crasa-cream);       /* subtle warm fill */

    /* --------------------------------------------------------
       Accent, split by use so green TEXT always clears AA on
       light surfaces:
         accent       green      fills, bars, borders (non-text)
         accent-solid green-600  button fill, white text 4.95:1
         accent-text  green-dark green text on light 8.3:1
       -------------------------------------------------------- */
    --ds-accent:       var(--crasa-green);
    --ds-accent-solid: var(--crasa-green-600);
    --ds-accent-text:  var(--crasa-green-dark);

    /* Keyboard focus ring (visible, brand-tinted) */
    --ds-focus: 0 0 0 3px color-mix(in srgb, var(--crasa-green) 32%, transparent);

    /* Elevation, navy-tinted rather than flat black */
    --ds-shadow:    0 1px 2px color-mix(in srgb, var(--crasa-navy) 6%, transparent);
    --ds-shadow-md: 0 10px 28px color-mix(in srgb, var(--crasa-navy) 8%, transparent);
}

/* ============================================================
   Buttons  (component: <x-ui.button>)
   Variants: primary, secondary, ghost. Sizes: sm, md, lg.
   ============================================================ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    font-family: var(--crasa-font-sans);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--ds-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus);
}

.ds-btn-sm { font-size: var(--ds-text-xs);   padding: 0.45rem 0.85rem; }
.ds-btn-md { font-size: var(--ds-text-sm);   padding: 0.65rem 1.25rem; }
.ds-btn-lg { font-size: var(--ds-text-base); padding: 0.85rem 1.6rem; }

/* Primary: solid green-600 so white label clears AA (4.95:1). */
.ds-btn-primary { background: var(--ds-accent-solid); color: #ffffff; }
.ds-btn-primary:hover { background: var(--crasa-green-dark); color: #ffffff; }

/* Secondary: outline, green-600 text (4.95:1 on white). */
.ds-btn-secondary {
    background: transparent;
    color: var(--ds-accent-solid);
    border-color: var(--ds-accent-solid);
}
.ds-btn-secondary:hover {
    background: color-mix(in srgb, var(--crasa-green) 10%, #ffffff);
    color: var(--crasa-green-dark);
    border-color: var(--crasa-green-dark);
}

/* Ghost: text only, green-dark (8.3:1). Underlines on hover. */
.ds-btn-ghost {
    background: transparent;
    color: var(--ds-accent-text);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
.ds-btn-ghost:hover { color: var(--ds-accent-text); text-decoration: underline; }

.ds-btn[disabled],
.ds-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   Cards  (component: <x-ui.card>)
   Shell plus optional accent bar, soft fill, and link behaviour.
   Text helpers (.ds-card-*) keep card content consistent.
   ============================================================ */

.ds-card {
    display: block;
    background: var(--ds-surface);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-6);
    box-shadow: var(--ds-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.ds-card { text-decoration: none; color: inherit; }

a.ds-card:hover,
.ds-card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-md);
    border-color: color-mix(in srgb, var(--crasa-navy) 14%, transparent);
}

a.ds-card:focus-visible { outline: none; box-shadow: var(--ds-focus); }

.ds-card-accent { border-left: 3px solid var(--ds-accent); }
.ds-card-soft   { background: var(--ds-surface-soft); }

.ds-card-eyebrow {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ds-accent-text);
    margin: 0 0 var(--ds-space-3);
}
.ds-card-title {
    font-family: var(--crasa-font-serif);
    font-weight: 600;
    color: var(--ds-ink);
    font-size: var(--ds-text-lg);
    line-height: 1.3;
    margin: 0 0 var(--ds-space-3);
}
.ds-card-text {
    color: var(--ds-muted);
    font-size: var(--ds-text-sm);
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   Section header  (component: <x-ui.section-header>)
   Eyebrow, title and lead. Left by default, optional centre.
   ============================================================ */

.ds-section-header { max-width: 46rem; margin: 0 0 var(--ds-space-7); }
.ds-section-header-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ds-eyebrow {
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ds-accent-text);
    margin: 0 0 var(--ds-space-4);
}
.ds-title {
    font-family: var(--crasa-font-serif);
    font-weight: 600;
    color: var(--ds-ink);
    font-size: var(--ds-text-2xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--ds-space-4);
}
.ds-lead {
    color: var(--ds-muted);
    font-size: var(--ds-text-md);
    line-height: 1.65;
    margin: 0;
}
.ds-section-header-center .ds-lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   Table  (component: <x-ui.table>)
   A clean, scannable table. Hierarchy from a quiet header row
   and generous cell padding, not heavy rules.
   ============================================================ */

.ds-table-wrap {
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    overflow: hidden;
    box-shadow: var(--ds-shadow);
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ds-surface);
    font-size: var(--ds-text-sm);
}
.ds-table thead th {
    background: var(--ds-surface-soft);
    color: var(--ds-muted);
    font-weight: 700;
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--ds-line);
}
.ds-table tbody td {
    padding: var(--ds-space-4);
    color: var(--ds-body);
    border-bottom: 1px solid var(--ds-line);
    vertical-align: top;
}
.ds-table tbody tr { transition: background-color 0.12s ease; }
.ds-table tbody tr:hover { background: var(--ds-surface-soft); }
.ds-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Badge  (component: <x-ui.badge>)
   Deliberately restrained. Use only where a status carries real
   meaning (for example the comparator's verified-data marker),
   not as decoration. Tones: neutral, muted, accent.
   ============================================================ */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.ds-badge-neutral { background: color-mix(in srgb, var(--crasa-navy) 6%, transparent); color: var(--ds-body); }
.ds-badge-muted   { background: transparent; color: var(--ds-muted); border-color: var(--ds-line); }
.ds-badge-accent  { background: color-mix(in srgb, var(--crasa-green) 12%, #ffffff); color: var(--ds-accent-text); }

/* ============================================================
   Page header
   A compact banner for interior index and detail pages
   (publications, news, about). No photography: CRASA's
   no-pictures direction means depth comes from a token-built
   navy gradient, not a stock image. White text clears AA on
   this navy. Pair with a normal .container inside.
   ============================================================ */

.ds-page-header {
    position: relative;
    background:
        radial-gradient(120% 140% at 92% 0%, color-mix(in srgb, var(--crasa-green-dark) 46%, transparent) 0%, transparent 60%),
        linear-gradient(118deg, var(--crasa-navy-dark) 0%, var(--crasa-navy) 64%);
    color: #ffffff;
    padding: clamp(3rem, 7vh, 5rem) 0 clamp(2.75rem, 6vh, 4rem);
    overflow: hidden;
}
.ds-page-header-inner { max-width: 52rem; }

.ds-page-header-eyebrow {
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--ds-space-4);
}
.ds-page-header-title {
    font-family: var(--crasa-font-serif);
    font-weight: 600;
    color: #ffffff;
    font-size: var(--ds-text-3xl);
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin: 0 0 var(--ds-space-5);
}
.ds-page-header-lead {
    font-size: var(--ds-text-md);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Breadcrumb, used inside the page header on detail pages */
.ds-breadcrumb {
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 var(--ds-space-5);
}
.ds-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.ds-breadcrumb a:hover { color: #ffffff; text-decoration: underline; }
.ds-breadcrumb-sep { margin: 0 0.5rem; opacity: 0.45; }
.ds-breadcrumb-current { color: #ffffff; }

/* A quiet inline meta list (year, edition, pages, language ...) */
.ds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-5);
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-meta li { color: rgba(255, 255, 255, 0.82); }
.ds-meta strong { color: #ffffff; font-weight: 600; }

/* ============================================================
   List / filter page
   Shared furniture for the index pages (publications, news):
   a filter bar, a segmented filter control, a results summary,
   pagination and an empty state. Functional controls, not
   decoration, so the segmented pills are allowed here. All
   token-built; nothing hardcoded.
   ============================================================ */

.ds-filter-bar {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-5);
    margin-bottom: var(--ds-space-6);
}
.ds-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    align-items: center;
}
.ds-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 22rem;
    min-width: 15rem;
}
.ds-search svg { position: absolute; left: 0.95rem; color: var(--ds-muted); pointer-events: none; }
.ds-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.7rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-body);
    background: var(--ds-surface);
}
.ds-select {
    padding: 0.7rem 2.4rem 0.7rem 0.9rem;
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-sm);
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-ink);
    background-color: var(--ds-surface);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%235C6B7E%22%20d%3D%22M5%206L0%200h10z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
}
.ds-search-input:focus,
.ds-select:focus {
    outline: none;
    border-color: var(--ds-accent-solid);
    box-shadow: var(--ds-focus);
}

.ds-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-4);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-line);
}
.ds-filter-label {
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ds-muted);
    font-weight: 600;
}
.ds-segmented { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.ds-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--ds-line);
    background: var(--ds-surface);
    color: var(--ds-body);
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.ds-seg:hover { border-color: var(--ds-accent); color: var(--ds-accent-text); }
.ds-seg.is-active {
    background: var(--ds-accent-solid);
    border-color: var(--ds-accent-solid);
    color: #ffffff;
}
.ds-seg-count {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--crasa-navy) 7%, transparent);
}
.ds-seg.is-active .ds-seg-count { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.ds-filter-clear {
    margin-left: auto;
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: var(--ds-muted);
    text-decoration: none;
}
.ds-filter-clear:hover { color: var(--ds-accent-text); text-decoration: underline; }

.ds-results-summary {
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-muted);
    margin: 0 0 var(--ds-space-5);
}
.ds-results-summary strong { color: var(--ds-ink); font-weight: 600; }

/* Card foot: a quiet meta line and a view affordance, divided off
   from the card body by a hairline. Pairs with <x-ui.card>. */
.ds-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin-top: var(--ds-space-5);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ds-line);
    font-family: var(--crasa-font-sans);
    font-size: var(--ds-text-xs);
    color: var(--ds-muted);
    letter-spacing: 0.02em;
}
.ds-card-cta { color: var(--ds-accent-text); font-weight: 600; white-space: nowrap; }

/* Let a card grow its body so feet line up across a row */
.ds-card-fill { display: flex; flex-direction: column; }
.ds-card-fill .ds-card-text { flex: 1; }

.ds-pagination { display: flex; justify-content: center; margin-top: var(--ds-space-8); }
.ds-pagination nav { font-family: var(--crasa-font-sans); }
.ds-pagination .pagination { gap: 0.25rem; margin: 0; }
.ds-pagination .page-link {
    border-radius: var(--ds-radius-sm) !important;
    border: 1px solid var(--ds-line);
    color: var(--ds-body);
    font-weight: 500;
    padding: 0.5rem 0.85rem;
}
.ds-pagination .page-link:hover { background: var(--crasa-green-light); color: var(--ds-accent-text); border-color: var(--ds-accent); }
.ds-pagination .page-item.active .page-link { background: var(--ds-accent-solid); border-color: var(--ds-accent-solid); color: #ffffff; }
.ds-pagination .page-item.disabled .page-link { background: transparent; color: var(--ds-faint); }

.ds-empty {
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-8) var(--ds-space-6);
    text-align: center;
}
.ds-empty-title {
    font-family: var(--crasa-font-serif);
    font-weight: 600;
    color: var(--ds-ink);
    font-size: var(--ds-text-xl);
    margin: 0 0 var(--ds-space-3);
}
.ds-empty-text { color: var(--ds-muted); margin: 0 0 var(--ds-space-5); }

/* Screen-reader-only utility */
.ds-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Motion: respect users who prefer reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ds-btn,
    .ds-card,
    .ds-table tbody tr {
        transition: none;
    }
    a.ds-card:hover,
    .ds-card-interactive:hover { transform: none; }
}