/*
  TLT shared theme — one source of truth for Web and Mobile (TLT.Mobile references
  this same file from TLT.UI.Components' static web assets, not a copy).

  Two layers, deliberately:
   1. Brand palette (--tlt-palette-*) — the raw colors pulled from houseofeducation.old-paths.com.
   2. Semantic tokens (--tlt-*) — what components actually consume. A future per-family
      theme-settings feature only needs to override the semantic layer (e.g. re-point
      --tlt-color-accent) without touching the brand palette or component CSS. This is
      the same override-by-redefinition pattern Child.AccentColor already uses per child;
      a family-level override would emit a small <style>:root{--tlt-color-accent:...}</style>
      block, no component changes required.
*/

@font-face {
    font-family: 'Baskervville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/baskervville-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Baskervville';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/baskervville-italic.woff2') format('woff2');
}

:root {
    /* Brand palette — houseofeducation.old-paths.com */
    --tlt-palette-slate: #5C6D78;
    --tlt-palette-slate-dark: #61727D;
    --tlt-palette-brown: #433221;
    --tlt-palette-navy: #2B3C50;
    --tlt-palette-sage: #97A7A0;
    --tlt-palette-white: #FFFFFF;
    --tlt-palette-black: #000000;

    /* Typography */
    --tlt-font-serif: 'Baskervville', Georgia, 'Times New Roman', serif;
    --tlt-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Semantic tokens — components should reference these, not the palette directly */
    /* Page canvas is a warm off-white, distinct from --tlt-color-surface (pure white)
       so cards/header read as gently elevated instead of the whole app being one flat
       white void — the "modern app" feel the sidebar-block layout didn't have. */
    --tlt-color-bg: #FAF8F5;
    --tlt-color-surface: var(--tlt-palette-white);
    --tlt-color-text: var(--tlt-palette-black);
    --tlt-color-text-muted: #8a7f70;

    --tlt-color-primary: var(--tlt-palette-slate);
    --tlt-color-primary-dark: var(--tlt-palette-slate-dark);
    --tlt-color-accent: var(--tlt-palette-brown);
    --tlt-color-link: var(--tlt-palette-navy);
    --tlt-color-link-hover: var(--tlt-palette-brown);

    --tlt-color-border: #e5e0d8;

    --tlt-nav-bg: var(--tlt-palette-slate);
    --tlt-nav-bg-active: var(--tlt-palette-brown);
    --tlt-nav-text: var(--tlt-palette-white);

    --tlt-font-heading: var(--tlt-font-serif);
    --tlt-font-body: var(--tlt-font-sans);
    --tlt-font-reading: var(--tlt-font-serif);

    --tlt-radius: 10px;
    --tlt-radius-sm: 6px;
    --tlt-shadow-sm: 0 1px 2px rgba(67, 50, 33, 0.06), 0 1px 3px rgba(67, 50, 33, 0.08);

    /* Lesson status colors - deliberately no "red/overdue" tone anywhere; Continues
       is real progress, not a warning state (spec: "Calm by default"). */
    --tlt-color-success: #2c9c4a;
    --tlt-color-status-scheduled: var(--tlt-color-primary);
    --tlt-color-status-continues: var(--tlt-color-accent);
    --tlt-color-status-complete: var(--tlt-color-success);
    --tlt-color-status-skipped: var(--tlt-color-text-muted);
    --tlt-color-status-rescheduled: var(--tlt-color-text-muted);
}

body {
    font-family: var(--tlt-font-body);
    color: var(--tlt-color-text);
    background-color: var(--tlt-color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tlt-font-heading);
    color: var(--tlt-color-accent);
}

a, .btn-link {
    color: var(--tlt-color-link);
}

a:hover, .btn-link:hover {
    color: var(--tlt-color-link-hover);
}

/* .btn-link is also used on real <button> elements (e.g. inline "Cancel"/"Change"
   actions) - those need the native button chrome stripped explicitly, since <a> has
   none to begin with and this rule was only ever overriding color. */
button.btn-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* Self-contained button box-model - deliberately not dependent on Bootstrap's
   .btn base class, so this works on <a> or <button> alike wherever it's used
   (landing CTA, form submits). */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--tlt-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tlt-palette-white);
    background-color: var(--tlt-color-primary);
    border: none;
    border-radius: var(--tlt-radius-sm);
    padding: 0.65rem 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tlt-color-primary-dark);
    color: var(--tlt-palette-white);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--tlt-color-accent);
    outline-offset: 2px;
}

.btn-primary svg {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--tlt-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tlt-color-primary);
    background-color: var(--tlt-color-surface);
    border: 1px solid var(--tlt-color-border);
    border-radius: var(--tlt-radius-sm);
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover {
    background-color: var(--tlt-color-bg);
    border-color: var(--tlt-color-primary);
}

.btn-secondary:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Reading surfaces — documents, narrations, lesson text — stay serif per the
   "living books" feel; UI chrome (nav/buttons/forms) stays sans for legibility
   in dense scheduling views. */
.tlt-reading {
    font-family: var(--tlt-font-reading);
}