/*** 
THEME.CSS 
- VERSION: 240601
- COLLECTION: ESSENTIALS
- LOAD ORDER: CSS/A/01B
- DESCRIPTION: Features theme colors and fonts at the root; and sets colors.
© M. Yıldız 2024. All rights reserved.
##########################
***/

/* #region # MAIN */

/*** 
# ROOT VARIABLES
> Set Root variables such as width settings and colors.
***/

/*** 
## VARIABLES: COLORS
+ Brand Colors are the colors of the brand.
+ Theme Colors are the colors of the theme.
+ Background Color is the theme value of the background color.
+ Text Color is the theme value of the text color. 
***/

:root {
  /* Brand Colors */
  --color-brand: #971b2f;
  --color-accent: #971b2f;
  --color-high: rgba(151, 27, 47, 0.7); /* Highlight Color */
  /* Theme Colors */
  --color-theme-alpha: #ffffff;
  --color-theme-beta: #ffffff;
  --color-theme-gamma: #ffffff;
  /* Background & Text Colors */
  --color-back: #ffffff;
  --color-text: #000000;
}

/***
## VARIABLES: SPACING
+ A 4px-based spacing scale (rems for accessibility / zoom).
+ Six steps cover gutters, gaps, paddings, and section rhythms used
  across the project. Tighter values (0.75 / 1.25 / 2.5 / 3 rem) are
  acceptable inline where a between-step gap is genuinely needed; the
  named tokens are the defaults to reach for first.
+ Reference: 1rem = 16px (typography.css html font-size = 12pt ≈ 16px).
***/

:root {
  /* Spacing scale */
  --space-xs: 0.5rem;   /*  8px — chip padding, tight inline gaps      */
  --space-sm: 1rem;     /* 16px — base paragraph rhythm, list gaps     */
  --space-md: 2rem;     /* 32px — row margins, gutter padding          */
  --space-lg: 4rem;     /* 64px — section padding, dividers            */
  --space-xl: 6rem;     /* 96px — page-module hero / band padding      */
  --space-2xl: 8rem;    /* 128px — full-bleed band internal padding    */
}

/***
## VARIABLES: FONTS
+ These are the default values of sans-serif and serif fonts.
***/

:root {
  /* Fonts */
  --font-sans: "futura-pt", sans-serif;
  --font-serif: "adobe-caslon-pro", serif;
}

/***
## VARIABLES: TYPE SCALE
+ Em-relative font-size scale. Each token names the role it covers most
  often; inline values (0.6 / 0.9 / 0.95 / 1.125 / 1.35 / 1.6 / 2.5 / 4.5em)
  are acceptable for between-step typographic decisions (drop-caps,
  ticker dots, mid-scale leads).
***/

:root {
  --type-2xs: 0.75em;   /* micro eyebrow                                */
  --type-xs:  0.875em;  /* eyebrow standard, sans secondary             */
  --type-sm:  1em;      /* body base                                    */
  --type-md:  1.25em;   /* article body, postcard title                 */
  --type-lg:  1.5em;    /* h3, blockquote                               */
  --type-xl:  2em;      /* h2                                           */
  --type-2xl: 3em;      /* h1                                           */
  --type-3xl: 4em;      /* title-display                                */
}

/***
## VARIABLES: LETTER-SPACING (TRACKING)
+ Negative values for display headings (compress); positive for uppercase
  micros (open up). Outliers (-0.005 / -0.01 / -0.05 / 0.24em) stay
  inline where a between-step optical adjustment is needed.
***/

:root {
  --track-tight:    -0.02em;  /* default display tightening            */
  --track-tighter:  -0.04em;  /* aggressive (hero wordmark)            */

  --track-wide:     0.04em;   /* subtle small-caps                     */
  --track-wider:    0.16em;   /* standard eyebrow                      */
  --track-widest:   0.32em;   /* micro eyebrow                         */
}

/* #endregion */

/* #region # HTML */

/*** 
# HTML SETUP
> Set HTML Disposition, Background and Highlight colors.
***/

html {
  /* Disposition */
  display: block;
  position: static;
  overflow-y: scroll;
}

html {
  /* Color & Background */
  background-color: var(--color-back);
}

html ::selection {
  /* Color & Background */
  background-color: var(--color-high);
}

/* #endregion */