/* tidansrealm.com design tokens: the only place a colour, size, font or length is written.
   Every other stylesheet (base.css, components.css, pages.css) uses these names and nothing else; WebsiteCssTests fails
   on a raw colour or length anywhere else. The look follows the RealmEye-style community pages (docs/community-site.md
   "Look"): one font, 14/20 type, a 1170 px container with 15 px gutters, the light palette below. */

:root {
    color-scheme: light;

    /* ----- type ----- */
    --c-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --c-mono: ui-monospace, Consolas, monospace;
    --t-small: 12px;
    --t-side: 13px;
    --t-body: 14px;
    --t-lead: 16px;
    --t-h4: 18px;
    --t-brand: 22px;
    --t-h3: 24px;
    --t-h2: 30px;
    --t-h1: 36px;
    --t-display: 48px;  /* the home page's one headline */
    --lh: 20px;
    --lh-tight: 16px;
    --lh-text: 1.5;     /* long text: posts, legal pages, tooltips */
    --lh-heading: 1.1;
    --track-caps: 0.5px;
    --w-normal: 400;
    --w-medium: 500;
    --w-bold: 700;

    /* ----- colours ----- */
    --c-page: #fff;
    --c-white: #fff;
    --c-text: #333;
    --c-strong: #000;
    --c-muted: #777;
    --c-faint: #999;
    --c-link: #337ab7;
    --c-link-hover: #23527c;
    --c-rule: #ddd;
    --c-rule-light: #eee;
    --c-input: #ccc;
    --c-input-text: #555;
    --c-hover: #e6e6e6;
    --c-hover-rule: #adadad;
    --c-surface: #f5f5f5;
    --c-stripe: #f9f9f9;
    --c-bar: #f8f8f8;
    --c-bar-rule: #e7e7e7;
    --c-bar-icon: #888;
    --c-focus: #66afe9;
    --c-focus-glow: rgb(102 175 233 / 0.6);
    --c-selection: #b3d4fc;
    --c-yours: #fcf8e3;
    --c-ok: #5cb85c;
    --c-primary-rule: #2e6da4;
    --c-primary-hover: #286090;
    --c-primary-hover-rule: #204d74;
    --c-danger: #d9534f;
    --c-danger-rule: #d43f3a;
    --c-danger-hover: #c9302c;
    --c-danger-hover-rule: #ac2925;
    --c-ok-text: #3c763d;
    --c-ok-bg: #dff0d8;
    --c-ok-rule: #d6e9c6;
    --c-bad-text: #a94442;
    --c-bad-bg: #f2dede;
    --c-bad-rule: #ebccd1;
    --c-warn-text: #8a6d3b;
    --c-warn-bg: #fcf8e3;
    --c-warn-rule: #faebcc;
    --c-tip: #000;
    --c-tip-text: #fff;
    --c-shadow-inset: rgb(0 0 0 / 0.075);
    --c-shadow-well: rgb(0 0 0 / 0.05);
    --c-shadow-menu: rgb(0 0 0 / 0.175);
    --c-menu-rule: rgb(0 0 0 / 0.15);

    /* the game's rarity colours (client RarityUtils) and level colours (GuiUtils.difficultyColor), darkened for white */
    --c-r-lg: #ff4433;
    --c-r-os: #7d8ab0;
    --c-r-ex: #0a9c70;
    --c-r-un: #7a5cff;
    --c-r-ut: #2491db;
    /* an enchanted item's glint, the game's violet (EnchantGlint.hx silhouette tints #9B4DFF and #C9A2FF), on a 3 s loop */
    --c-glint: #9b4dff8c;
    --c-glint-hi: #c9a2ffcc;
    --glint-time: 3s;
    --c-lv-1: #2a9d2a;
    --c-lv-2: #1a8fb5;
    --c-lv-3: #4f4fd6;
    --c-lv-4: #a100cc;
    --c-lv-5: #d62828;
    --c-lv-6: #cc5200;

    /* ----- lines and corners ----- */
    --line: 1px;
    --line-thick: 2px;
    --radius: 4px;

    /* ----- spacing: the only gaps on the site ----- */
    --s-0: 2px;
    --s-1: 5px;
    --s-2: 10px;
    --s-3: 15px;
    --s-4: 20px;
    --s-5: 40px;
    --s-6: 60px;
    --cell: 8px;
    --cell-x: 12px;     /* a table cell's sides: 24 px between columns */
    --well-gap: 16px;       /* the gap after a player's facts and bio well, as the reference's */

    /* ----- controls: buttons, fields, pager links, pills ----- */
    --ctl-h: 34px;
    --ctl-h-sm: 30px;
    --ctl-h-xs: 26px;   /* the wiki search, as the reference's */
    --drops-min: 540px; /* an enemy's drop table on a phone, as the reference's (538 px, scrolls) */
    --ctl-h-lg: 46px;
    --ctl-pad-y: 6px;
    --ctl-pad-x: 12px;
    --ctl-pad-x-lg: 16px;
    --pill-pad-y: 10px;     /* a pill tab, as the reference's */
    --pill-pad-x: 7px;
    --t-ctl-lg: 18px;

    /* ----- the one sprite size (CommunityPages.SpritePx = ItemIcons.Tile) and the parts sized around it ----- */
    --sprite: 34px;
    --class-cell: 76px;     /* a class button: 76 x 79, as the reference's */
    --class-cell-h: 79px;
    --t-label: 10px;        /* the class button's label, as the reference's (the one text under 12 px) */
    --lh-label: 10px;
    --c-selected: #e0e0e0;  /* the chosen class button, shown dimmed as the reference's */
    --dim: 0.65;
    --icon: 14px;
    --caret: 4px;

    /* ----- widths ----- */
    /* the content column steps as the reference's does: fluid on a phone, then 750, 1000 and 1170 px at 768, 992
       and 1200 px wide screens (measured on realmeye.com, 2026-11-07) */
    --container-sm: 750px;
    --container-md: 1000px;
    --container: 1170px;
    --measure: 70ch;        /* long text never runs wider than this */
    --bar-h: 40px;          /* the navbar row, as the reference (40 px links plus its 1 px rule) */
    --menu-w: 160px;
    --search-w: 180px;
    --field-w: 420px;
    --field-min: 100px;
    --panel-w: 700px;       /* a form or a single card */
    --panel-narrow: 450px;  /* the log-in box */
    --list-w: 830px;        /* the shop list, a purchases table */
    --tip-w: 18rem;
    --bar-icon-w: 22px;
    --hero-art: 420px;      /* the home page's title screen picture */
    --doing-art: 136px;     /* the home page's animated sprites */
    --label-w: 88px;        /* a label column in a form row */
    --admin-tile: 56px;     /* the admin site's item slots */
}