/**
 * CSS Custom Properties (Variables)
 * Depois dos Quinze Theme
 *
 * This file defines the design tokens used throughout the theme.
 * Using CSS variables enables consistent styling and easier maintenance.
 */

:root {
  /* ==========================================================================
     Colors - Primary Palette
     ========================================================================== */
  --color-primary-pink: #fdcdc5;
  --color-primary-mint: #d9f2ea;
  --color-primary-coral: #d88777;
  --color-primary-pink-light: #fdedeb;
  --color-primary-pink-hover: #f8cfcd;
  --color-primary-mint-light: #c7e3db;
  --color-primary-mint-hover: #a6d5c6;
  --color-primary-mint-dark: #d4ece8;

  /* ==========================================================================
     Colors - Text
     ========================================================================== */
  --color-text-primary: #212121;
  --color-text-secondary: #343434;
  --color-text-dark: #1d1d1d;
  --color-text-muted: #616161;
  --color-text-light: #868686;
  --color-text-lighter: #9a9a9a;
  --color-text-menu: #3e3e3e;
  --color-text-content: #474747;
  --color-text-italic: #5e5e5e;

  /* ==========================================================================
     Colors - UI Elements
     ========================================================================== */
  --color-bg-light: #f0f0f0;
  --color-bg-footer: #e9e9e9;
  --color-bg-tags: #efefef;
  --color-bg-newsletter: #f0f1f1;
  --color-border-light: #ddd;
  --color-border-medium: #c6c6c6;
  --color-border-dark: #a4a4a4;
  --color-selection: #b3d4fc;

  /* ==========================================================================
     Colors - Interactive States
     ========================================================================== */
  --color-link: #d89ca7;
  --color-link-hover: #e77373;
  --color-author: #81a49f;
  --color-tag: #8b8b8b;
  --color-tag-hover: #000;
  --color-button-bg: #000;
  --color-button-text: #fff;

  /* ==========================================================================
     Typography - Font Families
     ========================================================================== */
  --font-primary: 'Lato', Helvetica, sans-serif;
  --font-serif: 'Georgia', serif;
  --font-display: 'Conv_PoynterOSDisplay-Bold', 'Georgia', serif;
  --font-script: 'Shorelines-Script-Bold', cursive;

  /* ==========================================================================
     Typography - Font Sizes
     ========================================================================== */
  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-xs: 10px;
  --font-size-xxs: 8px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 25px;
  --font-size-3xl: 33px;
  --font-size-4xl: 40px;
  --font-size-5xl: 44px;

  /* ==========================================================================
     Typography - Line Heights
     ========================================================================== */
  --line-height-base: 1.57; /* 22px at 14px base */
  --line-height-tight: 1.2;
  --line-height-relaxed: 1.67; /* 25px at 15px */
  --line-height-loose: 2;

  /* ==========================================================================
     Typography - Letter Spacing
     ========================================================================== */
  --letter-spacing-tight: 0.01em;
  --letter-spacing-base: 0.02em;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.15em;
  --letter-spacing-widest: 0.2em;

  /* ==========================================================================
     Typography - Font Weights
     ========================================================================== */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 30px;
  --space-3xl: 40px;
  --space-4xl: 50px;

  /* ==========================================================================
     Layout
     ========================================================================== */
  --container-width: 1100px;
  --container-width-md: 960px;
  --content-width: 718px;
  --content-single-width: 750px;
  --sidebar-width: 337px;
  --sidebar-single-width: 320px;
  --header-height: 75px;
  --header-height-fixed: 70px;

  /* ==========================================================================
     Borders
     ========================================================================== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-full: 50%;
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --shadow-none: none;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.4s ease;
  --transition-slow: 0.6s ease;
  --transition-slower: 0.8s ease;
  --transition-slowest: 1.2s ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 998;
  --z-modal: 999;
  --z-tooltip: 9999;

  /* ==========================================================================
     Breakpoints (for reference - use in media queries)
     ========================================================================== */
  /* --breakpoint-sm: 500px; */
  /* --breakpoint-md: 700px; */
  /* --breakpoint-lg: 960px; */
  /* --breakpoint-xl: 1100px; */
}