/**
 * CSS Variables (Custom Properties)
 *
 * This file defines CSS custom properties for the Onwords theme.
 * Variables are organized by component and usage.
 */

:root {
  /* ========================================
     Color Variables
     ======================================== */

  /* Primary Brand Color (Onwords Red) */
  --color-primary: #E53935;
  --color-primary-hover: #D32F2F;

  /* ========================================
     Typography Variables
     ======================================== */

  /* Font Family (from STUDIO site) */
  --font-family-base: "Open Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ========================================
     Header Variables
     ======================================== */

  /* Header Layout */
  --header-bg-color: rgb(255, 255, 255);
  --header-padding-desktop: 16px 32px;
  --header-padding-mobile-lg: 12px 20px;
  --header-padding-mobile-sm: 12px 15px;
  --header-z-index: 1000;

  /* Logo Sizing */
  --logo-width-desktop: 160px;
  --logo-width-tablet: 144px;

  /* Hamburger Menu */
  --hamburger-line-color: #424242;
  --hamburger-line-height: 2px;
  --hamburger-line-spacing: 6px;

  /* Mobile Menu */
  --mobile-menu-bg-color: rgb(255, 255, 255);
  --mobile-menu-item-padding: 15px 0;
  --mobile-menu-border-color: #eeeeee;
  --mobile-menu-font-size: 16px;
  --mobile-menu-font-weight: 400; /* STUDIO site */
  --mobile-menu-line-height: 16px;

  /* Navigation */
  --nav-link-color: #333333;
  --nav-link-hover-opacity: 0.7;

  /* Transitions */
  --transition-standard: 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  --transition-fast: 160ms ease-in-out;

  /* ========================================
     Footer Variables
     ======================================== */

  /* Footer Colors */
  --footer-bg-color: rgb(246, 246, 246);
  --footer-text-color: rgb(51, 51, 51);
  --footer-text-secondary: rgb(34, 34, 34);
  --footer-text-tertiary: rgb(66, 66, 66);

  /* Footer Spacing */
  --footer-margin-top: 120px;
  --footer-padding: 80px 0 40px;
  --footer-gap: 40px;

  /* Footer Mobile Spacing */
  --footer-mobile-margin-top: 100px;
  --footer-mobile-padding: 40px 0 28px;
  --footer-mobile-logo-width: 180px;

  /* Footer Sizing */
  --footer-width: 1062px;
  --footer-container-width: 955.797px;
  --footer-container-max-width: 90%;
  --footer-branding-width: 180px;
  --footer-nav-gap: 80px;
  --footer-list-gap: 14px;

  /* Footer Transitions */
  --footer-transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);

  /* ========================================
     Section Variables
     ======================================== */

  /* Section Spacing */
  --section-padding-desktop: 80px 0;
  --section-padding-mobile: 60px 0;
  --section-margin-bottom: 120px;

  /* Section Headings */
  --heading-font-size: 36px;
  --heading-font-weight: 700;
  --heading-line-height: 57.6px;
  --heading-color: rgb(34, 34, 34);
  --heading-margin: 0;

  /* Section Labels */
  --label-font-size: 14px;
  --label-font-weight: 600;
  --label-color: rgb(102, 102, 102);
  --label-letter-spacing: 0.1em;

  /* ========================================
     Hero Section Variables
     ======================================== */

  /* Hero Layout */
  --hero-height-desktop: 640px;
  --hero-height-mobile: 400px;

  /* Hero Typography */
  --hero-title-font-size: 64px;
  --hero-title-font-weight: 600;
  --hero-title-line-height: 76.8px;
  --hero-title-margin: 0 0 11px 0;

  --hero-subtitle-font-size: 20px;
  --hero-subtitle-font-weight: 500;
  --hero-subtitle-line-height: 30px;

  /* Hero Carousel */
  --carousel-transition-duration: 600ms;
  --carousel-timing-function: ease-in-out;

  /* ========================================
     Card Component Variables
     ======================================== */

  /* Card Styling */
  --card-bg-color: rgb(255, 255, 255);
  --card-border-radius: 8px;
  --card-padding: 40px;
  --card-transition: all 0.3s ease;

  /* ========================================
     News Component Variables
     ======================================== */

  /* News Item */
  --news-date-color: rgb(102, 102, 102);
  --news-category-bg: rgb(238, 238, 238);
  --news-category-padding: 4px 12px;
  --news-category-border-radius: 4px;
}