/*
 * The design tokens of the ministry.
 *
 * Every colour, every distance, every corner and every movement of the
 * site is named here once. The pages, the forms and the messages that
 * leave the site all read from this list, so the site and the messages
 * look like the same ministry.
 *
 * The colours are also in the engine of the messages
 * (TLV_Emailer::brand), and both read the same options of the site, so
 * a change of the colour in the administration changes the site and the
 * messages together.
 */

:root {
    /* ------------------------------------------------------------------
     * The colours
     * ------------------------------------------------------------------ */
    --tlv-primary: #1e3a8a;          /* the navy of the ministry */
    --tlv-primary-dark: #172554;
    --tlv-primary-deep: #0f1b4d;
    --tlv-primary-soft: #e0e7ff;
    --tlv-primary-softer: #eef2ff;
    --tlv-secondary: #1e40af;         /* the second navy of the ministry */
    --tlv-accent: #f59e0b;            /* the gold of the ministry */
    --tlv-accent-dark: #d97706;
    --tlv-accent-soft: #fef3c7;

    /* ------------------------------------------------------------------
     * The words on the dark grounds and on the gold
     *
     * The navy of the ministry is a ground, and the gold is a ground.
     * These are the only colours that are allowed to sit on top of them,
     * so every page reads the same way.
     * ------------------------------------------------------------------ */
    --tlv-hero-gradient: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #172554 100%);
    --tlv-on-dark: #ffffff;                       /* the words on the navy */
    --tlv-on-dark-muted: rgba(255, 255, 255, 0.88); /* the quiet words on the navy */
    --tlv-gold-text: #b45309;                     /* the gold when it is a word on white */
    --tlv-on-gold: #172554;                       /* the words on the gold */

    --tlv-ink: #1f2937;               /* the words */
    --tlv-ink-soft: #374151;
    --tlv-muted: #6b7280;             /* the words that are quiet */
    --tlv-faint: #9ca3af;

    --tlv-paper: #ffffff;             /* the ground of a page */
    --tlv-surface: #f9fafb;           /* the ground of a block */
    --tlv-surface-warm: #fffbeb;
    --tlv-line: #e5e7eb;              /* a line */
    --tlv-line-strong: #d1d5db;

    --tlv-success: #15803d;
    --tlv-success-soft: #f0fdf4;
    --tlv-warning: #b45309;
    --tlv-warning-soft: #fffbeb;
    --tlv-danger: #b91c1c;
    --tlv-danger-soft: #fef2f2;

    /* ------------------------------------------------------------------
     * The writing
     * ------------------------------------------------------------------ */
    --tlv-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --tlv-font-reading: Georgia, "Times New Roman", serif;
    --tlv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --tlv-size-xs: 0.75rem;
    --tlv-size-sm: 0.875rem;
    --tlv-size-base: 1rem;
    --tlv-size-md: 1.125rem;
    --tlv-size-lg: 1.375rem;
    --tlv-size-xl: 1.75rem;
    --tlv-size-2xl: 2.25rem;
    --tlv-size-3xl: 3rem;

    --tlv-leading-tight: 1.25;
    --tlv-leading: 1.65;
    --tlv-leading-loose: 1.8;

    /* ------------------------------------------------------------------
     * The distances
     * ------------------------------------------------------------------ */
    --tlv-space-1: 4px;
    --tlv-space-2: 8px;
    --tlv-space-3: 12px;
    --tlv-space-4: 16px;
    --tlv-space-5: 24px;
    --tlv-space-6: 32px;
    --tlv-space-7: 48px;
    --tlv-space-8: 64px;
    --tlv-space-9: 96px;

    --tlv-wrap: 1200px;
    --tlv-wrap-narrow: 780px;

    /* ------------------------------------------------------------------
     * The corners, the shadows and the movement
     * ------------------------------------------------------------------ */
    --tlv-radius-sm: 6px;
    --tlv-radius: 10px;
    --tlv-radius-lg: 16px;
    --tlv-radius-xl: 24px;
    --tlv-radius-pill: 999px;

    --tlv-shadow-sm: 0 1px 2px rgba(15, 27, 77, 0.06);
    --tlv-shadow: 0 4px 18px rgba(15, 27, 77, 0.08);
    --tlv-shadow-lg: 0 18px 48px rgba(15, 27, 77, 0.12);
    --tlv-ring: 0 0 0 3px rgba(30, 58, 138, 0.35);

    --tlv-move-fast: 140ms;
    --tlv-move: 220ms;
    --tlv-move-slow: 420ms;
    --tlv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * The names the site already uses keep their meaning, so the older
 * pages of the theme do not change the moment the tokens arrive.
 */
:root {
    --primary-blue: var(--tlv-primary);
    --secondary-blue: var(--tlv-secondary);
    --accent-gold: var(--tlv-accent);
    --dark-gold: var(--tlv-accent-dark);
    --text-dark: var(--tlv-ink);
    --text-light: var(--tlv-muted);
    --bg-light: var(--tlv-surface);
    --white: var(--tlv-paper);
    --border-light: var(--tlv-line);
}

/*
 * A visitor who has asked for less movement gets a site that does not
 * move.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}