/* =========================================================
   BALANCESQUAD BASE LAYER
   Loaded on every page, before app.css and any page-specific file.

   This is the ONLY file that defines: colour tokens, the type scale, the
   spacing/radius scale, the global reset, and the page shell (the flex/grid
   wrapper every page sits in). Nothing page-specific belongs here - that
   stays in the page's own CSS file.

   Colour: every value below is copied from the Flutter app's own
   AppColorTokens.light / .dark (lib/core/design_system/tokens/colors.dart)
   - the real emerald-and-white theme, not the old navy/lime one. Because
   the rest of app.css and every page's CSS already reads these same
   variable names (var(--primary-color), var(--surface), var(--border),
   var(--text-main), var(--bg-gradient), var(--success)...), redefining
   them here recolours the entire site through the existing rules -
   nobody needs to hand-edit 72 templates for the base repaint to reach
   every page. app.css's own competing copy of these tokens has been
   removed (it was silently overriding this file - same :root specificity,
   later in the cascade wins - which is why an earlier colour pass had no
   visible effect anywhere).

   Scale note: the spacing and radius numbers are not invented for the web -
   they are the same 4pt scale the Flutter app already uses
   (lib/core/design_system/tokens/spacing.dart and radii.dart), and the type
   family is the same 'Inter' the Flutter app renders with. That is what
   makes the two feel like one product instead of two, without touching a
   single colour.

   Structure of this file:
   01 Tokens (colour - unchanged, spacing, radius, shadow, type scale)
   02 Reset / normalisation
   03 Base typography
   04 Page shell (.app-page / .app-shell / .app-content)
   05 Spacing & layout utilities
   06 Responsive breakpoints for the shell
========================================================= */

/* -----------------------------------------------------------
   01 Tokens
----------------------------------------------------------- */
:root {
    color-scheme: light;

    /* --- Colour: AppColorTokens.light, Flutter's real emerald-and-white
       theme. Legacy names are kept so the rest of app.css/page CSS
       recolours automatically; --color-* names are the literal Flutter
       token names for anything written from here on. --- */
    /* "Ocean Teal" scheme: teal -> cyan -> deep ocean. */
    --color-primary: #0e7490;
    /* Text/numbers on a dark or near-black card need this, not --color-primary
       (calibrated for white backgrounds). Use for text colour on dark surfaces only. */
    --accent-on-dark: #2dd4bf;
    --color-on-primary: #ffffff;
    --color-primary-pressed: #0b5f76;
    --color-primary-soft: #dff3f7;
    --color-on-primary-soft: #0c4a5c;
    --color-canvas: #f3f8fa;
    --color-surface: #ffffff;
    --color-surface-sunken: #e9f1f4;
    --color-border: #dbe6ea;
    --color-text: #0d1b21;
    --color-text-secondary: #46606a;
    --color-hero-top: #0e7490;
    --color-hero-bottom: #164e63;
    --color-on-hero: #ffffff;
    --color-inverse: #0d1b21;
    --color-on-inverse: #e8f3f6;

    --primary-color: var(--color-primary);
    --secondary-color: #0891b2;             /* cyan: second stop of the brand gradient */
    --accent-lime: var(--color-primary);    /* retired alias */
    --accent-gold: #b45309;                 /* warning.solid */
    --ink: var(--color-text);
    --forest: var(--color-primary-pressed);

    --bg-gradient: linear-gradient(135deg, #14b8a6 0%, var(--color-hero-top) 50%, var(--color-hero-bottom) 100%);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-sunken);
    --page-soft: var(--color-canvas);
    --border: var(--color-border);

    --text-main: var(--color-text);
    --text-muted: var(--color-text-secondary);

    --success: #15803d;
    --warning: #b45309;
    --danger: #b4231f;
    --info: #1f55b5;

    --shadow-main: 0 22px 70px rgba(15, 21, 18, 0.16);
    --shadow-soft: 0 10px 24px rgba(15, 21, 18, 0.06);

    /* Alert/banner bg+text pairs - AppColorTokens.light .bg/.fg for each status tone. */
    --alert-success-bg: #e2f3e9;
    --alert-success-text: #07553a;
    --alert-error-bg: #fbe4e1;
    --alert-error-text: #9b1c1c;
    --alert-warning-bg: #fdf1d3;
    --alert-warning-text: #8a4b00;
    --alert-info-bg: #e4edfb;
    --alert-info-text: #1a489a;

    /* --- Type: same family the Flutter app uses. --- */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* --- Spacing: Flutter's 4pt rhythm (AppSpacing). Use these, not raw
       px, for any new gap/padding/margin so web and app stay on one
       scale. --- */
    --space-xxs: 4px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-gutter: 20px;
    --space-xl: 24px;
    --space-xxl: 32px;
    --space-xxxl: 40px;

    /* --- Radius: Flutter's AppRadii, plus the page-shell radii app.css
       already had (kept as aliases so existing rules using --radius-lg
       etc. keep working untouched). --- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* --- Page shell --- */
    /* Widened from 1250 - gives the header room to sit on one line
       without wrapping or crowding, and gives dense pages (tables,
       leaderboards) more breathing room. Every mobile breakpoint below
       still forces 100% width, so this never touches small screens. */
    --shell-max-width: 1400px;
    --shell-narrow-width: 640px;   /* auth / single-column forms */
    --shell-wide-width: 1440px;    /* dense admin/data screens */
    --header-height: 76px;
}

/* AppColorTokens.dark - a full repaint, not just the surface/border swap
   the old block did (which left buttons/badges still on the light-mode
   blue/green regardless of theme). Same idea: legacy variable names, so
   the whole site (not just base.css/header.css) goes dark consistently. */
html.dark,
body.dark,
body.dark-mode,
.dark {
    color-scheme: dark;

    --color-primary: #2dd4bf;
    --accent-on-dark: #2dd4bf; /* already the bright one in dark mode */
    --color-on-primary: #042f2e;
    --color-primary-pressed: #14b8a6;
    --color-primary-soft: #12303a;
    --color-on-primary-soft: #99f6e4;
    --color-canvas: #091216;
    --color-surface: #101c22;
    --color-surface-sunken: #0c161b;
    --color-border: #22343c;
    --color-text: #e8f3f6;
    --color-text-secondary: #a9c0c8;
    --color-hero-top: #155e75;
    --color-hero-bottom: #101c22;
    --color-on-hero: #e8f3f6;
    --color-inverse: #172830;
    --color-on-inverse: #e8f3f6;

    --primary-color: var(--color-primary);
    --secondary-color: #22d3ee;
    --accent-lime: var(--color-primary);
    --accent-gold: #f5b942;
    --ink: var(--color-text);
    --forest: var(--color-primary-pressed);

    --bg-gradient: linear-gradient(135deg, var(--color-hero-top) 0%, var(--color-hero-bottom) 100%);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-sunken);
    --page-soft: var(--color-canvas);
    --border: var(--color-border);

    --text-main: var(--color-text);
    --text-muted: var(--color-text-secondary);

    --success: #4ade80;
    --warning: #f5b942;
    --danger: #ff6b6b;
    --info: #7aa7ff;

    --shadow-main: 0 22px 70px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.30);

    --alert-success-bg: #1d3928;
    --alert-success-text: #86efac;
    --alert-error-bg: #3a2724;
    --alert-error-text: #fca5a5;
    --alert-warning-bg: #38331e;
    --alert-warning-text: #fcd34d;
    --alert-info-bg: #24313c;
    --alert-info-text: #93c5fd;
}

