/* =========================================================================
   Palette — SELF-SERVICE surface. "Harbor", in the company's colours.

   Linked by account/index.html BEFORE core.css. Same token names as
   tokens-admin.css, so every component rule in core.css works unchanged.

   Chosen by Eric 2026-09-23 (chunk 3.6): the Harbor layout — a band carrying
   the logo, the nav and a white serif page title, content cards lifting over
   its edge, a horizon behind sign-in — in eastwestcommunities.com's own
   footer colours: gun metal (#22333b) with its gold (#edb800), the logo in
   its white frame, and the site's pale blue (#ecf4ff) as the ground. Gold
   only ever sits on gun metal; on white the accent is the gun metal itself.
   No purple. See .agent/docs/aesthetic.md.
   ========================================================================= */

:root {
  /* Surfaces — the website's pale blue under white cards */
  --bg-0:       #ecf4ff;   /* page ground below the band; input ground */
  --bg-1:       #ffffff;   /* cards, sign-in card */
  --bg-2:       #f1f5fa;   /* hover */
  --bg-3:       #dde3ec;   /* slider track, meter track */
  --bg-hover:   #f2f4f8;

  /* Lines */
  --line:       #dce2eb;
  --line-soft:  #e8ecf2;
  --line-bold:  #c2ccda;
  --line-hover: #9aabc2;

  /* Text — a gun-metal ink, never pure black */
  --fg:         #1f2d34;
  --fg-mute:    #4f5f68;
  --fg-dim:     #6d788e;
  --fg-faint:   #a5afc1;

  /* Accent — on white it is gun metal (buttons, switches, focus). The token
     keeps its console name; the role is the same. */
  --amber:        #22333b;
  --amber-bright: #121c21;   /* hover — deeper */
  --amber-soft:   rgba(34, 51, 59, 0.08);
  --amber-line:   rgba(34, 51, 59, 0.30);
  --amber-glow:   transparent;

  /* The band — logo, nav and page title on one gun-metal field (account.css) */
  --band:         #22333b;   /* the site's "Gun Metal" */
  --band-fg:      #ffffff;
  --band-mute:    #c7d1d6;   /* nav, user menu */
  --horizon:      #edb800;   /* the site's gold — only ever on gun metal */

  /* Status — all ≥4.5:1 on white so a status word is readable */
  --ok:           #1d7a45;
  --ok-soft:      rgba(29, 122, 69, 0.10);
  --ok-line:      rgba(29, 122, 69, 0.30);
  --warn:         #9a5a12;
  --warn-soft:    rgba(154, 90, 18, 0.10);
  --warn-line:    rgba(154, 90, 18, 0.34);
  --err:          #b3261e;
  --err-soft:     rgba(179, 38, 30, 0.09);
  --err-line:     rgba(179, 38, 30, 0.30);
  --err-bright:   #8f1b15;
  --info:         #22333b;
  --info-soft:    #ecf4ff;
  --info-line:    #b0c8e5;

  /* Ink on a filled accent button — white on gun metal / red */
  --ink-on-amber: #ffffff;
  --ink-on-err:   #ffffff;

  /* Depth — cards float a little over the band; the sign-in card more. */
  --scrim:        rgba(18, 28, 33, 0.40);
  --shadow-md:    0 1px 2px rgba(18, 28, 33, 0.06), 0 10px 28px rgba(18, 28, 33, 0.10);
  --shadow-lg:    0 24px 60px rgba(6, 10, 12, 0.45);
  --shadow-panel: -14px 0 36px rgba(18, 28, 33, 0.12);

  /* Textures. The page needs none — the band is its one gesture. The
     sign-in screen is the horizon: gun-metal sky, a 2px line of gold with its
     glow, darker water below. */
  --bg-texture: none;
  --login-texture:
    linear-gradient(180deg, transparent calc(64% - 2px), #edb800 calc(64% - 2px), #edb800 64%, transparent 64%),
    radial-gradient(38% 9% at 50% 64%, rgba(237, 184, 0, 0.26), transparent 72%),
    radial-gradient(30% 20% at 50% 66%, rgba(237, 184, 0, 0.08), transparent 70%),
    linear-gradient(180deg, #121d23 0%, #2d4450 64%, #1a2930 64%, #0f181c 100%);

  /* Geometry — the same 4px grid; --r-lg holds at the 10px ceiling. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 10px;

  --sidebar-w: 300px;      /* here, just the logo's cell */
  --toolbar-h: 78px;       /* room for the logo */

  /* Type. Source Serif 4 for titles (page, card, sign-in),
     Source Sans 3 for everything read or pressed, JetBrains Mono only for
     real data — an address, a uid. */
  --f-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-size-base: 16px;
  --lh-base: 1.55;

  /* Form labels and textareas: sentence-case sans. A textarea here holds
     prose (a vacation message); data fields opt into mono with class="mono". */
  --label-font: var(--f-sans);
  --label-size: 14px;
  --label-weight: 600;
  --label-case: none;
  --label-tracking: 0;
  --textarea-font: var(--f-sans);
  --textarea-size: 15px;

  /* Motion */
  --t-fast: 110ms cubic-bezier(.2,.7,.3,1);
  --t-med:  220ms cubic-bezier(.2,.7,.3,1);
}