/* ─── Local fonts — Recoleta (display) + DM Mono ────────────────── */

@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Regular.woff2') format('woff2'),
       url('/fonts/Recoleta-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fonts/DMMono-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   RSM Concept Wall — Design Tokens
   Modern WordPress-inspired: cool neutrals + signature blue

   Adopted into intent-capture 2026-05-13 from Jason's RSM Interface
   Design handoff at design-system/rsm-interface-design/project/tokens.css.

   Local deviations from the canonical bundle:
   - The Content section's hue maps to --hue-functionality (Branch 1'
     renamed Content → Functionality). Token values unchanged.
   - The original --hue-content / --hue-content-2 names remain as
     aliases for backwards-compat during the migration; remove once
     no rule references them.
   ============================================================ */

:root {
  /* Color — paper & ink (WP.org Design Library) */
  --paper: #f6f6f6;        /* light grey 2 */
  --paper-2: #d9d9d9;      /* light grey */
  --card: #ffffff;
  --card-edge: #e6e6e6;
  --card-edge-strong: #d9d9d9;

  /* Ink — Charcoal scale */
  --ink-0: #1a1919;        /* charcoal 0 */
  --ink-1: #1e1e1e;        /* charcoal */
  --ink-2: #40464d;        /* charcoal 3 */
  --ink-3: #656a71;        /* charcoal 4 */
  --ink-4: #979aa1;        /* charcoal 5 */

  /* Accent — Blueberry scale */
  --wp-blue: #3858e9;       /* Blueberry */
  --wp-blue-deep: #213fd4;  /* Deep Blueberry */
  --wp-blue-darker: #1d35b4;/* Dark Blueberry */
  --wp-blue-2: #9fb1ff;     /* Blueberry 2 */
  --wp-blue-3: #c7d1ff;     /* Blueberry 3 */
  --wp-blue-soft: #eff2ff;  /* Blueberry 4 */
  --wp-blue-ink: #1d35b4;

  /* Section hues — vibrant pairs (saturated + light hover) */
  --hue-purpose:    #E26F56; /* Pomegranate */
  --hue-purpose-2:  #FFB7A7; /* Pomegranate 2 (hover) */
  --hue-subject:    #33F078; /* Acid Green */
  --hue-subject-2:  #C7FFDB; /* Acid Green 2 */
  --hue-audience:   #7A00DF; /* Purple */
  --hue-audience-2: #D7A7FF; /* Light Purple */
  --hue-visual:     #FFF972; /* Lemon */
  --hue-visual-2:   #FFFCB5; /* Lemon 2 */
  --hue-gaps:       #E26F56; /* (re-use Pomegranate) */
  --hue-gaps-2:     #FFB7A7;
  --hue-research:   #3858E9; /* Blueberry as research */
  --hue-research-2: #9FB1FF;

  /* Additional section hues */
  --hue-narrative:    #C98A2B; /* Amber */
  --hue-narrative-2:  #F4D69A;
  --hue-functionality:   #2BB39B; /* Teal — was --hue-content in Jason's bundle */
  --hue-functionality-2: #B7EDE3;
  --hue-content:      #2BB39B; /* legacy alias for --hue-functionality; remove once unused */
  --hue-content-2:    #B7EDE3;
  --hue-constraints:  #5C6470; /* Slate */
  --hue-constraints-2:#C8CDD5;
  --hue-output:       #1A1919; /* Ink */
  --hue-output-2:     #D9D9D9;

  /* State accents */
  --pill-active:      #FFC83D; /* gold pill outline */
  --pill-active-soft: rgba(255,200,61,0.20);
  --drafting:         #3858E9; /* blueberry pulse */
  --drafting-soft:    rgba(56,88,233,0.16);

  /* Link color — neutral, not section-coded */
  --link-stroke: #5C6470;

  /* Region — neutral fill + edge (no section color-coding) */
  --region-fill: #E8E8E8;   /* slightly darker than --paper */
  --region-edge: #D9D9D9;   /* matches --card-edge-strong */
  --region-label: #40464d;  /* ink-2 */

  /* Type — current WordPress brand stack (Recoleta / Inter / DM Mono).
     Local @font-face declarations for Recoleta + DM Mono are at the top
     of this file. Inter is loaded from Google Fonts in index.html and
     workspace.html. Recoleta ships with no italic variant — use Recoleta
     Regular for display, not `font-style: italic`, to avoid synthesized
     italic glyphs. */
  --font-display: "Recoleta", "Source Serif Pro", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Radii */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;

  /* Shadows — paper, layered */
  --shadow-rest: 0 1px 2px rgba(28,32,36,0.04), 0 2px 6px rgba(28,32,36,0.06);
  --shadow-pin:  0 2px 4px rgba(28,32,36,0.08), 0 8px 18px rgba(28,32,36,0.10);
  --shadow-lift: 0 6px 12px rgba(28,32,36,0.10), 0 20px 36px rgba(28,32,36,0.14);

  /* Focus rings */
  --focus-ring:        #3858E9;                /* Blueberry — same as drafting */
  --focus-ring-soft:   rgba(56,88,233,0.20);   /* Outer halo */
  --focus-offset:      2px;                    /* Standard ring distance from edge */
  --focus-width:       2px;                    /* Standard ring stroke */

  /* Motion — durations */
  --dur-instant:  80ms;   /* pill tap, checkbox flip */
  --dur-fast:    140ms;   /* hover, focus rings on */
  --dur-base:    200ms;   /* card hover/shadow lift, color crossfade */
  --dur-med:     320ms;   /* card focus, panel open, layout reflow */
  --dur-slow:    560ms;   /* modal/lightbox, scene transition */
  --dur-ambient: 1800ms;  /* shimmer, breathe, sweep */

  /* Motion — easings */
  --ease-standard: cubic-bezier(.2,.7,.2,1);   /* default — confident, no overshoot */
  --ease-emphasis: cubic-bezier(.16,1,.3,1);   /* expo-out — modals, focus expand */
  --ease-entrance: cubic-bezier(0,0,.2,1);     /* in — content arriving */
  --ease-exit:     cubic-bezier(.4,0,1,1);     /* out — content leaving */
  --ease-linear:   linear;                     /* ambient loops (shimmer, sweep) */

  /* Iconography */
  --icon-stroke:     1.5px;        /* Default stroke for 24px icons */
  --icon-stroke-sm:  1.25px;       /* 16px icons */
  --icon-color:      currentColor; /* Inherit from text */
  --icon-cap:        round;
  --icon-join:       round;
  --icon-grid:       24;           /* Design grid — 24×24 with 2px safe area */
}