/* -----------------------------------------------------------
   02 Reset / normalisation
----------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* Stops sideways panning from any stray wide child - the actual fix for
   pages that visually "run wider" than the rest of the app. */
html {
    overflow-x: hidden;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* -----------------------------------------------------------
   03 Base typography
----------------------------------------------------------- */
html {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family-base);
    font-size: 15px;
    line-height: 1.5;
    /* The canvas colour, not the hero gradient - the gradient is only for
       hero cards/the header now (Flutter never uses it as a page
       backdrop), and .app-page below sets its own background anyway;
       this is just what shows if anything is ever taller than that. */
    background: var(--page-soft);
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

/* Legible, restrained scale - avoids every page inventing its own
   heading sizes. Page CSS may still set a bigger hero number; this is
   the default. */
h1 { font-size: clamp(22px, 2.4vw, 30px); }
h2 { font-size: clamp(19px, 2vw, 24px); }
h3 { font-size: 17px; }
h4 { font-size: 14px; letter-spacing: .02em; }

p {
    margin: 0;
}

/* -----------------------------------------------------------
   04 Page shell
   One structure for every page: a full-height flex column holding the
   header, then a centred content container of one of three fixed
   widths. This is the actual fix for "different pages have different
   widths" - there is now exactly one place a width can come from.
----------------------------------------------------------- */
/* This used to wrap the ENTIRE app in a padded canvas with a big rounded,
   heavily-shadowed "shell" floating inside it - so literally every page
   read as a framed picture sitting on a background, independent of
   anything on the page itself. That is the actual "whole page feels like
   a box" complaint. Fixed at the root: the page IS the background now
   (no padding gap, no canvas-vs-shell colour split), and the shell is
   just a max-width content column - no radius, no shadow, no border. */
.app-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
}

.app-shell {
    width: 100%;
    max-width: var(--shell-max-width);
    margin: 0 auto;
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* Modifiers for the pages that legitimately need a different width
   (auth screens, dense admin tables) - so those pages migrate onto
   this one system instead of inventing their own wrapper class. See
   the migration checklist for which pages use which modifier. */
.app-shell--narrow {
    max-width: var(--shell-narrow-width);
}

.app-shell--wide {
    max-width: var(--shell-wide-width);
}

.app-content {
    flex: 1;
    padding: 22px 24px; /* was 35px flat - too much dead margin around every section */
    background: var(--surface);
    color: var(--text-main);
}

/* -----------------------------------------------------------
   05 Spacing & layout utilities
   Small, optional helpers - existing page CSS is not required to use
   these, but new/updated markup should reach for these before adding
   a one-off margin.
----------------------------------------------------------- */
.u-stack-sm > * + * { margin-top: var(--space-sm); }
.u-stack-md > * + * { margin-top: var(--space-md); }
.u-stack-lg > * + * { margin-top: var(--space-lg); }

.u-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.u-row-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* -----------------------------------------------------------
   06 Responsive breakpoints for the shell
   Matches the breakpoints already in use across the app's page CSS
   (1200 / 768 / 560) so page-specific media queries continue to line
   up with the shell instead of fighting it.
----------------------------------------------------------- */
@media (max-width: 1200px) {
    .app-content {
        padding: var(--space-xl);
    }
}

@media (max-width: 768px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell {
        width: 100%;
        max-width: 100%;
    }

    .app-content {
        padding: var(--space-lg);
    }
}

@media (max-width: 560px) {
    .app-content {
        padding: var(--space-md);
    }
}