/* ============================================================================
   SimpleAgentRE — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   Load order on every page (emitted by bootstrap.php):
     1) framework/tokens.css   <-- this file: defaults + variable contract
     2) framework/core.css     <-- reset + components + utilities (uses tokens)
     3) framework/fw-*.css     <-- BROKERAGE framework: overrides STRUCTURAL tokens
     4) themes/theme-*.css     <-- AGENT theme: overrides COLOR + FONT tokens
     5) pages/<page>.css       <-- page-specific leftovers (shrinks over time)

   Cascade rule: the agent theme loads LAST, so the agent's colors win.
   To let a brokerage LOCK its branding instead, swap steps 3 and 4 in
   bootstrap.php (one line) — see README_FRAMEWORK.md.

   The defaults below === the current live look ("blue", standard density),
   so a page that loads only tokens+core renders unchanged.
   ========================================================================== */

:root {
  /* ---- STRUCTURAL tokens (a brokerage framework overrides these) -------- */
  --sidebar-w:      260px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 100px;

  --fs-xs:   .7rem;
  --fs-sm:   .82rem;
  --fs-base: .9rem;
  --fs-md:   1rem;
  --fs-lg:   1.3rem;
  --fs-xl:   2rem;

  --control-pad-y: .7rem;
  --control-pad-x: .9rem;
  --btn-pad-y:     .75rem;
  --btn-pad-x:     1.4rem;

  --topbar-pad-y: .9rem;
  --topbar-pad-x: 2rem;

  --transition: .15s;
  --shadow-1: 0 8px 24px rgba(0,0,0,.4);

  /* ---- THEME tokens (an agent theme overrides these) ------------------- */
  /* defaults = current "blue" theme */
  --topbar-bg: rgba(10,21,48,.95);
  --topbar-hover: var(--color-bg-deep);
  --topbar-border: var(--color-border);
  --topbar-text: var(--color-text);

  --color-gradient-1: #60a5fa;
  --color-gradient-2: #2563eb;
  --color-gradient-border: rgba(37,99,235,.1);

  --color-bg:          #0d1b3e;   /* app background        */
  --color-bg-deep:     #0a1530;   /* sidebar               */
  --color-surface:     rgba(255,255,255,.05);
  --color-surface-2:   rgba(255,255,255,.07);
  --color-elevated:    #1a2f5a;   /* dropdowns / option bg */

  --color-border:        rgba(255,255,255,.12);
  --color-border-soft:   rgba(255,255,255,.08);
  --color-border-strong: rgba(255,255,255,.18);

  --color-text:        #ffffff;
  --color-text-muted:  #94a3b8;
  --color-text-faint:  rgba(255,255,255,.5);

  --color-primary:        #2563eb;
  --color-primary-hover:  #3b82f6;
  --color-primary-bright: #60a5fa;            /* old "sky"            */
  --color-primary-soft:   rgba(37,99,235,.1); /* tinted backgrounds   */
  --color-primary-line:   rgba(96,165,250,.25);

  --color-accent:       #f5a623;              /* old "gold"           */
  --color-success:      #22c55e;
  --color-success-deep: #16a34a;
  --color-danger:       #ef4444;
  --color-danger-soft:  rgba(239,68,68,.12);

  --color-on-primary:   #ffffff;

  --font-body:    'DM Sans', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --font-sig:     'Georgia', serif;

  /* ---- BACKWARD-COMPAT ALIASES ----------------------------------------
     The existing per-page CSS files still reference the OLD variable names.
     These aliases let those files keep working unchanged after pages are
     switched to the framework, so Task 4 can be done page-by-page instead
     of all at once. As each page CSS is cleaned up its alias usage drops;
     when nothing references an alias it can be deleted.
     NOTE: this block fixes 3 bugs that exist in the live css/theme-blue.css
       - malformed `--card:#rgba(...)`
       - duplicate `--card`
       - missing `;` after `--iborder` (silently killed `--input-bg`)
     -------------------------------------------------------------------- */
  --navy:        var(--color-bg);
  --navy-mid:    var(--color-elevated);
  --navy-light:  var(--color-elevated);
  --blue:        var(--color-primary);
  --blue-light:  var(--color-primary-hover);
  --sky:         var(--color-primary-bright);
  --gold:        var(--color-accent);
  --green:       var(--color-success);
  --green-dark:  var(--color-success-deep);
  --red:         var(--color-danger);
  --white:       var(--color-on-primary);
  --text:        var(--color-text);
  --text-muted:  var(--color-text-muted);
  --muted:       var(--color-text-muted);
  --card:        var(--color-surface);
  --card-bg:     var(--color-surface);
  --card-border: var(--color-border);
  --ibg:         var(--color-surface-2);
  --iborder:     var(--color-border-strong);
  --input-bg:    var(--color-surface-2);
  --input-border:var(--color-border-strong);
  --border:      var(--color-border-soft);
}