/* =====================================================================
   THEME: Bright
   The direction from the Go54 login screen: light surfaces, a confident
   primary blue, generous rounded inputs, soft elevation, warm and familiar.

   Built from what actually makes that page work, which is not animation:
     * A real size jump between the heading and everything else
     * Whitespace that is not apologetic
     * One primary action, unmissable
     * Inputs with height and labels above rather than inside

   Two rules survive from the Ledger theme unchanged, because they earn
   their place regardless of palette:
     * Every naira figure renders in mono with tabular figures
     * Gold means money or verification and nothing else. In this theme
       that is the ONE warm accent against all the blue, which makes an
       amount jump off the page rather than blend into the brand colour.
   ===================================================================== */

:root {
  /* Surfaces. Not pure white: #FBFCFD takes the glare off a phone screen
     in daylight, which matters more here than anywhere else. */
  --paper:        #FBFCFD;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #F1F5F9;

  --ink:       #0F1B2D;
  --ink-body:  #33445C;
  --ink-muted: #5B6B82;
  --ink-faint: #93A1B4;

  --link:       #0B63CE;
  --link-hover: #084EA3;
  --focus:      #0B63CE;

  --accent:        #0B63CE;
  --accent-hover:  #0A55B0;
  --accent-fg:     #FFFFFF;
  --accent-border: #0B63CE;

  /* Gold against blue. The single warm value on the page, so an amount is
     the first thing the eye lands on. */
  --gold:      #B8860B;
  --gold-text: #8A6304;

  --green:      #17754A;
  --green-wash: #E7F5EE;

  --pending-text: #7A6A45;
  --pending-wash: #FDF6E3;

  --error:      #C0342B;
  --error-wash: #FDECEA;

  --rule-color:   #E2E8F0;
  --rule-1:       1px solid #E2E8F0;
  --rule-dashed:  1px dashed #CBD5E1;
  --section-rule: 1px solid #EAF0F6;

  /* Shape. Generous, which is most of what reads as friendly. */
  --radius-sm:    6px;
  --radius-btn:   10px;
  --radius-input: 10px;
  --radius-card:  14px;
  --radius-pill:  999px;

  /* Elevation. Soft and low. Two shadows stacked, a tight one for the edge
     and a wide diffuse one for the lift, which is what stops a card looking
     like it has a drop shadow from 2009. */
  --card-border:       1px solid #E8EEF5;
  --card-shadow:       0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .05);
  --card-shadow-hover: 0 2px 4px rgba(15, 27, 45, .06), 0 16px 40px rgba(15, 27, 45, .09);

  --btn-border:         1px solid #D3DEEA;
  --btn-border-hover:   #B9CADB;
  --btn-bg:             #FFFFFF;
  --btn-bg-hover:       #F1F5F9;
  --btn-fg:             #0F1B2D;
  --btn-shadow:         0 1px 2px rgba(15, 27, 45, .05);
  --btn-shadow-primary: 0 1px 2px rgba(11, 99, 206, .2), 0 6px 16px rgba(11, 99, 206, .22);

  --input-border:       1px solid #D3DEEA;
  --input-bg:           #FFFFFF;
  --input-shadow:       0 1px 2px rgba(15, 27, 45, .04);
  --input-shadow-focus: 0 0 0 4px rgba(11, 99, 206, .14);

  /* Type. Sans for headings too: a serif heading over a blue SaaS palette
     reads as two different sites stapled together. Mono still owns money. */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --text-xs:       14px;
  --text-sm:       15.5px;
  --text-base:     17px;
  --text-lede:     19px;
  --text-title:    18px;
  --text-h3:       22px;
  --text-h2:       clamp(28px, 3.6vw, 40px);
  --text-h1:       clamp(38px, 6vw, 60px);
  --text-money:    23px;
  --text-money-lg: 32px;

  /* Heavier and tighter than the serif theme. This is where most of the
     "expensive" feeling actually comes from. */
  --weight-display: 700;
  --weight-h3:      600;
  --tracking-h1:   -0.03em;
  --tracking-h2:   -0.02em;

  --shell:       1160px;
  --gutter:      22px;
  --section-pad: 76px;
  --grid-gap:    24px;

  --tap:      48px;
  --tap-lg:   56px;
  --input-h:  54px;
  --btn-pad:  26px;

  --t-fast: 150ms ease-out;
  --t-med:  240ms cubic-bezier(.2,.7,.3,1);
}

@media (max-width: 640px) {
  :root { --section-pad: 50px; --gutter: 18px; }
}

:root[data-mode="dark"] {
  --paper:        #0B1220;
  --paper-raised: #121B2C;
  --paper-sunk:   #182338;
  --ink:          #EAF0F8;
  --ink-body:     #C7D3E3;
  --ink-muted:    #93A3BA;
  --ink-faint:    #64748B;
  --link:         #7FB4F5;
  --link-hover:   #A6CCFA;
  --focus:        #7FB4F5;
  --accent:       #3B87E8;
  --accent-hover: #559AF0;
  --accent-fg:    #06101F;
  --accent-border:#3B87E8;
  --gold:         #E3B341;
  --gold-text:    #E3B341;
  --green:        #4BAE7E;
  --green-wash:   rgba(75, 174, 126, .14);
  --pending-text: #C2AE7C;
  --pending-wash: rgba(194, 174, 124, .14);
  --error:        #E4796B;
  --error-wash:   rgba(228, 121, 107, .14);
  --rule-color:   #23304A;
  --rule-1:       1px solid #23304A;
  --rule-dashed:  1px dashed #2C3A57;
  --section-rule: 1px solid #1B2740;
  --card-border:  1px solid #23304A;
  --card-shadow:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  --card-shadow-hover: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.4);
  --btn-border:   1px solid #2C3A57;
  --btn-border-hover: #3C4E72;
  --btn-bg:       #121B2C;
  --btn-bg-hover: #182338;
  --btn-fg:       #EAF0F8;
  --input-border: 1px solid #2C3A57;
  --input-bg:     #0F1728;
  --input-shadow-focus: 0 0 0 4px rgba(59, 135, 232, .22);
}

/* Bright-specific: the numbered step marker becomes a filled circle rather
   than bare mono digits, which is the familiar pattern on sites of this kind. */
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 16px;
}
.step--alt { background: transparent; }
.step:nth-child(even) { background: var(--paper-sunk); }

/* Section rules are nearly invisible here; separation comes from the surface
   change instead, which is what stops a light theme looking like a spreadsheet. */
.section { border-bottom: none; }
.section--raised, .section--sunk { border-block: var(--section-rule); }

/* Application shell. The sidebar is the one deliberately dark surface in an
   otherwise light theme: it frames the workspace and stops a full-width white
   page from feeling like a document rather than an app. */
:root {
  --sidebar-bg:     #17244A;
  --sidebar-fg:     #DCE5F2;
  --sidebar-muted:  #8496B8;
  --sidebar-rule:   #24345E;
  --sidebar-hover:  #1F2F5C;
  --sidebar-active: #0B63CE;
}
:root[data-mode="dark"] {
  --sidebar-bg:     #0A1120;
  --sidebar-fg:     #DCE5F2;
  --sidebar-muted:  #6C7C99;
  --sidebar-rule:   #17233C;
  --sidebar-hover:  #141F36;
  --sidebar-active: #3B87E8;
}