/**
 * ==========================================================================
 * SOY YO — Matthias Krause
 * ==========================================================================
 *
 * File:        variables.css
 * Phase:       1 — Foundation
 * Area:        Styles / Design System
 *
 * Purpose:
 * Registers the local project fonts and defines global design variables for
 * typography, colors, spacing, dimensions, layers, borders and motion.
 *
 * Dependencies:
 * - assets/fonts/Italiana
 * - assets/fonts/Manrope
 * - assets/fonts/DM_Mono
 *
 * ==========================================================================
 */

/* ==========================================================================
   Local fonts
   ========================================================================== */

/*
 * Italiana
 * Primary display font for the Soy yo identity.
 */

@font-face {
  font-family: "Italiana";
  src:
    local("Italiana Regular"),
    url("../assets/fonts/Italiana/Italiana-Regular.ttf")
      format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/*
 * Manrope
 * Variable font for names, navigation and general interface text.
 */

@font-face {
  font-family: "Manrope";
  src:
    local("Manrope"),
    url("../assets/fonts/Manrope/Manrope-VariableFont_wght.ttf")
      format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}


/*
 * DM Mono
 * Monospaced font for time, numbering and technical details.
 */

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Light"),
    url("../assets/fonts/DM_Mono/DMMono-Light.ttf")
      format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Regular"),
    url("../assets/fonts/DM_Mono/DMMono-Regular.ttf")
      format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Medium"),
    url("../assets/fonts/DM_Mono/DMMono-Medium.ttf")
      format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Light Italic"),
    url("../assets/fonts/DM_Mono/DMMono-LightItalic.ttf")
      format("truetype");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Italic"),
    url("../assets/fonts/DM_Mono/DMMono-Italic.ttf")
      format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src:
    local("DM Mono Medium Italic"),
    url("../assets/fonts/DM_Mono/DMMono-MediumItalic.ttf")
      format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}


/* ==========================================================================
   Global variables
   ========================================================================== */

:root {
  /*
   * Typography
   */

  --font-display: "Italiana", Georgia, serif;
  --font-interface: "Manrope", Arial, sans-serif;
  --font-mono: "DM Mono", monospace;


  /*
   * Base colors
   */

  --color-background: #f0eee8;
  --color-foreground: #1b1b19;
  --color-ink: var(--color-foreground);
  --color-paper: var(--color-background);
  --color-accent: #a1412f;

  --color-line: rgb(27 27 25 / 22%);
  --color-line-subtle: rgb(27 27 25 / 10%);
  --color-transparent: transparent;


  /*
   * Typography sizes
   */

  --font-size-xs: 0.5rem;
  --font-size-sm: 0.625rem;
  --font-size-base: 1rem;
  --font-size-navigation: clamp(0.625rem, 0.95vw, 1rem);
  --font-size-identity: clamp(3rem, 5vw, 4.875rem);


  /*
   * Font weights
   */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;


  /*
   * Letter spacing
   */

  --letter-spacing-tight: -0.055em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.16em;
  --letter-spacing-widest: 0.32em;


  /*
   * General spacing
   */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 3.5rem;


  /*
   * Page dimensions
   */

  --page-padding-horizontal: 3.5rem;
  --page-padding-vertical: 3rem;

  --desktop-min-width: 48rem;
  --desktop-min-height: 37.5rem;


  /*
   * Layer order
   */

  --z-stage: 1;
  --z-menu: 100;
  --z-clock: 9998;
  --z-identity: 9999;


  /*
   * Borders
   */

  --border-thin: 1px solid var(--color-line);
  --border-subtle: 1px solid var(--color-line-subtle);


  /*
   * Motion
   */

  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;

  --ease-standard: ease;
  --ease-expressive: cubic-bezier(0.22, 1, 0.36, 1);


  /*
   * Clock
   */

  --clock-size: 5.75rem;
  --clock-border-radius: 50%;


  /*
   * Theme menu
   */

  --theme-count: 5;
  --theme-menu-height: 58vh;
  --theme-menu-height: 58dvh;
}