/* ==========================================================================
   DESIGN TOKENS
   Shared verbatim between riacore.com and riacorefoundation.org - if you
   change this file, change it in both repos.

   Layered: raw palette values first, then semantic aliases that the
   stylesheet actually consumes. Rules should reference the semantic names
   (--surface, --text-strong) rather than the palette (--color-navy-700), so
   a rebrand touches only the palette block.
   ========================================================================= */

:root {

  /* --- palette ----------------------------------------------------------
     The only place a colour literal is allowed to live. Names describe the
     colour, not the job it does. */

  --color-navy-900:  #171a22;   /* deepest - recessed wells               */
  --color-navy-800:  #191c25;   /* page plate, matches the logo backdrop  */
  --color-navy-700:  #20242e;   /* lifted one step off the page           */
  --color-navy-600:  #333844;   /* hairline borders                       */
  --color-slate-500: #3d4551;   /* slate from the logo mark               */
  --color-slate-400: #6d7686;   /* dimmest legible text                   */
  --color-slate-300: #98a2b3;
  --color-teal-950:  #16303a;   /* dark ink for use *on* teal             */
  --color-teal-400:  #7fcdc8;   /* primary accent from the logo mark      */
  --color-teal-300:  #98d8d4;   /* teal, one step lighter, for hover      */
  --color-amber-400: #fdc566;   /* secondary accent from the logo mark    */
  --color-ink-100:   #eef1f5;
  --color-white:     #fff;


  /* --- semantic colour --------------------------------------------------
     Short names kept from the original stylesheet so existing rules read
     the same. */

  --bg:              var(--color-navy-800);
  --surface:         var(--color-navy-700);
  --sunken:          var(--color-navy-900);
  --line:            var(--color-navy-600);
  --line-2:          var(--color-slate-500);
  --ink:             var(--color-ink-100);
  --muted:           var(--color-slate-300);
  --teal:            var(--color-teal-400);
  --teal-lo:         var(--color-teal-300);
  --amber:           var(--color-amber-400);

  --text-strong:     var(--color-white);      /* headings, wordmark        */
  --text-placeholder: var(--color-slate-400);
  --text-on-accent:  var(--color-teal-950);   /* AAA against --teal        */


  /* --- typography -------------------------------------------------------
     @font-face lives in styles.css alongside the files it loads; these are
     only the stacks that reference it. */

  --font-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sizes are named by the role they play, not by a t-shirt scale - the
     ramp grew from the design and has deliberate near-neighbours (13 vs
     13.5) that a shared --text-sm would flatten. */
  --text-eyebrow:       11px;
  --text-hint:          12.5px;
  --text-label:         13px;
  --text-foot:          13.5px;
  --text-control:       15px;     /* inputs and buttons                    */
  --text-body-sm:       15.5px;
  --text-body:          16px;
  --text-lead:          21px;
  --text-h1:            30px;
  --text-wordmark:      28.7px;   /* inner-page lockup                     */
  --text-wordmark-home: 40.5px;

  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-heading:  650;         /* Mona Sans is variable 400-700         */
  --weight-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.45;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;

  --tracking-wide:    .22em;      /* echoes the wordmark's tracking        */
  --tracking-tight:   -.01em;
  --tracking-tighter: -.02em;


  /* --- radii ------------------------------------------------------------ */

  --radius-sm:   8px;             /* controls: buttons, inputs             */
  --radius-md:   12px;            /* cards                                 */
  --radius-full: 50%;


  /* --- motion -----------------------------------------------------------
     Honoured only when the user has not asked for reduced motion; see the
     prefers-reduced-motion block in styles.css. */

  --duration-fast: .15s;
  --ease-out:      ease;


  /* --- focus ------------------------------------------------------------
     color-mix keeps the ring tied to --teal, so retinting the accent
     retints the ring. Resolves to rgba(127, 205, 200, .22). */

  --focus-outline: 2px solid var(--teal);
  --focus-offset:  3px;
  --focus-ring:    0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);


  /* --- layout ----------------------------------------------------------- */

  --width-page: 680px;            /* inner pages (contact-us, thank-you)   */
  --width-home: 620px;            /* home page logo container              */
}


/* ==========================================================================
   RESPONSIVE RAMP
   The type ramp compresses on small screens by reassigning tokens, so the
   sizes stay in one place. styles.css carries the matching layout-only
   @media block.
   ========================================================================= */

@media (max-width: 560px) {
  :root {
    --text-body-sm:       15px;
    --text-lead:          19px;
    --text-h1:            25px;
    --text-wordmark-home: 32px;
  }
}