/* ==========================================================================
   Project Finance Atlas — design tokens (V1.1)

   The previous palette put a saturated yellow directly on a saturated green
   across four large surfaces, which read as a flag rather than as a product.
   This one keeps green and gold but moves both away from the primaries:
   green towards charcoal, yellow towards an aged, printerly gold. Green and
   charcoal carry structure and authority, ivory and sand carry reading, and
   gold appears only as signal — active state, insight, one call to action.
   ========================================================================== */

:root {
  /* Brand */
  --ink:          #1E2421;   /* charcoal ink — the darkest surface */
  --deep:         #24342E;   /* deep green — structure */
  --green:        #3E564C;   /* muted green — support */
  --sage:         #6E877B;   /* support sage */
  --ivory:        #F7F4ED;   /* warm ivory — the reading surface */
  --sand:         #ECE6DA;   /* soft sand — quiet blocks */
  --mist:         #F4F6F3;   /* mist — the page ground */
  --gold:         #C8A85D;   /* muted gold — signal */
  --ochre:        #B9923F;   /* ochre — gold on light, for contrast */
  --alert:        #C65A4B;   /* only for true alerts */

  /* Surfaces */
  --page:         var(--mist);
  --panel:        #FFFFFF;
  --panel-alt:    var(--ivory);
  --sunk:         var(--sand);
  --inverse:      var(--deep);

  /* Lines. Deliberately few and deliberately faint: structure comes from
     spacing and type, not from a grid of visible borders. */
  --hairline:     rgba(30, 36, 33, 0.07);
  --line:         rgba(30, 36, 33, 0.10);
  --line-strong:  rgba(30, 36, 33, 0.18);
  --line-dark:    rgba(247, 244, 237, 0.12);

  /* Text */
  --text:         var(--ink);
  --text-soft:    #40514A;
  --text-muted:   #616E67;
  --text-invert:  #F2EFE6;
  --text-invert-muted: rgba(242, 239, 230, 0.58);

  /* Accent */
  --accent:       var(--gold);
  --accent-deep:  var(--ochre);
  /* Gold is a light surface, so anything written on it has to be nearly ink.
     --accent-text is the readable gold for text on a pale wash; --ochre stays
     for borders and hover fills, where contrast is not a legibility question. */
  --accent-ink:   #453609;
  --accent-text:  #7A5F1C;
  --accent-wash:  rgba(200, 168, 93, 0.13);
  --accent-line:  rgba(185, 146, 63, 0.38);

  /* Semantic, all desaturated to sit inside the palette rather than shout */
  --ok:           #47725F;
  --ok-wash:      rgba(71, 114, 95, 0.10);
  --warn:         #7E6224;
  --warn-wash:    rgba(156, 122, 52, 0.11);
  /* --alert is the brand red; --stop is its text-safe darkening, used wherever
     the colour carries words rather than a border. */
  --stop:         #A8412F;
  --stop-wash:    rgba(198, 90, 75, 0.09);
  --unknown:      #7C8A83;
  --unknown-wash: rgba(124, 138, 131, 0.10);

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.7188rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;

  --lh-tight: 1.14;
  --lh-snug:  1.36;
  --lh-body:  1.66;

  /* Space — a wider scale, because the fix for density is air */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 88px; --s10: 120px;

  --radius-sm: 5px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Shadows: barely there. Elevation is a hint, not a drop. */
  --shadow-sm: 0 1px 2px rgba(30, 36, 33, 0.04);
  --shadow:    0 1px 3px rgba(30, 36, 33, 0.05), 0 10px 24px -18px rgba(30, 36, 33, 0.30);
  --shadow-lg: 0 24px 60px -28px rgba(30, 36, 33, 0.32), 0 2px 8px rgba(30, 36, 33, 0.05);

  /* V1.4: the chrome earns its space rather than assuming it. The rail is a
     rail, not a panel; the bar is a bar, not a masthead. */
  --sidebar-w: 224px;
  --topbar-h: 52px;

  /* Two widths, because a paragraph and a capital stack want opposite things.
     Prose stays at a readable measure however wide the window gets; tools take
     the room they need. */
  --measure: 66ch;
  --w-editorial: 780px;
  --w-tool: 1240px;

  --t-fast: 150ms;
  --t:      190ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fit levels and status share one scale so the vocabulary reads consistently. */
[data-fit="likely"]                { --fit-ink: var(--ok);         --fit-wash: var(--ok-wash); }
[data-fit="potential"]             { --fit-ink: var(--accent-text); --fit-wash: var(--accent-wash); }
[data-fit="requires-verification"] { --fit-ink: var(--warn);       --fit-wash: var(--warn-wash); }
[data-fit="unlikely"]              { --fit-ink: var(--stop);       --fit-wash: var(--stop-wash); }
[data-fit="unknown"]               { --fit-ink: var(--unknown);    --fit-wash: var(--unknown-wash); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; }
}