/*
  CUSTOM PROPERTIES
  - app custom properties
  - subset of static site custom properties (cf. custom_properties.css)
  TODO: consolidate
*/

:root {

  /* PALETTE */

  /* Babble core palette */

  --babble-blue:             #006ab4; /* new code, formerly #29A9FF */
  --babble-green:            #38d430; /* new code, formerly #89D100 */
  --babble-violet:           #2e1d67; /* new code and colour */
  --babble-red:              #FF5733;
  --babble-blue-light:       #0099D1; /* apps only, new code and name, for redesign, formerly babble-blue-dark, #0089D1 */
  --babble-blue-light-v:     #00D1B1; /* apps only, new name, for redesign, formerly babble-blue-light */
  --babble-blue-dark:        #0059A3; /* cf. b2_structure.css (controls - stuff) per current checkbox style, consider approach for REDESIGN */
  --babble-blue-background:  #d1eaff; /* background color for shortcuts search bar */
  --babble-bluegreen:        #29BB60; /* apps only, new code, for redesign, formerly #00D148 */
  --babble-orange:           #FFBD33; /* apps only */
  
  /* app extended palette */
  
  --app-blue:                #34AAFC; /* apps only, almost identical to old babble-blue - SWITCH? */
  --app-blue-light-v:        #f0ffff; /* apps only */
  --app-blue-light:          #73BFFC; /* apps only, paler than babble-blue-light-v */
  --app-blue-dark:           #337AB7; /* apps only, slightly darker and duller than babble-blue-light - MERGE? */
  --app-green:               #8AD200; /* apps only, almost identical to old babble-green - SWITCH? */
  --app-green-light:         #ACE069; /* apps only, paler than babble-green-light */
  --app-green-dark:          #50B000; /* apps only, approx. as old babble-blue is to current babble-blue-light */
  --app-orange-dark-desktop: #FF5900; /* apps only */
  --app-orange-dark-vibes:   #FF7A11; /* apps only, closer to app-orange-dark-desktop than to babble-orange */
  --app-red-dark:            #b22222; /* apps only */
  
  /* - tints */
  
  --babble-blue-50pc:   rgba( 0 106 180 / 50% );
  --babble-blue-30pc:   rgba( 0 106 180 / 30% );
  --babble-blue-03pc:   rgba( 0 106 180 /  3% );
  --babble-violet-10pc: rgba( 46 29 103 / 10% );
  --babble-violet-30pc: rgba( 46 29 103 / 30% );
  --babble-violet-95pc: rgba( 46 29 103 / 95% );
  --babble-green-50pc:  rgba( 56 212 48 / 50% );
  --babble-green-50pc-opaque:           #72da4c; /* opaque 50pc tint, selected console table row color */
  --babble-violet-tint:                 #eae8f0; /* opaque 10% tint, panel background color, table row hover colour */
  --babble-violet-btn:                  #7A6CA8; /* violet button background colour */

  /* Bootstrap alert colors */
  --babble-bg-tint-warning: #ffe5cb;
  --babble-bg-tint-success: #bbf0b8;
  --babble-bg-tint-danger:  #f9d2d6;
  --babble-bg-tint-info:    #d1eaff;
    
  /* - grey spectrum */

  --www-white:           #fff;
  --app-white:           #fff;    /* apps only */
  --app-white-near:      #e5e5e5; /* apps only */
  --www-grey-light-v:    #eee;
  --app-grey-d-light-v:  #d3d3d3; /* apps only */
  --www-grey-light:      #ccc;
  --app-grey-9-mid:      #9d9d9d; /* apps only */
  --app-grey-8:          #808080; /* apps only */
  --www-grey-mid:        #777;
  --app-grey-7-mid:      #7a7171; /* apps only */
  --app-grey-5-dark:     #555;    /* apps only */
  --app-grey-4-dark-v:   #444;    /* apps only */
  --www-grey-dark:       #333;
  --app-grey-2-dark-vv:  #212529; /* apps only */
  --app-black-near:      #080808; /* apps only */
  --www-black:           #000;

  /* - transparents */

  --app-white-transparent-high-v: rgba( 255 255 255 / 10% ); /* apps only */
  --app-grey-transparent-high-v:  rgba( 34 36 38 / 10% );    /* apps only */
  --www-black-05pc:               rgba( 0 0 0 /  5% );
  --www-black-20pc:               rgba( 0 0 0 / 20% );
  --app-black-transparent-high:   rgba( 0 0 0 / 40% );       /* apps only */
  --www-black-50pc:               rgba( 0 0 0 / 50% );
  --app-black-transparent:        rgba( 0 0 0 / 68% );       /* apps only */
  --www-black-80pc:               rgba( 0 0 0 / 80% );
  --app-black-transparent-low:    rgba( 0 0 0 / 87% );       /* apps only */

  /* LAYOUT */

  /* text - sizing */

  --text-size-sm-sm: 0.8rem;  /* e.g. small */
  --text-size-sm-md: 0.85rem; /* unused */
  --text-size-sm-lg: 0.9rem;  /* e.g. label smaller, input smaller, footer h2, footer a */
  --text-size-sm-xl: 0.95rem; /* e.g. label larger, input larger */
  --text-size-md-sm: 1.05rem; /* e.g. btn-pill-medium, card li, card a, block p smaller  */
  --text-size-md-md: 1.1rem;  /* e.g. container-set-links h2 */
  --text-size-md-lg: 1.2rem;  /* e.g. modal form h3, block p larger, footer icons */
  --text-size-md-xl: 1.25rem; /* e.g. block-hero p, footer strapline */
  --text-size-lg-sm: 1.4rem;  /* e.g. card h3 */
  --text-size-lg-md: 1.6rem;  /* e.g. block-splash h2 */
  --text-size-lg-lg: 1.8rem;  /* unused */
  --text-size-lg-xl: 2rem;    /* e.g. modal form h2, block h2 */
  --text-size-xl-sm: 2.25rem; /* e.g. block-story h4 */
  --text-size-xl-md: 2.75rem; /* e.g. block-story h3 */
  --text-size-xl-lg: 3.5rem;  /* e.g. block-hero h2 */

  /* blocks - spacing and sizing */

  /* transitions */

  --transition-fast: 50ms ease-in-out;
  --transition-slow: 100ms ease-in-out;
  --transition-slower: 300ms ease-in-out;

  /*
    Custom properties not yet included for:
    - rule colours as listed at base of b2_structure.css
    - colour use in HTML and JS files
  */
}