/* Central theme tokens for the whole application.
 *
 * The Rocberg palette (dark navy, amber accent) is defined once here as the
 * --rb-* tokens, and every older semantic variable the rest of the CSS already
 * uses (--surface, --border, --text, ...) is mapped onto it. That mapping is
 * what rolls the theme across every screen: component rules in styles.css did
 * not need rewriting, they simply resolve to dark values now.
 *
 * To retheme the app, change the --rb-* block. To go back to a light theme,
 * change the mapping block. Nothing below this file hardcodes a brand colour.
 *
 * Fonts are bundled locally: DM Serif Display for display and section titles,
 * DM Sans for UI and body, both from fonts.css. Inter is kept as a fallback
 * face for anything still asking for it.
 */

@import url("/static/fonts.css");

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/inter-700.woff2") format("woff2");
}

:root {
  /* --- Rocberg tokens: the source of truth --- */
  --rb-bg: #0b111f;
  --rb-bg-alt: #0e1626;
  --rb-panel: #151d30;
  --rb-panel-2: #1b2640;
  --rb-border: rgba(255, 255, 255, 0.08);
  /* A stronger border for dense tables, where the faint one disappears. */
  --rb-border-strong: rgba(255, 255, 255, 0.14);

  --rb-text: #d7dbe4;
  --rb-muted: #8a92a4;
  --rb-faint: #6f7889;
  --rb-heading: #ffffff;

  --rb-accent: #e8863e;
  --rb-accent-deep: #c8622a;
  --rb-accent-soft: rgba(232, 134, 62, 0.14);

  /* Categorical chart palette, in order. */
  --rb-c1: #e8863e;
  --rb-c2: #4a90d9;
  --rb-c3: #3fb68b;
  --rb-c4: #9b6dd6;
  --rb-c5: #e0564f;
  --rb-c6: #c9a227;
  --rb-c7: #6b7280;

  /* Harmonised status / traffic-light colours. */
  --rb-green: #3fb68b;
  --rb-amber: #e8a13e;
  --rb-red: #e0564f;
  --rb-grey: #6b7280;

  /* --- TYPE LADDER ------------------------------------------------------
     One ladder, every size in the app reads from it. Nothing sets a raw px
     font-size any more, so changing the whole UI's scale is editing these
     eleven numbers rather than seventy-three declarations.

     Each step is one notch larger than the sizes this replaced, which is the
     "slightly larger overall" bump: 13px body became 14px, 12px labels became
     13px, and so on proportionally up and down the ladder. */
  --fs-2xs: 11px;    /* micro: chip source labels, dense meta */
  --fs-xs: 12px;     /* caption, faint helper text */
  --fs-sm: 13px;     /* small, form labels, badges */
  --fs-base: 14px;   /* BODY and table cells */
  --fs-md: 15px;     /* emphasised body */
  --fs-lg: 16px;     /* card titles */
  --fs-xl: 18px;     /* section heading (h2/h3) */
  --fs-2xl: 22px;    /* sub-display */
  --fs-3xl: 28px;    /* page heading */
  --fs-stat: 38px;   /* stat tile value */
  --fs-stat-lg: 44px;/* headline stat */

  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* --- CONTROLS ---------------------------------------------------------
     One height for every form field, so a date picker on a board card is the
     same size as a text input in Settings. Native date/time inputs are sized
     explicitly because browsers render them small otherwise. */
  --control-h: 42px;
  --control-pad-y: 9px;
  --control-pad-x: 12px;
  --control-radius: 8px;

  /* Buttons: two heights only. Anything else is a one-off and should not be. */
  --btn-h: 38px;
  --btn-pad-y: 8px;
  --btn-pad-x: 16px;
  --btn-sm-h: 32px;
  --btn-sm-pad-y: 5px;
  --btn-sm-pad-x: 12px;

  --rb-radius: 14px;
  --rb-radius-sm: 10px;
  --rb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --rb-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --rb-font-ui: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", system-ui, sans-serif;

  /* --- Mapping: the old semantic names now resolve to Rocberg --- */
  --primary: var(--rb-bg-alt);
  --accent: var(--rb-accent);

  --bg: var(--rb-bg);
  --surface: var(--rb-panel);
  --surface-2: var(--rb-panel-2);
  --border: var(--rb-border);
  --text: var(--rb-text);
  --text-muted: var(--rb-muted);
  --text-faint: var(--rb-faint);

  --green: var(--rb-green);
  --amber: var(--rb-amber);
  --red: var(--rb-red);
  --blue: var(--rb-c2);

  --radius: 12px;
  --radius-sm: 8px;
  --font: var(--rb-font-ui);
}