/* ==========================================================================
   DrawingStud.io theme — monochrome, near-black "ink" accent
   --------------------------------------------------------------------------
   Loaded after Bootstrap in base.html. Recolors Bootstrap's primary (the old
   #0d6efd blue) to ink and flattens the palette to white / near-black / grays.
   This is a theme layer: it overrides classes, it does not touch templates.
   ========================================================================== */

:root {
    /* Ink scale */
    --ds-ink:        #1a1a1a;   /* primary accent — buttons, links, emphasis */
    --ds-ink-hover:  #000000;
    --ds-near-black: #222222;   /* dark sections / heroes */
    --ds-text:       #1a1a1a;   /* body copy */
    --ds-muted:      #6b6b6b;   /* secondary text */
    --ds-border:     #e5e5e5;
    --ds-surface:    #f7f7f7;   /* alt section background */

    /* Re-point Bootstrap's tokens at the ink palette */
    --bs-primary:            #1a1a1a;
    --bs-primary-rgb:        26, 26, 26;
    --bs-link-color:         #1a1a1a;
    --bs-link-color-rgb:     26, 26, 26;
    --bs-link-hover-color:   #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-border-color:       #e5e5e5;
    --bs-focus-ring-color:   rgba(26, 26, 26, 0.25);

    /* The custom var declared in base.html */
    --primary-color: #1a1a1a;
}

/* --- Typography ---------------------------------------------------------
   Body + chrome: Inter. Display headings (h1-h3, .display-*): Courier Prime,
   a properly-typeset modern typewriter face. The mono-headline / sans-body
   pairing is the personality move; small headings stay Inter so they don't
   feel noisy. Fragment Mono still handles eyebrows further down.
   --------------------------------------------------------------------- */
:root {
    --ds-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                       Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-display: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo,
                       Consolas, monospace;
}
body,
.navbar, .btn, .nav-link, .card,
input, select, textarea, button {
    font-family: var(--ds-font-sans);
}
h4, h5, h6 {
    font-family: var(--ds-font-sans);
    letter-spacing: -0.02em;
}
h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5 {
    font-family: var(--ds-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Courier Prime is wide — the Inter heading utilities still expect
   tight tracking. Reduce slightly for the display sizes specifically. */
.display-1, .display-2, .display-3 { letter-spacing: -0.02em; }

/* --- Primary button -> ink --------------------------------------------- */
.btn-primary {
    --bs-btn-bg: #1a1a1a;
    --bs-btn-border-color: #1a1a1a;
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-disabled-bg: #1a1a1a;
    --bs-btn-disabled-border-color: #1a1a1a;
    --bs-btn-focus-shadow-rgb: 26, 26, 26;
}

/* --- Outline primary -> ink -------------------------------------------- */
.btn-outline-primary {
    --bs-btn-color: #1a1a1a;
    --bs-btn-border-color: #1a1a1a;
    --bs-btn-hover-bg: #1a1a1a;
    --bs-btn-hover-border-color: #1a1a1a;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-focus-shadow-rgb: 26, 26, 26;
}

/* --- Colour utilities --------------------------------------------------- */
.text-primary  { color: #1a1a1a !important; }
.bg-primary    { background-color: #1a1a1a !important; }
.border-primary{ border-color: #1a1a1a !important; }
.link-primary  { color: #1a1a1a !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: #1a1a1a !important; }

/* "btn-light" used as the call-to-action on dark CTA blocks reads better
   as a crisp white pill against ink than against the old blue. */
.cta-block .btn-light,
.pillar-hero .btn-light { color: #1a1a1a; }

/* --- Form focus -> ink, not blue --------------------------------------- */
.form-control:focus,
.form-select:focus,
.btn-check:focus + .btn,
.form-check-input:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 0.25rem rgba(26, 26, 26, 0.15);
}
.form-check-input:checked {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

/* --- Links: ink, underline on hover ------------------------------------ */
a { color: #1a1a1a; }
a:hover { color: #000000; }
.hover-primary:hover { color: #1a1a1a !important; }
/* Keep navbar/footer/button anchors from being underlined by the rule above */
.navbar a, .btn, .nav-link, .card a, footer a, .blog-card, .featured-saint-card {
    text-decoration: none;
}

/* ==========================================================================
   Fragment Mono — accent typeface for small labels & technical UI
   --------------------------------------------------------------------------
   Stamina-style: monospaced uppercase tags above headings, section labels,
   and small chrome. Body copy stays Inter.
   ========================================================================== */
:root {
    --ds-font-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo,
                    Consolas, monospace;
}
.font-mono,
.eyebrow,
.col-header,
.streak-pill,
.demo-timer-pill,
.badge.font-mono,
code, kbd, samp, pre {
    font-family: var(--ds-font-mono);
    letter-spacing: 0.02em;
}
/* The eyebrow's existing uppercase + extra letter-spacing reads better in
   mono with the tracking dialled back a notch. */
.eyebrow { letter-spacing: 0.15em; }

/* ==========================================================================
   Squared geometry — tighten the radius scale
   --------------------------------------------------------------------------
   The default Bootstrap card / hero is 12–24px rounded; stamina's grid is
   almost flat. Pull cards, hero blocks, and the CTA panel down to 4px.
   Pills (.rounded-pill, .badge.rounded-pill) stay round on purpose.
   ========================================================================== */
:root {
    --bs-border-radius-sm: 2px;
    --bs-border-radius:    4px;   /* default */
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 6px;
    --bs-border-radius-2xl: 8px;
}

.card,
.featured-saint-card,
.blog-card,
.sotd-card,
.cta-block,
.pillar-section .p-4.bg-light.border,
.pillar-section .p-4.bg-light.border-rounded {
    border-radius: 12px;
}

/* Bootstrap utilities — content uses 12px+, chrome stays tight at 4px. */
.rounded     { border-radius: 6px !important; }
.rounded-2   { border-radius: 6px !important; }
.rounded-3   { border-radius: 12px !important; }
.rounded-4   { border-radius: 16px !important; }
.rounded-5   { border-radius: 20px !important; }

/* Buttons: keep a hair of rounding so they don't feel like Windows 95. */
.btn { border-radius: 4px; }
.btn.rounded-pill, .btn-group .rounded-pill { border-radius: 999px; }   /* still pills where used */
.form-control, .form-select, .input-group .form-control { border-radius: 4px; }

/* Calendar grid tiles read better when tight; hero cards inherit the
   loosened 12px from .rounded-3 above. */
.cal-day { border-radius: 4px !important; }