/* Base: variables, fonts, light reset, and site-wide typography scale */

/* Font imports (kept here so all pages load them once) */
@import url('https://fonts.cdnfonts.com/css/satoshi');
@import url('https://rsms.me/inter/inter.css');

:root {
  /* Brand */
  --color-brand: #FEC007;
  --color-text-brand: #ffffff;

  /* Backgrounds */
  --color-bg-dark: #222222;
  --color-bg-cyan: #87fcfc;
  --color-bg-yellow: #fae190;
  --color-bg-pink: #e9a2ba;
  --color-bg-green: #C2D540;
  --color-bg-lightgray: #ffffff;
  --color-bg-orange: #f4a261;
  --color-bg-purple: #dbcaf7;
  --color-bg-blue: #6ec1e4;
  --color-bg-lime: #b8e986;
  --color-bg-coral: #e59696;

  /* Opacity helpers */
  --bg-opacity-glass: 0.80;
  --color-bg-dark-rgb: 34, 34, 34;
  --color-bg-cyan-rgb: 0, 201, 201;
  --color-bg-lightgray-rgb: 255, 255, 255;
  --color-bg-coral-rgb: 229, 150, 150;
  --color-bg-purple-rgb: 180, 159, 213;
  --color-bg-blue-rgb: 110, 193, 228;

  /* Text */
  --color-text-dark: #121212;
  --color-text-gray: #666666;
  --color-text-white: #FFF;
  --color-text-light: #EAEAEA;

  /* Fonts */
  --font-brand: 'Satoshi', sans-serif;
  --font-headings: 'Satoshi', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Components */
  --apps-icon-size: 54px;
}

/* Prefer variable Inter on supported browsers */
@supports (font-variation-settings: normal) {
  :root { --font-body: 'InterVariable', sans-serif; }
}

/* Light reset and defaults */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 85%; }
body { font-family: var(--font-body); color: var(--color-text-light); background-color: var(--color-bg-lightgray); }


/* Layout helpers and surfaces (shared across pages) */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Glassmorphic surface used on sections across pages */
.surface-glass {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(var(--color-bg-lightgray-rgb, 255,255,255), var(--bg-opacity-glass, 0.80));
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Elevated white card for primary content blocks */
.surface-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

/* App background with subtle glass-friendly gradients */
.page-bg-glass {
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(254, 192, 7, 0.16), rgba(254, 192, 7, 0.0) 60%),
    radial-gradient(1000px 700px at 110% 0%, rgba(135, 252, 252, 0.16), rgba(135, 252, 252, 0.0) 60%),
    #ffffff;
}