portfolio-page/src/scss/App.scss

@use 'themes/index' as t;
@use 'variables';
@use 'mixins';
@use 'globals';

// Layout components (topbar, footer, etc.)
@use 'layout';

// All sections imported through index
@use 'sections';

// Component styles
@use 'components/back-to-top';

// Import Geist font from Google Fonts or local files
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');

// CSS Reset - Add this
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// Standard Theme (Light) + design system tokens
:root {
  @include t.theme-vars(t.$light-theme);

  // Spacing scale (multiples of 4px)
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  // Typography scale
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  // Line heights
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  // Letter spacing
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  // Border radius
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  // Shadows (light)
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  // Transitions
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  // Landing section background gradients (light) – vivid & saturated
  --bg-reasons: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%);
  --bg-winnings: linear-gradient(160deg, #ede9fe 0%, #e0e7ff 100%);
  --bg-experience: linear-gradient(160deg, #e0f2fe 0%, #ede9fe 100%);
  --bg-processes: linear-gradient(160deg, #e0e7ff 0%, #dbeafe 100%);
  --bg-references: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%);

  // Reused section backgrounds (light)
  --about-background: linear-gradient(160deg, #f0f9ff 0%, #dbeafe 100%);
  --projects-background: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%);
  --contact-background: linear-gradient(160deg, #ede9fe 0%, #e0f2fe 100%);

  // Tech section backgrounds (light)
  --hero-background: linear-gradient(
    160deg,
    #f8faff 0%,
    #f1f3ff 50%,
    #f5f0ff 100%
  );
  --services-background: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%);
  --skills-background: linear-gradient(160deg, #dbeafe 0%, #e0f2fe 100%);
  --certifications-background: linear-gradient(
    160deg,
    #e0e7ff 0%,
    #ede9fe 100%
  );

  // Glassmorphism card tokens (light)
  --card-glass-bg: rgba(255, 255, 255, 0.65);
  --card-glass-border: rgba(255, 255, 255, 0.9);

  // Glow shadows (light)
  --shadow-glow:
    0 0 0 1px rgba(99, 102, 241, 0.12), 0 8px 24px rgba(99, 102, 241, 0.1);
  --shadow-glow-hover:
    0 0 0 1px rgba(99, 102, 241, 0.28), 0 16px 48px rgba(99, 102, 241, 0.2);
}

// Dark theme + shadow overrides
[data-theme='dark'] {
  @include t.theme-vars(t.$dark-theme);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);

  // Landing section backgrounds (dark) – cinematic deep
  --bg-reasons: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%);
  --bg-winnings: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%);
  --bg-experience: linear-gradient(160deg, #0d1a2e 0%, #0f172a 100%);
  --bg-processes: linear-gradient(160deg, #0f172a 0%, #190b2e 100%);
  --bg-references: linear-gradient(160deg, #190b2e 0%, #0f172a 100%);

  // Reused section backgrounds (dark)
  --about-background: linear-gradient(160deg, #111827 0%, #0f172a 100%);
  --projects-background: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%);
  --contact-background: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%);

  // Tech section backgrounds (dark) – full cinematic
  --hero-background: linear-gradient(
    160deg,
    #06080f 0%,
    #0c1220 50%,
    #120720 100%
  );
  --services-background: linear-gradient(160deg, #190b2e 0%, #0f172a 100%);
  --skills-background: linear-gradient(160deg, #0f172a 0%, #0d1a2e 100%);
  --certifications-background: linear-gradient(
    160deg,
    #0d1a2e 0%,
    #190b2e 100%
  );

  // Glassmorphism card tokens (dark)
  --card-glass-bg: rgba(139, 92, 246, 0.06);
  --card-glass-border: rgba(139, 92, 246, 0.22);

  // Glow shadows (dark)
  --shadow-glow:
    0 0 0 1px rgba(139, 92, 246, 0.2), 0 8px 32px rgba(139, 92, 246, 0.18);
  --shadow-glow-hover:
    0 0 0 1px rgba(139, 92, 246, 0.45), 0 16px 56px rgba(139, 92, 246, 0.32);
}

body {
  font-family:
    'Geist',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0; // Explicitly remove body margin
  padding: 0; // Explicitly remove body padding
}

section {
  padding: 3rem 1rem;
  margin: 0; // Remove any section margins
}

// App-level styles for routing
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  &__main {
    flex: 1;
  }
}