/* ── IRememberThis Studio — Design Tokens ─────────────────────────────────── */
:root {
    /* Primary brand colors — from IRememberThis.app logo */
    --irt-blue:         #1a4fa0;   /* deep blue — primary brand */
    --irt-blue-light:   #2d6fd4;   /* hover states, links */
    --irt-blue-dark:    #0f2d5c;   /* nav background, headers */
    --irt-orange:       #e8621a;   /* sunset orange — accent */
    --irt-yellow:       #f5c842;   /* warm yellow — highlight */

    /* Neutrals */
    --irt-warm-white:   #f8f6f2;   /* page background — warm not cold */
    --irt-card-bg:      #ffffff;   /* card surfaces */
    --irt-border:       #dde3ed;   /* subtle borders */
    --irt-text:         #1a1a2e;   /* primary text — near black */
    --irt-text-muted:   #6b7a99;   /* secondary text */

    /* Status colors */
    --irt-success:      #2d8a4e;
    --irt-warning:      #c87c00;
    --irt-danger:       #c0392b;

    /* Spacing & shape */
    --irt-radius:       10px;      /* card border radius */
    --irt-radius-sm:    6px;       /* button/badge radius */
    --irt-shadow:       0 2px 12px rgba(26, 79, 160, 0.10);
    --irt-shadow-hover: 0 6px 24px rgba(26, 79, 160, 0.18);

    /* Bootstrap overrides via CSS variables */
    --bs-primary:            var(--irt-blue);
    --bs-primary-rgb:        26, 79, 160;
    --bs-link-color:         var(--irt-blue-light);
    --bs-link-hover-color:   var(--irt-blue-dark);
    --bs-border-radius:      var(--irt-radius);
    --bs-border-radius-sm:   var(--irt-radius-sm);
    --bs-body-bg:            var(--irt-warm-white);
    --bs-body-color:         var(--irt-text);
    --bs-secondary-color:    var(--irt-text-muted);
    --bs-border-color:       var(--irt-border);
    --bs-card-bg:            var(--irt-card-bg);
    --bs-card-border-color:  var(--irt-border);
}

/* ── Navbar gradient brand bar ────────────────────────────────────────────── */
.bg-brand {
    background: linear-gradient(90deg,
        var(--irt-blue-dark) 0%,
        var(--irt-blue) 55%,
        var(--irt-orange) 100%);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    background: rgba(255, 255, 255, .95);
}

.navbar .nav-link {
    opacity: .9;
}

    .navbar .nav-link.active {
        opacity: 1;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

/* ── Page layout ──────────────────────────────────────────────────────────── */
body {
    background-color: var(--irt-warm-white);
    color: var(--irt-text);
}

.page-shell {
    min-height: calc(100vh - 56px);
}