/*
  @file /css/token.css
  @brief Reusable variables for use in later stylesheets.
  @author Ronald Tavarez
  @updated 2026-03-26

  @note
    - When adding a new token, prefix the type of brand
      before the application (i.e. --color-main).

    - If you're reading this it means that I'm no longer
      working on the webpage. You should follow what I've
      left for you so you mess up.

  @warning
    - Should be included at the very top of the webpage,
      as it is a dependency for every other stylesheet.
*/

:root {
  /* Fonts */
  --font-body: "Roboto", sans-serif;
  --font-heading: "Comic Neue", cursive;
  --font-display: "Bungee", cursive;

  /* Type scale */
  --text-xs: 1rem;
  --text-sm: 1.125rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 3rem;
  --text-3xl: 4rem;
  --text-4xl: 5rem;

  /* Line heights */
  --line-tight: 1.2;
  --line-normal: 1.6;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --container-width: 1200px;
  --section-padding: var(--space-2xl);

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.15);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.2);
  --shadow-reverse-sm: 0 -2px 4px rgb(0 0 0 / 0.1);
  --shadow-reverse-md: 0 -4px 12px rgb(0 0 0 / 0.15);
  --shadow-reverse-lg: 0 -8px 24px rgb(0 0 0 / 0.2);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Brand palette */
  --color-brand-primary: #4a89dc;
  --color-brand-primary-dark: #3b7ddd;
  --color-brand-secondary: #48cfad;
  --color-brand-accent: #ffce54;
  --color-brand-warning: #fc6e51;
  --color-brand-lilac: #c3bef0;
  --color-brand-white: #ffffff;

  /* Neutral palette */
  --color-neutral-50: #f5f7fa;
  --color-neutral-100: #e6e9ed;
  --color-neutral-300: #d2d7d3;
  --color-neutral-500: #aab2bd;
  --color-neutral-700: #7f8c8d;
  --color-neutral-900: #2c3e50;

  /* Semantic text */
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-700);
  --color-text-inverse: var(--color-brand-white);

  /* Semantic backgrounds */
  --color-page-bg: var(--color-neutral-50);
  --color-surface: var(--color-brand-white);
  --color-surface-alt: var(--color-neutral-100);

  /* Section backgrounds */
  --color-hero-bg: var(--color-brand-primary);
  --color-services-bg: var(--color-brand-secondary);
  --color-contact-bg: var(--color-brand-lilac);
  --color-footer-bg: var(--color-brand-lilac);

  /* Borders */
  --color-border: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-500);

  /* Links */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-dark);

  /* Buttons */
  --color-button-primary-bg: #f88e15;
  --color-button-primary-bg-hover: #fcb928;
  --color-button-primary-text: var(--color-brand-white);

  /* Focus */
  --color-focus-ring: rgb(74 137 220 / 0.25);

  /* Decorative */
  --wave-height: 80px;
}

.dark-mode {
  --color-text: #ecf0f1;
  --color-text-muted: #bdc3c7;
  --color-text-inverse: #ffffff;

  --color-page-bg: #2c3e50;
  --color-surface: #34495e;
  --color-surface-alt: #22313f;

  --color-border: #3d566e;
  --color-border-strong: #4b657f;

  --shadow-sm: 0 2px 4px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}