/**
 * Design tokens – spacing, layout, breakpoints
 * Use these tokens; avoid hardcoded values.
 */

:root {
  /* Layout – container & grid */
  --container-margin: 120px;
  --container-padding-block: 80px;
  --container-margin-block: 80px;
  --grid-columns: 12;
  --grid-gutter: 24px;

  /* Typography */
  --font-family-primary: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-family-script: "Sacramento", cursive;

  /* Surface / background */
  --color-bg-container: #121212;

  /* Logo (header) */
  --color-logo: #ffffff;

  /* Header */
  --header-height: 80px;
  --space-header-block: 16px;
  --header-nav-gap: 40px;
  --font-size-nav: 1.5rem;
  --line-height-nav: 1.211em;
  --font-weight-nav: 400;
  --color-header-link: #ffffff;
  --color-header-link-hover: rgba(255, 255, 255, 0.8);
  --color-header-link-focus-ring: #ffffff;

  /* Hero */
  --hero-padding-block-start: 80px;
  --hero-padding-block-end: 40px;
  --hero-gap: 40px;
  --hero-avatar-size: 120px;
  --font-size-hero-heading: 3.75rem;
  --line-height-hero-heading: 1.211em;
  --color-hero-heading: #ffffff;

  /* Card */
  --card-gap: 40px;
  --card-padding-block: 40px;
  --card-padding: 24px;
  --card-border-color: #595959;
  --card-border-width: 0.5px;
  --card-border-radius: 4px;
  --card-text-gap: 16px;
  --font-size-card-description: 2rem;
  --font-size-card-date: 2rem;
  --line-height-card: 1.211em;
  --color-card-text: #ffffff;
  --color-card-date: #888888;

  /* Tools section */
  --tools-section-margin-block: 80px;
  --tools-section-gap: 32px;
  --font-size-tools-label: 2.5rem;
  --font-size-tools-text: 3.25rem;
  --line-height-tools-text: 1.3em;
  --color-tools-text: #ffffff;
  --tools-logos-gap: 40px;
  --card-btn-border-radius: 40px;
  --card-btn-border-width: 0.5px;
  --card-btn-width: 100px;
  --card-btn-padding: 12px 20px;
  --card-btn-font-size: 1rem;
  --color-card-btn-border: #ffffff;
  --color-card-btn-bg: #BC85A3;
  --color-card-btn-text: #ffffff;
  --color-card-btn-hover-bg: #ffffff;
  --color-card-btn-hover-text: #121212;

  /* About section */
  --about-margin-block: 80px;
  --about-content-gap: 32px;
  --font-size-about-label: 2.5rem;
  --font-size-about-title: 4rem;
  --font-size-about-body: 2rem;
  --line-height-about: 1.6em;

  /* Breakpoints (for reference; use in media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1440px;
}

/* ── Light theme overrides ── */
[data-theme="light"] {
  --color-bg-container:           #f5f5f0;
  --color-logo:                   #1a1a1a;
  --color-header-link:            #1a1a1a;
  --color-header-link-hover:      rgba(0, 0, 0, 0.55);
  --color-header-link-focus-ring: #1a1a1a;
  --color-hero-heading:           #1a1a1a;
  --color-card-text:              #1a1a1a;
  --color-card-date:              #666666;
  --card-border-color:            #cccccc;
  --color-tools-text:             #1a1a1a;
  --color-card-btn-bg:            #9b5f82;
  --color-card-btn-text:          #ffffff;
  --color-card-btn-hover-bg:      #1a1a1a;
  --color-card-btn-hover-text:    #ffffff;
  --color-card-btn-icon:          #000000;
}

/* Light mode – button arrow color */
[data-theme="light"] .card__btn .material-icons {
  color: var(--color-card-btn-icon);
}

[data-theme="light"] .card__btn:hover .material-icons {
  color: var(--color-card-btn-hover-text);
}

/* Light mode – invert dark-on-light assets */
[data-theme="light"] .card__logo {
  filter: brightness(0);
}

[data-theme="light"] .tools-section__logo--white {
  filter: brightness(0);
}

[data-theme="light"] .hero__avatar {
  filter: grayscale(100%) brightness(1.1);
}

[data-theme="light"] .about__illustration-img {
  filter: grayscale(100%) brightness(1.1);
}

[data-theme="light"] .header__flyout {
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* Responsive – container margin & gutter */
@media (max-width: 1280px) {
  :root {
    --container-margin: 80px;
    --container-padding-block: 64px;
    --grid-gutter: 20px;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-margin: 48px;
    --container-padding-block: 48px;
    --grid-gutter: 20px;
    --font-size-hero-heading: 3rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-margin: 24px;
    --container-padding-block: 32px;
    --grid-gutter: 16px;
    --header-height: 64px;
    --header-nav-gap: 24px;
    --font-size-nav: 1.125rem;
    --hero-avatar-size: 80px;
    --font-size-hero-heading: 2.25rem;
    --hero-padding-block-start: 48px;
    --hero-gap: 24px;
    --font-size-card-description: 1.75rem;
    --font-size-card-date: 1.375rem;
    --card-gap: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-margin: 16px;
    --container-padding-block: 24px;
    --grid-gutter: 16px;
    --font-size-hero-heading: 1.875rem;
    --hero-padding-block-start: 32px;
    --font-size-card-description: 1.5rem;
    --font-size-card-date: 1.25rem;
  }
}