/*
Theme Name: Gamezovah Sportlight
Theme URI: http://localhost
Author: Gamezovah
Description: Custom WordPress theme for Gamezovah Sportlight.
Version: 1.0
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
  /* Brand */

  --color-primary: #e5093f;
  --color-primary-hover: #ff1744;
  --color-primary-soft: rgba(229, 9, 63, 0.1);

  /* Backgrounds */

  --color-background: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-alt: #eeeeef;

  /* Text */

  --color-text: #111216;
  --color-text-muted: #70737c;
  --color-text-soft: #9a9ca3;

  /* Borders */

  --color-border: rgba(17, 18, 22, 0.08);

  /* States */

  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #dc2626;

  /* Layout */

  --container-width: 128rem;
  --header-height: 7.2rem;

  /* Radius */

  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.8rem;
  --radius-xl: 2.4rem;

  /* Motion */

  --transition-fast: 150ms ease;
  --transition: 220ms ease;
}

[data-theme="dark"] {
  /* Brand */

  --color-primary: #ff3158;
  --color-primary-hover: #ff4d70;
  --color-primary-soft: rgba(255, 49, 88, 0.12);

  /* Backgrounds */

  --color-background: #08090c;
  --color-surface: #101217;
  --color-surface-alt: #181b22;

  /* Text */

  --color-text: #f5f6f8;
  --color-text-muted: #9ca1ad;
  --color-text-soft: #6f7480;

  /* Borders */

  --color-border: rgba(255, 255, 255, 0.08);

  /* States */

  --color-success: #22c55e;
  --color-warning: #fbbf24;
  --color-error: #ef4444;
}

/* =========================================================
   RESET / GLOBAL
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 1.6rem;
  line-height: 1.5;

  background: var(--color-background);
  color: var(--color-text);

  transition:
    background-color var(--transition),
    color var(--transition);
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.container {
  width: min(calc(100% - 3.2rem), var(--container-width));

  margin-inline: auto;
}

.site-main {
  min-height: 70vh;
}