Laravel/resources/sass/base/_base.scss

/**
 * Base Styles - Enterprise SCSS Architecture
 * Professional Resume Builder
 * 
 * @author David Valera Melendez <david@valera-melendez.de>
 * @created 2025-08-08
 * @location Made in Germany 🇩🇪
 */

// ==========================================================================
// CSS Reset & Base Styles
// ==========================================================================
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: $font-family-primary;
  font-size: $font-size-base;
  line-height: $line-height-normal;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba($black, 0);
}

body {
  margin: 0;
  font-family: $font-family-primary;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-normal;
  color: $text-primary;
  background-color: $bg-secondary;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba($black, 0);
}

// ==========================================================================
// Typography Base
// ==========================================================================
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: $spacing-md;
  font-weight: $font-weight-semibold;
  line-height: $line-height-tight;
  color: $text-primary;
}

h1 { font-size: $font-size-4xl; }
h2 { font-size: $font-size-3xl; }
h3 { font-size: $font-size-2xl; }
h4 { font-size: $font-size-xl; }
h5 { font-size: $font-size-lg; }
h6 { font-size: $font-size-base; }

p {
  margin-top: 0;
  margin-bottom: $spacing-base;
  
  &:last-child {
    margin-bottom: 0;
  }
}

small,
.small {
  font-size: $font-size-sm;
  font-weight: $font-weight-normal;
}

// ==========================================================================
// Links
// ==========================================================================
a {
  color: $primary-color;
  text-decoration: underline;
  transition: color $transition-base;
  
  &:hover,
  &:focus {
    color: darken($primary-color, 15%);
  }
  
  &:focus {
    outline: thin dotted;
    outline-offset: 2px;
  }
}

// ==========================================================================
// Lists
// ==========================================================================
ul,
ol {
  margin-top: 0;
  margin-bottom: $spacing-base;
  padding-left: $spacing-xl;
}

li {
  margin-bottom: $spacing-xs;
}

// ==========================================================================
// Forms Base
// ==========================================================================
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

// ==========================================================================
// Images & Media
// ==========================================================================
img {
  border-style: none;
  vertical-align: middle;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

// ==========================================================================
// Tables
// ==========================================================================
table {
  border-collapse: collapse;
}

caption {
  padding-top: $spacing-sm;
  padding-bottom: $spacing-sm;
  color: $text-muted;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

// ==========================================================================
// Code
// ==========================================================================
pre,
code,
kbd,
samp {
  font-family: $font-family-mono;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: $spacing-base;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

// ==========================================================================
// Accessibility
// ==========================================================================
.sr-only {
  @include sr-only;
}

.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }
}

// ==========================================================================
// Focus States
// ==========================================================================
:focus {
  outline: 2px solid $primary-color;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid $primary-color;
  outline-offset: 2px;
}