/* Copyright © 2025 RPGScience. All rights reserved. No permission is granted to use, copy, modify, or distribute this file. */

/* The font, the colours, the sizes, and the handful of resets and one-word
   helper classes everything else leans on. Load this first and load it
   everywhere.

   ---------------------------------------------------------------------------
   HOUSE RULE FOR THIS SITE'S CSS. Read before you style anything.
   Applies to every developer and every AI agent working on this project.

   Reuse what is already here. The look and feel is settled, and a rule that
   repeats an existing one is how the site loses its consistency and the
   stylesheets gain weight. Write new CSS only when nothing existing can do the
   job, and inline a style only when even that will not work.

   Pipeline, whenever you need to style something:
    1. Reuse a class. Search the stylesheets before writing anything. .btn with
       a role, .form-group with .form-control, .dialog with .dialog-header,
       .help-text, .plan-notice and .hidden already cover most needs.
    2. If only the size differs, restate a token on the container. Set
       --btn-pad, --btn-font, --field-pad or --field-font on the parent instead
       of writing a rule for the component. See .panel-side for the dense case
       and .auth-btn for the roomy one.
    3. Only if steps 1 and 2 truly cannot express it, add a rule, in the file
       listed below that fits. Name a token, never a raw colour or size. New
       tokens are declared here and nowhere else.
    4. Inline a style only for a genuine one-off, or for a value the code works
       out as it runs. Two elements wanting the same inline style means it
       should have been a class.

   Which file a rule belongs in:
    - tokens.css, this file. Every colour, size, font and shadow.
    - components.css. Anything two or more places use: buttons, fields,
      dialogs, header, sidebar, map surface, popups.
    - pages.css. Whole-page layouts: landing, gallery, FAQ, pricing, footer.
    - savedWorlds.css, codex.css, tutorial.css, cave.css, regionEditorNew.css.
      One panel each, and nothing in them may be needed by another panel.
    - responsive.css. Media queries only. It loads last so it can override.

   A panel that needs its own palette scopes the tokens to its own selector, as
   .region-editor-panel-new does with --re-*. Never put a panel's colours in
   :root.

   Two things to do before calling a styling change finished. Delete any rule
   your change has made redundant, and check that no class is left in a
   stylesheet with nothing in the markup using it.
   --------------------------------------------------------------------------- */

/* Inter font - local files */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* ============================================================================
   TOKENS
   Every colour and size is chosen here and nowhere else. A rule further down
   names a token, never a raw value, so one edit here changes the whole site.

   Two token groups are meant to be overridden by a container rather than read
   only: the button scale and the field scale near the bottom. A dense context
   restates them once (see .panel-side) and every control inside it follows, so
   there is one copy of each component rule instead of one per panel.
   ============================================================================ */
:root {
    /* --- Surfaces, lightest to darkest. An input sits on --bg-input, a button
       on --bg-control. Those two must never swap, or a button painted the
       colour of an input disappears into the panel behind it. --- */
    --bg-input: #f2f4f6; /* polished concrete input */
    --bg-panel: #ecf0f1; /* smoother, cast concrete panel */
    --bg-control: #e4e8eb; /* textured control surface */
    --bg-hover: #dce0e4; /* quiet row and list hover */
    --bg-main: #dce0e4; /* light concrete wall */
    --bg-sidebar: #c7cdd2; /* the generator panel's own face */
    --bg-control-hover: #c7cdd2; /* darker on hover */
    --nav-bg: #3c4a56; /* dark rebar-steel header */

    /* --- Text, darkest to lightest. All four clear 4.5:1 on the surfaces
       above, so any of them is safe as body text on any panel. --- */
    --text-primary: #1c1c1c; /* dark, almost black text */
    --text-headings: #333333; /* strong, dark gray heading */
    --text-secondary: #5f5f5f; /* standard medium gray */
    --text-muted: #6f6f6f; /* the quietest step, for hints and small print */
    --text-byline: #b45309; /* rust, for kickers and bylines */
    --border-color: #b2b8bd; /* panel seam border */

    /* --- Roles a control can take. Primary carries white text, so this yellow
       is nudged a step darker than the #f9a825 it started from, which buys the
       labels about a fifth more contrast without losing the brightness. Any
       further and it stops reading as yellow. --- */
    --accent-primary: #f09c16; /* safety yellow for Generate/CTAs */
    --accent-primary-hover: #d88c14;
    /* The same yellow again, as three numbers, for the one focus ring that needs
       it inside rgba(). Keep the two in step. */
    --accent-primary-rgb: 240, 156, 22;
    --accent-secondary: #455a64; /* cool, industrial blue-gray for Randomise */
    --accent-secondary-hover: #37474f;
    --accent-blue: #4a90e2; /* selection, and the two navigation buttons */
    --accent-blue-hover: #357abd;

    /* --- Status. Used by toasts, plan notices and destructive buttons. --- */
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --success-color: #4caf50;
    --success-color-hover: #45a049;
    --warning-color: #ff9800;
    --error-color: #f44336;
    --info-color: #2196f3;

    --font-sm: 10px;
    --font-base: 12px;
    --font-md: 13px;
    --font-lg: 15px;
    --font-xl: 17px;
    --line-height-normal: 1.4;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 15px;
    /* Flat design, so both corner radii are zero. They stay as tokens because
       turning the whole site's corners back on is then a two-line edit. */
    --radius-md: 0;
    --radius-lg: 0;

    /* --- The two scales a container may restate. Everything a person clicks
       or types into reads its size from one of these. --- */
    --btn-pad: 4px 10px;
    --btn-font: 13px;
    --field-pad: 4px 8px;
    --field-font: 13px;

    --panel-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    --shadow-popup: 0 0 10px rgba(0, 0, 0, 0.5);
    --worldmap-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    --navbar-shadow: 0 2px 5px rgba(0,0,0,0.2);
    --header-height: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    margin: 0;
    padding: 0; /* Remove body padding, handled by containers now */

    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
}
h1, h2, h3 { color: var(--text-headings); margin-bottom: var(--spacing-md); }
h1 { font-size: var(--font-xl); }
h2 { font-size: var(--font-md); margin: var(--spacing-xs) 0; color: var(--text-byline); }
h3 { font-size: var(--font-base); color: var(--text-secondary); margin: var(--spacing-md) 0 var(--spacing-sm) 0; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.absolute { position: absolute; }
.rounded-lg { border-radius: var(--radius-lg); }