/* First Nations Employment design tokens: the ONLY place the site's colours, type and radii are set.
   Tailwind maps its fn-* utilities to these properties (src/tailwind.css, @theme inline).

   Source: FIRST NATION EMPLOYMENT Brand + Digital Design System v1.0.
     Foundation Ink #11191D · Opportunity Copper #B85B2C · Land Forest #34453F · Warm Sand #D8C4AA
     Soft Cream #F7F3ED · Mist #E9E5DE · Inter (Regular / Medium / Bold / ExtraBold) · UI radius 10–16px (superseded: square, see radii below)
   Ratio to aim for: 60% Cream/White · 25% Ink · 10% Forest/Sand · 5% Copper. Copper is for actions, active states
   and meaningful emphasis only.

   Client UI preferences (2026-09-30), applied on top of the PDF: Soft Cream (light beige) behind the whole site,
   text in Land Forest green, primary actions as an Opportunity Copper → Land Forest gradient, logo centred.

   Roles:
     canvas / surface / raised   Soft Cream page ground, Mist bands and cards, white lifted panels
     ink / ink-2                 Land Forest text (9.2:1 on cream); ink-2 a lighter green for secondary text (5.8:1)
     line / line-strong          dividers and control borders (Mist family, Sand for emphasis)
     deep / deep-2 / on-deep     the dark structural field (Land Forest) and the cream text on it
     grad-*                      the Copper → Forest gradient on primary buttons (fn-home.css); lighter green end on Forest
     accent / on-accent          Opportunity Copper primary actions (white on copper 4.6:1)
     accent-text                 copper as text/links on light grounds (darker copper for AA contrast)
     forest / on-forest          Land Forest supporting colour: secondary panels, supporting UI
     sand                        Warm Sand highlights
     signal / signal-soft        the employer-provided "Indigenous-inclusive employer" indicator (Forest on a Forest tint)
     photo                       the frame shown until a photograph is in place */
:root {
  --fn-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fn-canvas: #F7F3ED;
  --fn-surface: #E9E5DE;
  --fn-raised: #FFFFFF;
  --fn-ink: #34453F;
  --fn-ink-2: #52625B;
  --fn-line: #DDD6CB;
  --fn-line-strong: #BCB2A3;

  --fn-deep: #34453F;
  --fn-deep-2: #3F524B;
  --fn-on-deep: #F7F3ED;
  --fn-on-deep-2: #CFD6D1;
  --fn-line-deep: #52665E;
  --fn-foundation: #11191D;

  --fn-accent: #B85B2C;
  --fn-accent-hover: #9E4B22;
  --fn-on-accent: #FFFFFF;
  --fn-accent-text: #9A4A22;
  --fn-grad-start: #B85B2C;
  --fn-grad-end: #34453F;

  --fn-forest: #34453F;
  --fn-forest-hover: #2A3833;
  --fn-on-forest: #F7F3ED;
  --fn-on-forest-2: #C3CBC6;
  --fn-sand: #D8C4AA;

  --fn-signal: #34453F;
  --fn-signal-soft: #DDE5DF;

  --fn-photo: #E4DED4;

  /* Square by design (2026-10 "horizon" language): structure is rules and rectangles; the only round shape is the
     copper sun, which marks where you are or the next step. */
  --fn-radius-sm: 0px;
  --fn-radius: 0px;
  --fn-radius-lg: 0px;

  /* Motion: smooth, directional and calm (brand: 200–400ms). Tailwind's transition utilities read this default. */
  --default-transition-duration: 250ms;
  --default-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}