/*
 * CFO Hub design tokens - the single source every stylesheet reads
 * (PracticeCFO Brand Standard June 2026, lifted verbatim from the
 * design handoff's token tables so the names match the design files
 * and never drift in translation). Two naming families coexist by
 * design: the app's original --color-* names and the handoff's --p-*
 * shell names, aliased here rather than renamed in either direction.
 * The rule of the palette: orange is a QUIET accent - CTAs, links,
 * key highlights, never large fills; roughly 90% of any screen is
 * paper, white, and ink
 */
:root {
  color-scheme: light;

  /* ------------------------------------------------------- accent */
  --color-accent: #E1602C;         /* orange - the single accent */
  --color-accent-hover: #C24E22;   /* button hover */
  --color-accent-press: #A84319;   /* button active */
  --color-accent-tint: #F8E7DC;    /* active nav fill, rare washes */
  --p-accent: var(--color-accent); /* the handoff CSS's alias for it */
  --p-tint: #F8E7DC;               /* active fill on WHITE surfaces */
  --p-tint-deep: #F6DCC8;          /* active fill on the beige chrome,
                                      where the white-surface tint is
                                      too close in luminance to read */

  /* ---------------------------------------------------------- ink */
  --color-ink: #38342F;            /* headings - warm ink */
  --p-ink: #38342F;
  --color-near-black: #2B2723;     /* max-contrast text, links */
  --color-text: #5C564E;           /* body copy */
  --p-text: #5C564E;
  --color-text-muted: #8A8377;     /* meta, captions, counts */
  --p-muted: #8A8377;
  --color-section-header: #A29A8D; /* uppercase section headers */

  /* ----------------------------------------------------- surfaces */
  --color-bg: #F4F2ED;             /* warm paper canvas */
  --p-bg: #F4F2ED;
  --color-card: #FFFFFF;           /* white cards float on paper */
  --p-card: #FFFFFF;
  --color-surface-alt: #FAF8F4;    /* stone panel fill */
  --color-border: #E6E2DA;         /* warm hairline */
  --p-border: #E6E2DA;
  --p-border-strong: #D9D2C5;      /* field borders */
  --color-sidebar-hover: #F0EBE1;  /* hover fill on WHITE surfaces
                                      (popovers, menus) */
  --p-chrome: #F0EBE1;             /* the application chrome surface
                                      (launcher, sidebar, rail) - one
                                      deliberate step off the white
                                      canvas, where --p-bg stays the
                                      paper tone for fills ON white */
  --p-chrome-hover: #E7E1D6;       /* hover fill on the chrome */
  --p-chrome-deep: #E7E1D6;        /* the module launcher's surface:
                                      the deepest chrome step, so the
                                      shell grades edge to bright
                                      center (same value as the hover
                                      by coincidence, not by job) */
  --p-chrome-rule: #CEC5B3;        /* the border between major shell
                                      regions (launcher, sidebar,
                                      rail, canvas) */
  --p-chip: #FDFCF9;               /* anything raised OVER the chrome
                                      (rail buttons, the bell, the
                                      account popover): warm white, so
                                      it separates from the beige
                                      without glowing over it the way
                                      --p-card's pure white does */

  /* ------------------------------------------------------- status */
  --color-success: #1F8A52;        /* enabled state, confirmations */
  --color-error: #B94A48;          /* validation */
  --color-error-mark: #DF2020;     /* field error marks */

  /* ------------------------------------------------ radius, shadow */
  --radius-sm: 4px;                /* pills, tags */
  --radius: 5px;                   /* buttons, small controls */
  --p-radius-sm: 11px;             /* fields, small cards */
  --p-radius: 16px;                /* cards, panels */
  --radius-row: 9px;               /* rows and nav items */
  --p-shadow: 0 1px 2px rgba(20, 28, 38, .04),
    0 6px 20px rgba(20, 28, 38, .05);
  --p-shadow-lift: 0 2px 4px rgba(20, 28, 38, .05),
    0 14px 36px rgba(20, 28, 38, .09);

  /* ------------------------------------------------------- layout */
  --p-sidebar: 260px;              /* left sidebar width */
  --p-rail: 330px;                 /* right rail width */
  --p-launcher: 54px;              /* module launcher, collapsed */
  --p-launcher-open: 188px;        /* module launcher, expanded */

  /* --------------------------------------------------- typography */
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --font-heading: "Lato", system-ui, -apple-system, sans-serif;
}