/* ==========================================================================
   Design tokens.

   One palette and one set of measures for the public site, the account
   pages, the judges' bout list and the admin. Everything else refers to
   these names; no stylesheet carries a colour of its own. The one
   exception is the admin's dark scheme, which keeps its shades next to
   the variables it fills (admin/css/theme.css).
   ========================================================================== */

:root {
    /* The dark side: header, hero, footer. */
    --ink-950: #171b20;
    --ink-900: #1f242b;
    --ink-800: #272c34;
    --ink-700: #323843;
    /* Over the footer's picture: the footer's own ink, see-through. */
    --footer-veil: rgba(39, 44, 52, 0.6);
    --ink-600: #454d5a;

    /* The light side: page ground, cards, hairlines. */
    --ground: #edeff4;
    --surface: #ffffff;
    --surface-soft: #f6f7fa;
    --line: #e0e4eb;
    --line-strong: #cbd1db;

    /* Text. */
    --text: #171a1f;
    --text-soft: #4d5562;
    --text-muted: #8a92a0;
    --text-on-dark: #f3f5f8;
    --text-on-dark-muted: #9aa3b1;

    /* Accents: blue leads, gold marks what is active, red what is live. */
    --accent: #3a8ad8;
    --accent-strong: #2a73bd;
    --accent-soft: #e6f0fa;
    --accent-deep: #1f578f;
    --gold: #f7c53b;
    --gold-strong: #b98a06;
    --gold-deep: #6f560b;
    --gold-soft: #fdf6e1;
    --red: #e2403b;
    --red-strong: #c22d29;
    --red-deep: #8d2623;
    --red-soft: #fdecec;
    --green: #2c9a68;
    --green-soft: #e7f5ee;
    --white: #ffffff;

    /* Other people's colours, for the links to their networks. */
    --brand-facebook: #3c6bc1;
    --brand-instagram: #46618f;
    --brand-twitter: #2fb1e4;
    --brand-youtube: #dd3a34;
    --brand-telegram: #2a9fd8;
    --brand-tiktok: #1f1f23;
    --brand-x: #1f1f23;

    /* Type. */
    --font-head: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-body: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;

    /* Shape and depth. */
    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 0 1px 2px rgba(23, 26, 31, 0.05), 0 6px 20px rgba(23, 26, 31, 0.06);
    --shadow-raised: 0 2px 4px rgba(23, 26, 31, 0.08), 0 14px 34px rgba(23, 26, 31, 0.14);

    /* Layout. */
    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 28px);
    --gap: clamp(20px, 3vw, 32px);
}