/* Harmony design system tokens: colour, type, spacing, effects.
   Consumed by the app shell. Page content still reads base.css variables.

   ===================================================================
   WHERE TO CHANGE WHAT
   ===================================================================
   Change a value HERE when you want it to move everywhere at once.
   Change it in the file listed below when only that thing should move.

     the top bar's colour ......... --color-masthead (this file)
     every gold button ........... --color-accent-500 (this file)
     ink on gold buttons ......... --color-text-on-accent (this file)
     links, active tabs, focus ... --color-primary-500 (this file)
     the whole blue identity ..... the --color-primary-* ramp (this file)

     one button's shape/padding .. sea.css AND transaction.css, see below
     data-grid headers + pager ... filter-table.css
     the top bar's layout ........ topnav.css
     modals, upload, aggregation . transaction.css
     report tables ............... tabulator.css

   THE TRAP: sea.css and transaction.css both define .btn-primary,
   .summary-filter button and .period-step. sea/_base.html loads sea.css;
   transaction, land AND distribution_cost all load transaction.css. Editing
   only one silently fixes a quarter of the product. Change both, or grep
   first: grep -rn "your-selector" static/css/

   AFTER EDITING: run `python manage.py collectstatic --noinput`. DEBUG is
   False, so WhiteNoise serves hashed copies out of staticfiles/ and your
   edit to static/css/ is not visible until you do.

   Values come from the Harmony manual. Prefer adding a token over hand
   tuning a hex code in a rule, so the system stays one system.
   =================================================================== */

/* Inter, variable optical size. The 24px and larger sizes pick up the
   Display cut automatically through the opsz axis. */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap');

:root {
  /* Primary: deep "ground" navy up to "thin air" tint */
  --color-primary-900: #050B18;
  --color-primary-800: #0B2545;
  --color-primary-700: #14406B;
  --color-primary-600: #1D5A8C;
  --color-primary-500: #2C6E9E;
  --color-primary-400: #4A8DBB;
  --color-primary-300: #7FB3D9;
  --color-primary-200: #B3D4EA;
  --color-primary-100: #D9EDF7;
  --color-primary-50:  #F0F8FC;

  /* Neutral: carries ~80% of pixel area */
  --color-neutral-900: #10151C;
  --color-neutral-800: #20272F;
  --color-neutral-700: #39424C;
  --color-neutral-600: #57626D;
  --color-neutral-500: #78838D;
  --color-neutral-400: #9CA6AE;
  --color-neutral-300: #C3CBD1;
  --color-neutral-200: #E1E5E8;
  --color-neutral-100: #F1F3F5;
  --color-neutral-0:   #FFFFFF;

  /* Accent: muted gold, capped at 5% of any viewport */
  --color-accent-700: #7A5300;
  --color-accent-600: #B8801C;
  --color-accent-500: #E9A83C;
  --color-accent-300: #F2CA8A;
  --color-accent-100: #FBEEDA;

  /* Gold is a mid-tone: white text on accent-500 is 2.1:1 and fails AA, while
     the ground navy is 9.2:1. Every gold fill therefore takes dark ink. */
  --color-text-on-accent: var(--color-primary-900);

  /* Masthead. A dedicated deep indigo for the app bar, off the primary ramp by
     request. Kept as its own token rather than by moving primary-800, which
     also carries pressed states, markers, and body text. White on it is 14:1. */
  --color-masthead:       #0f184a;
  --color-masthead-hover: #0A0E61;

  /* Semantic */
  --color-success-600: #1E7A45;
  --color-success-100: #E3F5EA;
  --color-warning-600: #9A5D00;
  --color-warning-100: #FCEFD9;
  --color-danger-600:  #B3261E;
  --color-danger-100:  #FCEAE8;
  --color-info-600:    #1D57A0;
  --color-info-100:    #E4EDF9;

  /* Semantic aliases */
  --color-text-heading:   var(--color-neutral-900);
  --color-text-body:      var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary:  var(--color-neutral-600);
  --color-text-inverse:   var(--color-neutral-0);

  --color-surface-page:     var(--color-neutral-0);
  --color-surface-subdued:  var(--color-neutral-100);
  --color-surface-inverse:  var(--color-primary-900);

  --color-border-default: var(--color-neutral-300);
  --color-border-subtle:  var(--color-neutral-200);
  --color-border-focus:   var(--color-primary-500);

  --color-action-default:        var(--color-primary-500);
  --color-action-accent-default: var(--color-accent-500);

  /* Type */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Reserved for genuine code or pre blocks, of which the product currently has
     none. It is deliberately unused by UI chrome: this stack loads no webfont,
     so it resolved to whatever mono the OS shipped (Consolas on Windows) and
     read as a foreign face beside Inter. Columns of figures align through
     font-variant-numeric: tabular-nums on the text face instead. */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-heading-1-size: 32px; --text-heading-1-line: 36px;
  --text-heading-2-size: 24px; --text-heading-2-line: 28px;
  --text-heading-3-size: 20px; --text-heading-3-line: 24px;
  --text-heading-4-size: 16px; --text-heading-4-line: 20px;
  --text-body-m-size:    16px; --text-body-m-line:    24px;
  --text-body-s-size:    14px; --text-body-s-line:    20px;
  --text-label-size:     12px; --text-label-line:     16px;
  --text-caption-size:   12px; --text-caption-line:   16px;

  /* Tracking is never altered. It is predefined in the face. */
  --tracking-default: 0em;

  /* Spacing: 8px base, restricted scale */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px;

  --page-margin-sm: 24px;
  --page-margin-md: 48px;

  /* One height for every control that sits on a filter row -- select, stepper,
     submit. Set explicitly because a select sizes from its own font metrics and
     a button from its content, so the two never agree on their own. */
  --control-h: 36px;

  /* Effects: square corners, single-weight borders, one overlay shadow */
  --radius-sm: 0px;
  --radius-md: 0px;
  /* The one exception, and it applies to exactly one object: the floating app
     bar (topnav.css), which is a stadium -- radius at half its height, so the
     ends are true half-circles. Everything else in the product stays square. */
  --radius-capsule: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --shadow-overlay: 0 6px 16px rgba(5, 11, 24, 0.22);
  --focus-ring: 0 0 0 3px var(--color-primary-200);
}