/* ==========================================================================
   FUROC brand tokens  ·  v2.4
   Import this file, then use the variables. Fonts load from Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Serif:wght@600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* Every colour is a fixed hex value: no color-mix(), transparency or other
     computed colours. scripts/contrast.py checks this file against tokens.json. */

  /* Core */
  --furoc-royal:      #5A285C;  /* Royal Purple: logo, headings, primary buttons, cover pages */
  --furoc-deep:       #2B162D;  /* Deep Purple: body text, footers, dark backgrounds */
  --furoc-mist:       #F3F1F5;  /* Mist: page and document background */

  /* Accents */
  --furoc-verdigris:  #7CC2B0;  /* Verdigris: rules, borders, fills on light (decorative only); links on dark */
  --furoc-patina:     #2B6A5D;  /* Patina: small text, links, icons on light backgrounds */
  --furoc-gold:       #D1A515;  /* Crown Gold: accent on dark and purple; the separator; warning fill and warning text on dark */

  /* Feedback */
  --furoc-success:    #457520;  /* Leaf: success on light */
  --furoc-error:      #B23A2A;  /* Garnet: error on light */

  /* Added in v2.2, for dark mode and for warning and info */
  --furoc-amethyst:   #BE92D0;  /* Amethyst: primary action fill on dark, with Deep text */
  --furoc-carnelian:  #EF8775;  /* Carnelian: error text and danger fill on dark, with Deep text */
  --furoc-fern:       #82B570;  /* Fern: success text on dark */
  --furoc-bronze:     #845E04;  /* Bronze: warning text on light */
  --furoc-woad:       #495289;  /* Woad: info text on light */
  --furoc-bluebell:   #9DA8DF;  /* Bluebell: info text on dark; info fill in both modes, with Deep text */

  /* Heather: neutral scale from Mist to Deep, tinted towards the brand purple */
  --furoc-heather-50:  #F3F1F5;  /* Mist. Light page surface */
  --furoc-heather-100: #E5E2E7;  /* Subtle fills and hover backgrounds on light */
  --furoc-heather-200: #D5D0D7;  /* Decorative dividers and card borders on light */
  --furoc-heather-300: #C1BAC3;  /* Disabled fills, stronger decorative rules on light */
  --furoc-heather-400: #ADA4AF;  /* Muted text on dark */
  --furoc-heather-500: #8F8491;  /* Input borders, both modes */
  --furoc-heather-600: #716373;  /* Muted text on light */
  --furoc-heather-700: #5D4D5F;  /* Decorative dividers on dark */
  --furoc-heather-800: #433045;  /* Raised surface on dark: dialogs, menus */
  --furoc-heather-900: #2B162D;  /* Deep Purple. Dark page surface */

  --furoc-white:      #FFFFFF;

  /* Older names, kept so existing code keeps working. Now fixed values:
     the old color-mix() results, baked on Mist. */
  --furoc-muted:      #716373;  /* = heather-600 */
  --furoc-border:     #D5D0D7;  /* = heather-200, decorative only (1.35:1). Use --furoc-*-border-input for inputs */

  /* Colour by purpose, for Burh. Each purpose has a light and a dark value.
     The focus ring is not set here: it is being decided in Burh.
     Hover adds no colour: links thicken their underline, and buttons add a
     filigree underline in their own text colour. */

  /* Light mode */
  --furoc-light-text:                #2B162D;  /* Deep */
  --furoc-light-text-muted:          #716373;  /* Heather 600 */
  --furoc-light-text-error:          #B23A2A;  /* Garnet. Always with ✕ */
  --furoc-light-text-success:        #457520;  /* Leaf. Always with ✓ */
  --furoc-light-text-warning:        #845E04;  /* Bronze. Always with an icon */
  --furoc-light-text-info:           #495289;  /* Woad. Always with an icon */
  --furoc-light-link:                #2B6A5D;  /* Patina */
  --furoc-light-link-visited:        #5A285C;  /* Royal */
  --furoc-light-surface-page:        #F3F1F5;  /* Mist */
  --furoc-light-surface-raised:      #FFFFFF;  /* White */
  --furoc-light-border-divider:      #D5D0D7;  /* Heather 200, decorative */
  --furoc-light-border-input:        #8F8491;  /* Heather 500 */
  --furoc-light-action-primary:      #5A285C;  /* Royal */
  --furoc-light-action-primary-text: #FFFFFF;  /* White */
  --furoc-light-action-danger:       #B23A2A;  /* Garnet */
  --furoc-light-action-danger-text:  #FFFFFF;  /* White */
  --furoc-light-fill-warning:        #D1A515;  /* Crown Gold */
  --furoc-light-fill-warning-text:   #2B162D;  /* Deep */
  --furoc-light-fill-info:           #9DA8DF;  /* Bluebell */
  --furoc-light-fill-info-text:      #2B162D;  /* Deep */

  /* Dark mode */
  --furoc-dark-text:                 #F3F1F5;  /* Mist */
  --furoc-dark-text-muted:           #ADA4AF;  /* Heather 400 */
  --furoc-dark-text-error:           #EF8775;  /* Carnelian. Always with ✕ */
  --furoc-dark-text-success:         #82B570;  /* Fern. Always with ✓ */
  --furoc-dark-text-warning:         #D1A515;  /* Crown Gold. Always with an icon */
  --furoc-dark-text-info:            #9DA8DF;  /* Bluebell. Always with an icon */
  --furoc-dark-link:                 #7CC2B0;  /* Verdigris */
  --furoc-dark-link-visited:         #BE92D0;  /* Amethyst */
  --furoc-dark-surface-page:         #2B162D;  /* Deep */
  --furoc-dark-surface-raised:       #433045;  /* Heather 800 */
  --furoc-dark-border-divider:       #5D4D5F;  /* Heather 700, decorative */
  --furoc-dark-border-input:         #8F8491;  /* Heather 500 */
  --furoc-dark-action-primary:       #BE92D0;  /* Amethyst */
  --furoc-dark-action-primary-text:  #2B162D;  /* Deep */
  --furoc-dark-action-danger:        #EF8775;  /* Carnelian */
  --furoc-dark-action-danger-text:   #2B162D;  /* Deep */
  --furoc-dark-fill-warning:         #D1A515;  /* Crown Gold */
  --furoc-dark-fill-warning-text:    #2B162D;  /* Deep */
  --furoc-dark-fill-info:            #9DA8DF;  /* Bluebell */
  --furoc-dark-fill-info-text:       #2B162D;  /* Deep */

  /* Typography */
  --furoc-font-heading: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --furoc-font-body:    "IBM Plex Sans", Arial, "Helvetica Neue", sans-serif;
  --furoc-weight-heading: 600;
  --furoc-weight-body:    400;
  --furoc-weight-strong:  600;

  /* Separator: twisted-cable band, after late Saxon filigree wire */
  --furoc-separator-height: 4px;
  --furoc-separator-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath fill='%23D1A515' d='M1.8 0 L0 0 L0 2.3 Z M3.13 0 L0 4 L2.17 4 L5.3 0 Z M3.5 4 L5.67 4 L7 2.3 L7 0 L6.63 0 Z'/%3E%3C/svg%3E");
  --furoc-separator-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath fill='%232B162D' d='M1.8 0 L0 0 L0 2.3 Z M3.13 0 L0 4 L2.17 4 L5.3 0 Z M3.5 4 L5.67 4 L7 2.3 L7 0 L6.63 0 Z'/%3E%3C/svg%3E");
}

/* Separator: add to the section ABOVE the break. The band sits on that section's
   bottom edge with a transparent background, so the section colour shows through. */
.furoc-separator { position: relative; }
.furoc-separator::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--furoc-separator-height);
  background: var(--furoc-separator-gold) repeat-x left bottom / 7px var(--furoc-separator-height);
  pointer-events: none;
}
.furoc-separator--deep::after { background-image: var(--furoc-separator-deep); }