/* Import Google Fonts — Barlow family + JetBrains Mono for metrics */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Design Tokens & Variables  (rooot planner redesign — lime accent)
   ========================================================================== */
:root {
    /* Lime accent — matches the rooot logo green exactly */
    --lime: #9aca32;
    --lime-deep: #7ea827;
    --lime-ink: #162208;      /* text on lime fill */
    --chip-on: rgba(154,202,50,.16);

    /* Primary maps to lime */
    --primary-color: #9aca32;
    --primary-dark: #7ea827;
    --secondary-color: #f3f6f8;

    /* Functional Colors */
    --success-color: #198754;
    --warning-color: #d97706;
    --danger-color: #dc3545;
    --info-color: #0dcaf0;

    /* Text Colors  (tx / tx2 / tx3) */
    --text-primary: #16202b;
    --text-secondary: #56697a;
    --text-muted: #90a0ad;

    /* Surfaces  (s1 / s2 / s3) */
    --bg-body: #eef1f4;       /* s0 */
    --bg-secondary: #f3f6f8;  /* s2 */
    --card-bg: #ffffff;       /* s1 */
    --hover-bg: #e3eaef;      /* s-hover */

    /* Borders */
    --border-color: #e4e9ee;
    --border-strong: #d3dbe2;
    --shadow: rgba(40,60,80,.10);
    --shadow-lg: 0 12px 38px -10px rgba(40,60,80,.28);

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #16202b;

    /* Typography */
    --font-heading: 'Barlow Condensed', 'Space Grotesk', sans-serif;
    --font-semi: 'Barlow Semi Condensed', 'Space Grotesk', sans-serif;
    --font-body: 'Barlow', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

[data-bs-theme="dark"], [data-theme="dark"] {
    /* Lime accent (dark theme) — same logo green as light */
    --lime: #9aca32;
    --lime-deep: #7ea827;
    --chip-on: rgba(154,202,50,.18);

    /* Primary maps to lime */
    --primary-color: #9aca32;
    --primary-dark: #7ea827;
    --secondary-color: #1b2530;

    /* Text Colors */
    --text-primary: #eaf1f7;
    --text-secondary: #9aabbb;
    --text-muted: #5f7080;

    /* Surfaces */
    --bg-body: #0d131a;       /* s0 */
    --bg-secondary: #1b2530;  /* s2 */
    --card-bg: #141c25;       /* s1 */
    --hover-bg: #283744;      /* s-hover */

    /* Borders */
    --border-color: #2a3a48;
    --border-strong: rgba(255,255,255,.14);
    --shadow: rgba(0, 0, 0, 0.45);

    /* Inputs */
    --input-bg: #141c25;
    --input-text: #eaf1f7;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-body);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .brand-font {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Shared Components
   ========================================================================== */

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--lime-ink);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--lime-ink);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--lime-ink);
}

/* Rounded pills for that 'rooot' look */
.btn-rounded {
    border-radius: 50px;
}

/* Navbar */
.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 700;
}