/* =========================================================================
   Recall theme — 1 of 4: design tokens

   Load order (see _Layout.cshtml): bootstrap.min.css, the two Phosphor
   stylesheets, then tokens.css → base.css → components.css → pages.css.

   Everything visual is derived from the custom properties in this file.
   Components use the tokens; they do not introduce new colours, font sizes
   or radii of their own.
   ========================================================================= */

:root {
    /* ---- Colour: the dark canvas ("ink") -------------------------------- */
    --tvdb-ink: #151b24;            /* page background */
    --tvdb-ink-2: #1f2733;          /* navbar, footer, media frames */
    --tvdb-ink-3: #29333f;          /* hover on ink surfaces */
    --tvdb-line: rgba(255, 255, 255, 0.08);   /* borders on ink */

    --tvdb-on-ink: #f1ece2;                          /* text on ink */
    --tvdb-on-ink-muted: rgba(241, 236, 226, 0.72);  /* secondary text on ink */
    --tvdb-on-ink-faint: rgba(241, 236, 226, 0.55);  /* placeholders on ink */

    /* ---- Colour: the content panel ("paper") ---------------------------- */
    --tvdb-paper: #f1ece2;
    --tvdb-paper-dim: #e6dfd0;      /* recessed rows, tiles, inputs */
    --tvdb-ink-line: rgba(21, 27, 36, 0.12);   /* borders on paper */
    --tvdb-ink-line-strong: rgba(21, 27, 36, 0.28);
    --tvdb-wash: rgba(21, 27, 36, 0.04);       /* row hover on paper */

    --tvdb-text: #2c2a24;           /* body text on paper */
    --tvdb-text-muted: #655b49;     /* secondary text on paper: 5.7:1 on paper, 5.0:1 on paper-dim */

    /* ---- Colour: accents -------------------------------------------------
       *-ink is the readable text colour on that accent's tint; *-tint and
       *-edge are the fill and border of chips, alerts and soft buttons. */
    --tvdb-signal: #e8a33d;         /* amber: fills, and text or links on ink */
    --tvdb-signal-hover: #d6922e;
    --tvdb-signal-text: #8f5410;    /* amber as text or link on paper (5.2:1) */
    --tvdb-signal-ink: #6b3d0f;
    --tvdb-signal-tint: rgba(232, 163, 61, 0.16);
    --tvdb-signal-tint-strong: rgba(232, 163, 61, 0.28);
    --tvdb-signal-edge: rgba(232, 163, 61, 0.55);
    --tvdb-signal-halo: rgba(232, 163, 61, 0.35);
    --tvdb-on-signal: #2a1a05;      /* text on a solid amber fill */

    --tvdb-ok: #6f9d6f;             /* watched, continuing, success */
    --tvdb-ok-ink: #2f4a2f;
    --tvdb-ok-tint: rgba(111, 157, 111, 0.16);
    --tvdb-ok-edge: rgba(111, 157, 111, 0.5);
    --tvdb-ok-wash: rgba(111, 157, 111, 0.08);   /* a watched row */
    --tvdb-on-ok: #1c2b1c;

    --tvdb-danger: #a3472f;         /* remove, errors (5.1:1 on paper) */
    --tvdb-danger-ink: #6b2c1f;
    --tvdb-danger-tint: rgba(163, 71, 47, 0.12);
    --tvdb-danger-edge: rgba(163, 71, 47, 0.45);
    --tvdb-danger-on-ink: #e08a72;  /* the same hue, light enough for a dark surface */
    --tvdb-on-danger: #ffffff;

    --tvdb-info: #4f8a93;           /* movies, informational */
    --tvdb-info-ink: #234047;
    --tvdb-info-tint: rgba(79, 138, 147, 0.16);
    --tvdb-info-edge: rgba(79, 138, 147, 0.5);
    --tvdb-info-on-ink: #8fc3cb;

    --tvdb-like: #d9536a;           /* the heart */
    --tvdb-like-tint: rgba(217, 83, 106, 0.12);
    --tvdb-like-edge: rgba(217, 83, 106, 0.45);

    /* TheTVDB's attribution badge keeps TheTVDB's own green. */
    --tvdb-attribution-bg: #365658;
    --tvdb-attribution-bg-hover: #406264;
    --tvdb-attribution-edge: #0d1313;

    /* ---- Colour: on top of artwork --------------------------------------- */
    --tvdb-media-bg: linear-gradient(155deg, #0d1117, #232c3a);
    --tvdb-scrim: rgba(10, 13, 18, 0.6);
    --tvdb-scrim-strong: rgba(10, 13, 18, 0.9);
    --tvdb-scrim-caption: rgba(10, 13, 18, 0.78);   /* under caption text on a still */
    --tvdb-text-shadow-on-art: 0 1px 2px rgba(10, 13, 18, 0.7);

    /* ---- Placeholder art (the landing page's product preview) ---------------
       Abstract fills in the theme colours, standing in for posters and stills
       where real artwork must not be used. */
    --tvdb-art-shape: rgba(241, 236, 226, 0.14);
    --tvdb-art-teal: linear-gradient(150deg, #1f2733, #4f8a93);
    --tvdb-art-amber: linear-gradient(150deg, #29333f, #d6922e);
    --tvdb-art-green: linear-gradient(150deg, #1f2733, #6f9d6f);
    --tvdb-art-rose: linear-gradient(150deg, #29333f, #d9536a);

    /* ---- Focus ring: amber on ink; paper surfaces switch it to ink ------- */
    --tvdb-focus: var(--tvdb-signal);
    --tvdb-focus-halo: var(--tvdb-signal-halo);

    /* ---- Type -------------------------------------------------------------
       Display: headings and big numbers. UI: everything people read or press.
       Mono: data only — episode codes, countdowns, counts and ids. */
    --tvdb-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --tvdb-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tvdb-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Seven steps, and an eighth for one headline. The root is 16px at every width, so xs is 12px. */
    --tvdb-text-xs: 0.75rem;        /* 12px  fine print, badges */
    --tvdb-text-sm: 0.875rem;       /* 14px  secondary text, buttons, labels */
    --tvdb-text-md: 1rem;           /* 16px  body */
    --tvdb-text-lg: 1.125rem;       /* 18px  lead text, h3 */
    --tvdb-text-xl: 1.5rem;         /* 24px  h2 */
    --tvdb-text-2xl: 2rem;          /* 32px  stat numbers, h1 on phones */
    --tvdb-text-3xl: 2.5rem;        /* 40px  h1 on desktop */
    --tvdb-text-4xl: 3.5rem;        /* 56px  the landing page's headline only */

    --tvdb-leading-tight: 1.1;      /* display type */
    --tvdb-leading-snug: 1.3;       /* UI text, card titles */
    --tvdb-leading-body: 1.55;      /* paragraphs */

    /* ---- Spacing ----------------------------------------------------------- */
    --tvdb-space-1: 0.25rem;        /*  4px */
    --tvdb-space-2: 0.5rem;         /*  8px */
    --tvdb-space-3: 0.75rem;        /* 12px */
    --tvdb-space-4: 1rem;           /* 16px */
    --tvdb-space-5: 1.5rem;         /* 24px */
    --tvdb-space-6: 2rem;           /* 32px */
    --tvdb-space-7: 3rem;           /* 48px */

    /* ---- Radius ------------------------------------------------------------ */
    --tvdb-radius-sm: 4px;          /* chips, code, small tags */
    --tvdb-radius-md: 8px;          /* buttons, inputs, posters, tiles */
    --tvdb-radius-lg: 12px;         /* the panel, cards, modals */
    --tvdb-radius-pill: 999px;
    --tvdb-radius-round: 50%;

    /* ---- Elevation and motion ---------------------------------------------- */
    --tvdb-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.18);
    --tvdb-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.28);
    --tvdb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --tvdb-ease: 0.15s ease;

    /* ---- Page frame -------------------------------------------------------- */
    --tvdb-shell-pad: clamp(1.25rem, 3vw, 2.5rem);
    --tvdb-width-full: 1100px;      /* grids and detail pages */
    --tvdb-width-narrow: 680px;     /* forms and text pages (content width) */

    /* ---- Bootstrap, themed through its own variables ----------------------
       These are the defaults for the dark canvas. Paper surfaces override the
       same variables (see "Surfaces" in base.css), so Bootstrap utilities such
       as .text-muted and .text-danger resolve to the right colour on both. */
    --bs-body-font-family: var(--tvdb-font-ui);
    --bs-body-font-size: var(--tvdb-text-md);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--tvdb-on-ink);
    --bs-body-color-rgb: 241, 236, 226;
    --bs-body-bg: var(--tvdb-ink);
    --bs-body-bg-rgb: 21, 27, 36;
    --bs-emphasis-color: var(--tvdb-on-ink);
    --bs-emphasis-color-rgb: 241, 236, 226;
    --bs-secondary-color: var(--tvdb-on-ink-muted);
    --bs-secondary-bg: var(--tvdb-ink-3);
    --bs-tertiary-bg: var(--tvdb-ink-2);
    --bs-heading-color: inherit;
    --bs-font-monospace: var(--tvdb-font-mono);
    --bs-code-color: inherit;

    --bs-link-color: var(--tvdb-signal);
    --bs-link-color-rgb: 232, 163, 61;
    --bs-link-hover-color: #f2c479;
    --bs-link-hover-color-rgb: 242, 196, 121;

    --bs-primary: var(--tvdb-signal);
    --bs-primary-rgb: 232, 163, 61;
    --bs-danger: var(--tvdb-danger);
    --bs-danger-rgb: 163, 71, 47;

    --bs-border-color: var(--tvdb-line);
    --bs-border-radius: var(--tvdb-radius-md);
    --bs-border-radius-sm: var(--tvdb-radius-sm);
    --bs-border-radius-lg: var(--tvdb-radius-md);
    --bs-border-radius-pill: var(--tvdb-radius-pill);
}