/* ============================================================
   Design tokens — the single source of truth.
   Colour, typography, spacing, radius, elevation and motion all
   live here; every other layer references these variables, so the
   whole app is re-themed by editing this one file.

   System: "clean neutral + accent" — a cool grayscale foundation
   with a single emerald accent used sparingly for interaction and
   emphasis. Near-black for primary actions, generous whitespace,
   hairline borders, soft layered shadows. Inter throughout.
   ============================================================ */

/* ── Self-hosted Inter (variable) ──
   One file covers every weight (100–900). AssetMapper rewrites the
   relative url() to the digested, cache-busted path at build time. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-jznyFqg.woff2") format('woff2');
}

:root {
    /* ── Neutral scale (cool gray) ──
       The backbone. Text, surfaces, borders and hover states are all
       drawn from here so the UI reads as one calm, coherent system. */
    --neutral-0:   #ffffff;
    --neutral-50:  #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-150: #eeeef0;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;

    /* ── Ink ── the near-black used for primary actions and headings. */
    --ink: #18181b;
    --ink-hover: #2f2f34;

    /* ── Accent (emerald) ──
       The one colour with a job: links, focus, selection, active
       states, the hero call-to-action. Used deliberately, not everywhere. */
    --accent: #059669;
    --accent-rgb: 5, 150, 105;
    --accent-hover: #047857;
    --accent-active: #065f46;
    --accent-subtle: #ecfdf5;      /* tinted surface  */
    --accent-border: #a7f3d0;      /* tinted border   */
    --accent-emphasis: #065f46;    /* readable text on tint */

    /* ── Semantic ── */
    --success: var(--accent);
    --success-subtle: var(--accent-subtle);
    --success-emphasis: var(--accent-emphasis);
    --danger: #e11d48;
    --danger-subtle: #fff1f2;
    --warning: #d97706;
    --warning-subtle: #fffbeb;

    /* ── Surfaces & lines ── */
    --surface-page: #fafafa;
    --surface-card: #ffffff;
    --surface-muted: #f4f4f5;
    --surface-hover: #f4f4f5;
    --surface-sunken: #f7f7f8;
    --border-subtle: #ececef;      /* hairline dividers */
    --border-default: #e4e4e7;     /* card / control borders */
    --border-strong: #d4d4d8;

    /* ── Typography ──
       Inter first; a full native stack as the swap fallback. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

    /* Type scale (fluid-ish, rem-based) */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   1.375rem;   /* 22 */
    --text-2xl:  1.75rem;    /* 28 */
    --text-3xl:  2.25rem;    /* 36 */
    --text-4xl:  2.75rem;    /* 44 */

    --leading-tight: 1.2;
    --leading-snug:  1.4;
    --leading-normal: 1.6;

    --tracking-tight: -0.02em;   /* headings */
    --tracking-snug:  -0.011em;  /* large text */
    --tracking-wide:  0.02em;    /* eyebrows / labels */

    /* ── Radius ── */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-pill: 50rem;

    /* ── Elevation ──
       Soft, layered, low-contrast. Depth comes from borders + faint
       shadow rather than heavy drop shadows. */
    --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
    --shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(24, 24, 27, 0.08), 0 2px 6px -2px rgba(24, 24, 27, 0.05);
    --shadow-lg: 0 12px 32px -8px rgba(24, 24, 27, 0.12), 0 4px 12px -4px rgba(24, 24, 27, 0.06);
    --shadow-focus: 0 0 0 3px rgba(var(--accent-rgb), 0.20);

    /* ── Motion ── */
    --ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ── */
    --content-max: 1120px;
    --navbar-h: 4rem;

    /* ── Breakpoints ──
       Single source of truth for responsive cut-offs, mirroring Bootstrap 5.3
       exactly so our custom @media queries and Bootstrap's responsive utilities
       (col-lg-*, d-md-none, navbar-expand-lg, my-lg-5…) stay in lockstep — change
       a breakpoint here and update the matching @media, and the whole app follows.

       IMPORTANT: CSS custom properties cannot be used inside an @media condition
       (a language limitation), so media queries must repeat the literal value.
       Always use the value documented here, and label the query with its token
       (e.g. `/* < lg */`). 
       These vars are also readable from JS for breakpoint-aware behaviour: 
       getComputedStyle(document.documentElement) 
       getPropertyValue('--bp-lg'). */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* ════════════════════════════════════════════════════════
       Bootstrap variable overrides
       Re-point Bootstrap's own theme at our tokens so its utilities
       and components (links, focus rings, form controls, badges,
       spinners…) inherit the system with no extra classes.
       ════════════════════════════════════════════════════════ */

    /* Accent maps onto Bootstrap "primary": links, focus, checks, active. */
    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-primary-text-emphasis: var(--accent-emphasis);
    --bs-primary-bg-subtle: var(--accent-subtle);
    --bs-primary-border-subtle: var(--accent-border);

    --bs-link-color: var(--accent);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent-hover);
    --bs-link-hover-color-rgb: var(--accent-rgb);

    /* Typography + body */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-base);
    --bs-body-line-height: var(--leading-normal);
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--neutral-700);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--neutral-500);
    --bs-tertiary-color: var(--neutral-400);
    --bs-heading-color: var(--ink);

    /* Lines + radius */
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: var(--border-subtle);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-xs);
    --bs-border-radius-lg: var(--radius-md);
    --bs-border-radius-xl: var(--radius-lg);

    /* Focus ring → accent */
    --bs-focus-ring-color: rgba(var(--accent-rgb), 0.20);
    --bs-focus-ring-width: 3px;
}

/* ════════════════════════════════════════════════════════════
   Bootstrap component re-points
   Buttons compile colours into per-component variables, so the
   :root overrides above don't reach them — re-point those here.
   ════════════════════════════════════════════════════════════ */

/* Primary action = confident near-black. */
.btn-primary {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink-hover);
    --bs-btn-hover-border-color: var(--ink-hover);
    --bs-btn-active-bg: var(--neutral-900);
    --bs-btn-active-border-color: var(--neutral-900);
    --bs-btn-disabled-bg: var(--neutral-400);
    --bs-btn-disabled-border-color: var(--neutral-400);
    --bs-btn-focus-shadow-rgb: 24, 24, 27;
}

/* Accent outline — used sparingly for brand-flavoured secondary actions. */
.btn-outline-primary {
    --bs-btn-color: var(--accent-hover);
    --bs-btn-border-color: var(--accent-border);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
}

/* Neutral outline — the default calm secondary (row actions, filters). */
.btn-outline-secondary {
    --bs-btn-color: var(--neutral-700);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-bg: var(--surface-card);
    --bs-btn-hover-bg: var(--surface-muted);
    --bs-btn-hover-border-color: var(--neutral-400);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--neutral-100);
    --bs-btn-active-border-color: var(--neutral-400);
    --bs-btn-active-color: var(--ink);
}