/*
  Design tokens, the reset, the page background and link styling.
  Everything here is global and applies before any component file.
*/

/*
  Frutiger Aero portfolio styles.

  The look: a sunlit sky over glossy grass and water, floating bubbles, and one
  frosted-glass "browser window" sheet that holds the whole resume.

  Class groups, in the order they appear below:
    .bubbles   - the animated background bubbles
    .win       - the frosted glass window that wraps all page content
    .browser   - the fake browser chrome (tab strip + bookmarks bar)
    .welcome   - the header banner with the avatar and name
    .panel     - each titled content panel ("Clients", "Projects")
    .logo      - a single client logo
    .pcard     - a single project card
*/

/* --- base reset ------------------------------------------------------- */

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

body {
  margin: 0;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* --- layout ----------------------------------------------------------- */

/* Layout: Frutiger Aero — sunlit sky over glossy grass and water, floating bubbles, one frosted-glass sheet holding a glass side panel and the resume. */

:root {
  --sky1: #1e8fe0;
  --sky2: #62c3f5;
  --sky3: #d8f3ff;
  --grass1: #8fdc4a;
  --grass2: #3fa52a;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-line: rgba(255, 255, 255, 0.75);
  --aqua: #12a4d8;
  --aqua-dk: #0a6fa6;
  --leaf: #4cb82e;
  --leaf-dk: #2e8a1e;
  --ink: #10324a;
  --muted: #4a6a80;
  --ui:
    'Segoe UI', Frutiger, 'Frutiger Linotype', 'Myriad Pro', 'Hind',
    'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--sky1);
  color: var(--ink);
}

body {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255, 255, 255, 0.95) 0 3%,
      rgba(255, 255, 220, 0.5) 7%,
      transparent 22%
    ),
    radial-gradient(
      ellipse 140% 30% at 50% 100%,
      var(--grass2) 0 40%,
      transparent 41%
    ),
    radial-gradient(
      ellipse 120% 34% at 20% 102%,
      var(--grass1) 0 45%,
      transparent 46%
    ),
    radial-gradient(
      ellipse 80% 20% at 50% 70%,
      rgba(38, 183, 214, 0.35),
      transparent 70%
    ),
    linear-gradient(var(--sky1), var(--sky2) 45%, var(--sky3) 75%);
  background-attachment: fixed;
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 40px 16px 60px;
  position: relative;
}

a {
  color: var(--aqua-dk);
}

a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}