/* ============================================================================
   tokens.css  —  design system tokens
   ----------------------------------------------------------------------------
   Edit these variables to rebrand or re-theme. Nothing else should hard-code
   colours, font sizes, or spacing values. Dark-mode sibling values live in
   the @media (prefers-color-scheme: dark) block at the bottom.
============================================================================ */

:root {
  color-scheme: light dark;

  /* ---- Colour: brand ------------------------------------------------------
     Official Prospero brand manual (06 April 2021, resources/Prospero Brand Manual.pdf).
     Main brand:             #E42C2F  (red)
     Background main:        #000000
     Background light:       #EEEEEE
     Secondary blue:         #4C5BB8  — used for notifications / disruptors only
     Secondary green:        #64DE95  — used for notifications / disruptors only
     Secondary light blue:   #8BE4FF  — used for notifications / disruptors only
     Brand manual: "Secondary colours can be used in many ways, but they are
     allowed never to be at the centre of the design." */
  --color-accent:          #E42C2F;           /* Prospero main brand red */
  --color-accent-hover:    #c0262a;           /* darker for :hover       */
  --color-accent-soft:     #fbe5e6;           /* red-tinted surface      */
  --color-accent-ink:      #ffffff;           /* text on accent bg       */

  --color-ink:             #000000;           /* primary ink + dark bg (brand: Background Main) */
  --color-ink-muted:       #3c3c3c;           /* secondary text                                 */
  --color-ink-quiet:       #6b6b6b;           /* tertiary text, meta                            */

  --color-paper:           #ffffff;           /* page background                              */
  --color-paper-soft:      #eeeeee;           /* alt sections, cards (brand: Background Light) */
  --color-paper-quiet:     #e4e4e4;           /* borders, dividers, rules                     */

  --color-border:          #e5e7eb;
  --color-border-strong:   #d1d5db;

  /* Semantic aliases — prefer these over raw brand vars */
  --color-bg:              var(--color-paper);
  --color-bg-alt:          var(--color-paper-soft);
  --color-fg:              var(--color-ink);
  --color-fg-muted:        var(--color-ink-muted);
  --color-fg-quiet:        var(--color-ink-quiet);
  --color-link:            var(--color-accent);
  --color-link-hover:      var(--color-accent-hover);

  /* Status */
  --color-success: #157f3c;
  --color-warning: #b46a00;
  --color-danger:  #b42318;

  /* ---- Typography ---------------------------------------------------------
     Messina Sans — Prospero brand typeface (commercial license, self-hosted).
     System sans fallback for the fraction of a second before it loads. */
  --font-sans: "Messina Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
                monospace;

  /* Fluid type scale — viewport 360px → 1280px.
     Base: 16px → 17px. Step ratio ~1.2 (minor third), snapping to
     sensible integers. */
  --step--1: clamp(0.813rem, 0.78rem + 0.12vw, 0.875rem);   /*  13 → 14  */
  --step-0:  clamp(1rem,     0.96rem + 0.15vw, 1.0625rem);  /*  16 → 17  */
  --step-1:  clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);    /*  18 → 20  */
  --step-2:  clamp(1.25rem,  1.17rem + 0.36vw, 1.5rem);     /*  20 → 24  */
  --step-3:  clamp(1.5rem,   1.36rem + 0.59vw, 1.875rem);   /*  24 → 30  */
  --step-4:  clamp(1.875rem, 1.64rem + 1.02vw, 2.5rem);     /*  30 → 40  */
  --step-5:  clamp(2.25rem,  1.88rem + 1.63vw, 3.25rem);    /*  36 → 52  */
  --step-6:  clamp(2.75rem,  2.16rem + 2.61vw, 4.375rem);   /*  44 → 70  */

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.55;
  --line-height-loose:  1.75;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  /* ---- Spacing scale ------------------------------------------------------
     8-point grid. Use for padding, margin, gap. */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* Section padding (vertical) — matches current site's 80-120px rhythm. */
  --section-py:         clamp(3rem, 5vw + 1rem, 6rem);
  --section-py-large:   clamp(4rem, 7vw + 1rem, 8rem);

  /* ---- Layout -------------------------------------------------------------
     Max content width matches the current site's 1500px; inner measure
     width for long-form reading capped at 65ch. */
  --container-max:    78.125rem;   /* 1250px — tighter than Squarespace default */
  --container-wide:   93.75rem;    /* 1500px — hero + full-bleed-ish sections  */
  --container-measure: 65ch;       /* long-form reading width                  */
  --gutter:           clamp(1rem, 3vw, 2rem);

  /* ---- Radii --------------------------------------------------------------
     Keep the existing rhythm: 12px cards, pill CTAs. */
  --radius-1:  0.25rem;   /*  4px  */
  --radius-2:  0.5rem;    /*  8px  */
  --radius-3:  0.75rem;   /* 12px  — card default */
  --radius-4:  1rem;      /* 16px  */
  --radius-pill: 999px;   /* CTAs, tags */

  /* ---- Shadows ------------------------------------------------------------
     Restrained — compliance brand reads as serious. */
  --shadow-1: 0 1px 2px rgba(10, 14, 26, 0.05);
  --shadow-2: 0 2px 6px rgba(10, 14, 26, 0.06), 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-3: 0 8px 24px rgba(10, 14, 26, 0.08), 0 2px 6px rgba(10, 14, 26, 0.05);
  --shadow-focus: 0 0 0 3px rgba(228, 44, 47, 0.35);

  /* ---- Secondary palette — DO NOT use as primary design elements -------
     Per brand manual, reserved for notifications, disruptors, in-graphic
     accents only. Available if a page needs to communicate status. */
  --color-brand-blue:       #4C5BB8;
  --color-brand-green:      #64DE95;
  --color-brand-blue-light: #8BE4FF;

  /* ---- Motion -------------------------------------------------------------
     Keep animations subtle and fast. prefers-reduced-motion disables them
     in base.css. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-med:  220ms;
  --duration-slow: 400ms;

  /* ---- Header height (used by sticky nav + scroll padding) --------------- */
  --header-height: 4rem;
  --header-height-lg: 4.5rem;

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode is DISABLED for V1 to match the current live site, but
       tokens are defined so flipping to dark is a one-line change later.
       Uncomment the overrides and remove color-scheme: light below to enable. */
    color-scheme: light;
  }
}