/* ==========================================================================
   Skipton Building Society — Email Design System Tokens

   All tokens scoped to .skipton-system to prevent conflicts with personal
   brand tokens in tokens.css.

   Convention: Hyphens denote segment boundaries. CamelCase joins multi-word
   descriptors within a segment. American English spelling throughout.
   ========================================================================== */


.skipton-system {


/* ==========================================================================
   Primitive Colours
   ========================================================================== */

  /* Marine */
  --color-marine-300: #1971B1;
  --color-marine-500: #0062A8;
  --color-marine-700: #004E86;

  /* Cyan */
  --color-cyan-500: #069de5;
  --color-cyan-700: #058ECF;

  /* Arctic */
  --color-arctic-300: #D0F6FF;
  --color-arctic-400: #90E9FF;
  --color-arctic-500: #8AE8FF;

  /* Pale Rider */
  --color-paleRider-300: #EFF5FA;
  --color-paleRider-500: #E5EFF6;
  --color-paleRider-700: #CFE2EF;

  /* Midnight */
  --color-midnight-300: #2C2D38;
  --color-midnight-500: #1E1F29;

  /* Meridian */
  --color-meridian-500: #002770;

  /* Stone */
  --color-stone-100: #FAF6F3;

  /* White */
  --color-white-100: #FFFFFE;
  --color-white-200: #FAFAFA;

  /* Fjord */
  --color-fjord-100: #001D2E;
  --color-fjord-200: #112C3C;
  --color-fjord-300: #213A49;
  --color-fjord-400: #324957;
  --color-fjord-500: #425864;
  --color-fjord-600: #536672;
  --color-fjord-700: #637580;


/* ==========================================================================
   Semantic — Email Structure
   ========================================================================== */

  --color-email-body-onLight:    var(--color-white-100);
  --color-email-body-onDark:     var(--color-fjord-100);
  --color-email-wrapper-onLight: var(--color-white-100);
  --color-email-wrapper-onDark:  var(--color-fjord-100);
  --color-email-footer-onLight:  var(--color-midnight-500);
  --color-email-footer-onDark:   var(--color-fjord-700);


/* ==========================================================================
   Semantic — Surfaces
   ========================================================================== */

  --color-surface-white-onLight:     var(--color-white-100);
  --color-surface-white-onDark:      var(--color-fjord-100);
  --color-surface-stone-onLight:     var(--color-stone-100);
  --color-surface-stone-onDark:      var(--color-fjord-200);
  --color-surface-paleRider-onLight: var(--color-paleRider-500);
  --color-surface-paleRider-onDark:  var(--color-fjord-300);
  --color-surface-arctic-onLight:    var(--color-arctic-500);
  --color-surface-arctic-onDark:     var(--color-fjord-400);
  --color-surface-cyan-onLight:      var(--color-cyan-500);
  --color-surface-cyan-onDark:       var(--color-fjord-500);
  --color-surface-marine-onLight:    var(--color-marine-500);
  --color-surface-marine-onDark:     var(--color-fjord-600);
  --color-surface-midnight-onLight:  var(--color-midnight-500);
  --color-surface-midnight-onDark:   var(--color-fjord-700);
  --color-surface-meridian-onLight:  var(--color-meridian-500);
  --color-surface-meridian-onDark:   var(--color-fjord-700);


/* ==========================================================================
   Semantic — Text
   ========================================================================== */

  --color-text-onLight-strong: var(--color-midnight-500);
  --color-text-onLight-subtle: var(--color-white-100);
  --color-text-onDark-strong:  var(--color-fjord-100);
  --color-text-onDark-subtle:  var(--color-white-200);


/* ==========================================================================
   Semantic — Accent
   ========================================================================== */

  --color-accent: var(--color-arctic-500);


/* ==========================================================================
   Semantic — Headlines
   ========================================================================== */

  --color-headline-onLight-1: var(--color-marine-500);
  --color-headline-onLight-2: var(--color-cyan-500);
  --color-headline-onLight-3: var(--color-arctic-500);
  --color-headline-onLight-4: var(--color-paleRider-500);
  --color-headline-onLight-5: var(--color-midnight-500);
  --color-headline-onLight-6: var(--color-white-100);
  --color-headline-onDark:    var(--color-arctic-400);


/* ==========================================================================
   Hero Gradient Tokens
   ========================================================================== */

  /* Gradient 1 — Marine */
  --color-email-hero-gradient-1-start:    var(--color-marine-300);
  --color-email-hero-gradient-1-mid:      var(--color-marine-500);
  --color-email-hero-gradient-1-end:      var(--color-marine-700);
  --color-email-hero-gradient-1-fallback: var(--color-marine-500);
  --color-email-hero-gradient-1-angle:    45deg;

  /* Gradient 2 — Cyan */
  --color-email-hero-gradient-2-start:    var(--color-cyan-500);
  --color-email-hero-gradient-2-mid:      var(--color-cyan-500);
  --color-email-hero-gradient-2-end:      var(--color-cyan-700);
  --color-email-hero-gradient-2-fallback: var(--color-cyan-500);
  --color-email-hero-gradient-2-angle:    45deg;

  /* Gradient 3 — Arctic */
  --color-email-hero-gradient-3-start:    var(--color-arctic-300);
  --color-email-hero-gradient-3-mid:      var(--color-arctic-500);
  --color-email-hero-gradient-3-end:      var(--color-arctic-500);
  --color-email-hero-gradient-3-fallback: var(--color-arctic-500);
  --color-email-hero-gradient-3-angle:    45deg;

  /* Gradient 4 — Pale Rider */
  --color-email-hero-gradient-4-start:    var(--color-paleRider-300);
  --color-email-hero-gradient-4-mid:      var(--color-paleRider-500);
  --color-email-hero-gradient-4-end:      var(--color-paleRider-700);
  --color-email-hero-gradient-4-fallback: var(--color-paleRider-500);
  --color-email-hero-gradient-4-angle:    45deg;

  /* Gradient 5 — Midnight */
  --color-email-hero-gradient-5-start:    var(--color-midnight-300);
  --color-email-hero-gradient-5-mid:      var(--color-midnight-300);
  --color-email-hero-gradient-5-end:      var(--color-midnight-500);
  --color-email-hero-gradient-5-fallback: var(--color-midnight-500);
  --color-email-hero-gradient-5-angle:    45deg;

  /* Gradient 6 — Meridian */
  --color-email-hero-gradient-6-start:    var(--color-meridian-500);
  --color-email-hero-gradient-6-mid:      var(--color-meridian-500);
  --color-email-hero-gradient-6-end:      var(--color-marine-700);
  --color-email-hero-gradient-6-fallback: var(--color-meridian-500);
  --color-email-hero-gradient-6-angle:    45deg;


/* ==========================================================================
   Component — Primary Button
   ========================================================================== */

  /* Background */
  --button-primary-color-background-default-onLight-default: var(--color-marine-500);
  --button-primary-color-background-default-onLight-hover:   var(--color-marine-700);
  --button-primary-color-background-default-onDark-default:  var(--color-arctic-400);
  --button-primary-color-background-default-onDark-hover:    var(--color-arctic-400);
  --button-primary-color-background-alt-onLight-default:     var(--color-white-100);
  --button-primary-color-background-alt-onLight-hover:       var(--color-white-100);
  --button-primary-color-background-alt-onDark-default:      var(--color-arctic-400);
  --button-primary-color-background-alt-onDark-hover:        var(--color-arctic-400);

  /* Border */
  --button-primary-color-border-default-onLight-default: var(--color-marine-500);
  --button-primary-color-border-default-onLight-hover:   var(--color-marine-700);
  --button-primary-color-border-default-onDark-default:  var(--color-arctic-400);
  --button-primary-color-border-default-onDark-hover:    var(--color-white-100);
  --button-primary-color-border-alt-onLight-default:     var(--color-white-100);
  --button-primary-color-border-alt-onLight-hover:       var(--color-paleRider-500);
  --button-primary-color-border-alt-onDark-default:      var(--color-arctic-400);
  --button-primary-color-border-alt-onDark-hover:        var(--color-white-200);

  /* Text */
  --button-primary-color-text-default-onLight-default: var(--color-text-onLight-subtle);
  --button-primary-color-text-default-onLight-hover:   var(--color-text-onLight-subtle);
  --button-primary-color-text-default-onDark-default:  var(--color-text-onDark-strong);
  --button-primary-color-text-default-onDark-hover:    var(--color-text-onDark-strong);
  --button-primary-color-text-alt-onLight-default:     var(--color-text-onLight-strong);
  --button-primary-color-text-alt-onLight-hover:       var(--color-text-onLight-strong);
  --button-primary-color-text-alt-onDark-default:      var(--color-text-onDark-strong);
  --button-primary-color-text-alt-onDark-hover:        var(--color-text-onDark-strong);

  /* Underline — hover only */
  --button-primary-color-underline-default-onLight-hover: var(--color-text-onLight-subtle);
  --button-primary-color-underline-alt-onLight-hover:     var(--color-text-onLight-strong);
  --button-primary-color-underline-default-onDark-hover:  var(--color-text-onDark-strong);
  --button-primary-color-underline-alt-onDark-hover:      var(--color-text-onDark-strong);


/* ==========================================================================
   Component — Secondary Button
   ========================================================================== */

  /* Border */
  --button-secondary-color-border-default-onLight-default: var(--color-marine-500);
  --button-secondary-color-border-default-onLight-hover:   var(--color-arctic-500);
  --button-secondary-color-border-default-onDark-default:  var(--color-arctic-400);
  --button-secondary-color-border-default-onDark-hover:    var(--color-white-200);
  --button-secondary-color-border-alt-onLight-default:     var(--color-white-100);
  --button-secondary-color-border-alt-onLight-hover:       var(--color-paleRider-500);
  --button-secondary-color-border-alt-onDark-default:      var(--color-arctic-400);
  --button-secondary-color-border-alt-onDark-hover:        var(--color-white-200);

  /* Text */
  --button-secondary-color-text-default-onLight-default: var(--color-text-onLight-strong);
  --button-secondary-color-text-default-onLight-hover:   var(--color-text-onLight-strong);
  --button-secondary-color-text-default-onDark-default:  var(--color-text-onDark-subtle);
  --button-secondary-color-text-default-onDark-hover:    var(--color-text-onDark-subtle);
  --button-secondary-color-text-alt-onLight-default:     var(--color-text-onLight-subtle);
  --button-secondary-color-text-alt-onLight-hover:       var(--color-text-onLight-subtle);
  --button-secondary-color-text-alt-onDark-default:      var(--color-text-onDark-subtle);
  --button-secondary-color-text-alt-onDark-hover:        var(--color-text-onDark-subtle);

  /* Underline — hover only */
  --button-secondary-color-underline-default-onLight-hover: var(--color-text-onLight-strong);
  --button-secondary-color-underline-alt-onLight-hover:     var(--color-text-onLight-subtle);
  --button-secondary-color-underline-default-onDark-hover:  var(--color-text-onDark-subtle);
  --button-secondary-color-underline-alt-onDark-hover:      var(--color-text-onDark-subtle);


/* ==========================================================================
   Component — Hyperlinks
   ========================================================================== */

  /* Underline */
  --hyperlink-color-underline-default-onLight-default: var(--color-marine-500);
  --hyperlink-color-underline-default-onLight-hover:   var(--color-marine-500);
  --hyperlink-color-underline-default-onDark-default:  var(--color-arctic-400);
  --hyperlink-color-underline-default-onDark-hover:    var(--color-arctic-400);
  --hyperlink-color-underline-alt-onLight-default:     var(--color-white-100);
  --hyperlink-color-underline-alt-onLight-hover:       var(--color-white-100);
  --hyperlink-color-underline-alt-onDark-default:      var(--color-arctic-400);
  --hyperlink-color-underline-alt-onDark-hover:        var(--color-arctic-400);

  /* Text */
  --hyperlink-color-text-default-onLight-default: var(--color-text-onLight-strong);
  --hyperlink-color-text-default-onLight-hover:   var(--color-text-onLight-strong);
  --hyperlink-color-text-default-onDark-default:  var(--color-text-onDark-subtle);
  --hyperlink-color-text-default-onDark-hover:    var(--color-text-onDark-subtle);
  --hyperlink-color-text-alt-onLight-default:     var(--color-text-onLight-subtle);
  --hyperlink-color-text-alt-onLight-hover:       var(--color-text-onLight-subtle);
  --hyperlink-color-text-alt-onDark-default:      var(--color-text-onDark-subtle);
  --hyperlink-color-text-alt-onDark-hover:        var(--color-text-onDark-subtle);


/* ==========================================================================
   Button and Hyperlink Scale
   ========================================================================== */

  --button-scale-padding-standard: var(--spacing-button-padding-standard);
  --button-scale-padding-large:    var(--spacing-button-padding-large);
  --button-scale-text-standard:    var(--typography-body-size-default);
  --button-scale-text-large:       var(--typography-body-size-default);
  --button-scale-border:           var(--spacing-button-border-width);
  --button-scale-borderRadius:     var(--radius-button);
  --hyperlink-scale-underline:        0.1em;
  --hyperlink-scale-underline-offset: 0.25em;
  --hyperlink-font-weight-default:    var(--typography-weight-black);
  --hyperlink-font-weight-alt:        var(--typography-weight-black);


/* ==========================================================================
   Typography Tokens
   ========================================================================== */

  --typography-family-display:    'Turret 1853', Georgia, serif;
  --typography-family-condensed:  'Roboto Condensed', 'Trebuchet MS', sans-serif;
  --typography-family-body:       'Roboto', Helvetica, Arial, sans-serif;

  --typography-weight-black:   bold;
  --typography-weight-regular: normal;

  --typography-h1-size-large:      40px;
  --typography-h1-size-medium:     36px;
  --typography-h1-size-small:      32px;
  --typography-h1-size-responsive: 33px;
  --typography-h1-lineHeight:      1.1em;

  --typography-h1Alt-size-large:  40px;
  --typography-h1Alt-size-medium: 36px;
  --typography-h1Alt-size-small:  32px;
  --typography-h1Alt-lineHeight:  1.1em;

  --typography-h2-size-medium: 28px;
  --typography-h2-size-small:  24px;
  --typography-h2-lineHeight:  1.15em;

  --typography-h3-size-large:  28px;
  --typography-h3-size-medium: 24px;
  --typography-h3-size-small:  20px;
  --typography-h3-lineHeight:  1.3em;

  --typography-h4-size-large:  24px;
  --typography-h4-size-medium: 20px;
  --typography-h4-size-small:  16px;
  --typography-h4-lineHeight:  1.4em;

  --typography-h5-size-large: 20px;
  --typography-h5-size-small: 16px;
  --typography-h5-lineHeight: 1.5em;

  --typography-body-size-default: 16px;
  --typography-body-size-leading: 20px;
  --typography-body-lineHeight:   1.5em;

  --typography-label-size: 14.4px;
  --typography-small-size: 14.4px;


/* ==========================================================================
   Spacing Tokens
   ========================================================================== */

  --spacing-025: 0.25em;
  --spacing-050: 0.5em;
  --spacing-075: 0.75em;
  --spacing-100: 1em;
  --spacing-125: 1.25em;
  --spacing-150: 1.5em;
  --spacing-200: 2em;
  --spacing-250: 2.5em;
  --spacing-300: 3em;
  --spacing-400: 4em;
  --spacing-500: 5em;
  --spacing-600: 6em;  /* Section break — top + bottom of each major .ds-section */

  --spacing-panel-padding-default:    var(--spacing-150);
  --spacing-panel-padding-nested:     var(--spacing-100);
  --spacing-panel-padding-hero:       var(--spacing-150);
  --spacing-panel-margin-horizontal:  var(--spacing-100);
  --spacing-panel-gap-vertical:       var(--spacing-200);
  --spacing-footer-padding-desktop:   var(--spacing-200);
  --spacing-footer-padding-mobile:    var(--spacing-200);

  --spacing-button-padding-standard: 0.3em 1.2em;
  --spacing-button-padding-large:    0.4em 0.9em;
  --spacing-button-border-width:     0.15em;


/* ==========================================================================
   Border Radius Tokens
   ========================================================================== */

  --radius-025: 0.15em;
  --radius-050: 0.5em;
  --radius-075: 0.75em;
  --radius-200: 2em;
  --radius-300: 3em;
  --radius-button: var(--radius-200);
  --radius-hero:   4em;

  --radius-image-single-desktop:    0 0 var(--radius-hero) var(--radius-050);
  --radius-image-single-mobile:     0 0 var(--radius-200) 0;
  --radius-image-2col-left:         var(--radius-050) 0 var(--radius-200) 0;
  --radius-image-2col-right:        0 var(--radius-050) 0 var(--radius-200);
  --radius-image-2col-left-full:    var(--radius-050) var(--radius-050) var(--radius-300) var(--radius-050);
  --radius-image-hero-2col-right:   var(--radius-050) var(--radius-050) var(--radius-300) var(--radius-050);
  --radius-image-panel-topleft:     var(--radius-050) 0 0 0;
  --radius-hero-wrapper:            0 0 var(--radius-hero) var(--radius-050);

}