// Tools
@import "oscailte/tools/functions.scss";
@import "oscailte/tools/mixins.scss";

$typography-config: (
  'small': (
    'base': (100%,    1.42),
    'h1':   (2em,     1.25),
    'h2':   (1.625em, 1.15384615),
    'h3':   (1.375em, 1.13636364),
    'h4':   (1.125em, 1.11),
    'h5':   (1.075em, 1.11),
    'h6':   (.925em,  1.11)
  ),
  'medium': (
    'base': (125%, 1.5),
  ),
  'large': (
    'base': (150%, 1.62),
  ),
);

$social-map: (
  'dribbble':  #EA4C89,
  'facebook':  #4172B8,
  'flickr':    #0063DC,
  'github':    #181717,
  'instagram': #E4405F,
  'keybase':   #33A0FF,
  'linkedin':  #0077B5,
  'mastodon':  #6364FF,
  'pinterest': #BD081C,
  'telegram':  #2CA5E0,
  'twitter':   #1DA1F2,
  'rss':       #FFA500,
);


@include generate-typography-properties($typography-config);

:root {
  --theme-background: #f5f6fa;
  --theme-color: #282828;

  /**
   * Root properties, typically colour declarations, but contains other things too.
   */
  --color-primary:          #00a6ed;
  --color-secondary:        #bf1ca9;
  --color-positive:         #5ad42f;
  --color-negative:         #d4372f;
  --site-container-width:   90%;
  --site-content-max-width: 81.25em;
  --site-owl-spacing:       1rem;
  --site-clip: polygon(
    calc(100% - var(--clip-notch)) 0,
    100% var(--clip-notch),
    100% 100%,
    var(--clip-notch) 100%,
    0 calc(100% - var(--clip-notch)),
    0 0
  );

  /**
  * Base typography settings.
  * Other typography settings will inherit/extend upon these.
  */
  --typography-body-family: "Merriweather", serif;
  --typography-heading-family: "Lato", serif;
  --typography-link-text-shadow-color: var(--theme-background);
  
  /**
  * General shared properties.
  */
  --box-shadow: 0 0 7px rgba(0, 0, 0, 0.05);
  --box-shadow_hover: 0 0 15px rgba(0, 0, 0, 0.15);
  
  /**
  * Component declarations
  */
  --hero-matrix-url: #{url("/assets/oscailte/img/hero_matrix.png")};

  --clip-notch: 10%;
}

// @media (prefers-color-scheme: dark) {
//   :root {
//     --theme-background: #282828;
//     --theme-color: #e5e5e5;
//     --header-background: var(--theme-background);
//     --header-link-color: var(--theme-color);
//     --post-preview-background: rgba(255, 255, 255, 0.035);
//   }
// }


@include breakpoint("medium") {
  .Site:not(.Site--home) .Site__main {
    --site-container-width: 75%;
  }
}
@include breakpoint("large") {
  .Site:not(.Site--home) .Site__main {
    --site-container-width: auto;
    --site-content-max-width: 60rem
  }
}


// Generic
@import "oscailte/generic/font-face.scss";
@import "oscailte/generic/modern-normalize.scss";
@import "oscailte/generic/lobotomised-owl.scss";

// Elements
@import "oscailte/elements/html.scss";
@import "oscailte/elements/body.scss";
@import "oscailte/elements/blockquote.scss";
@import "oscailte/elements/code.scss";
@import "oscailte/elements/headings.scss";
@import "oscailte/elements/hr.scss";
@import "oscailte/elements/img.scss";
@import "oscailte/elements/links.scss";

// Objects
@import "oscailte/objects/circuited.scss";
@import "oscailte/objects/lists.scss";
@import "oscailte/objects/muted.scss";
@import "oscailte/objects/no-owl.scss";

// Components
@import "oscailte/components/button.scss";
@import "oscailte/components/card.scss";
@import "oscailte/components/footer.scss";
@import "oscailte/components/header.scss";
@import "oscailte/components/hero.scss";
@import "oscailte/components/icon.scss";
@import "oscailte/components/navigation.scss";
@import "oscailte/components/recentposts.scss";
@import "oscailte/components/skipnav.scss";
@import "oscailte/components/social.scss";
@import "oscailte/components/syntax.scss";

// Layout
@import "oscailte/layout/stickyfooter.scss";
@import "oscailte/layout/container.scss";
@import "oscailte/layout/home.scss";
@import "oscailte/layout/post.scss";