/*
 * Aegis Design System — base stylesheet
 *
 * Minimal MD3-as-system reset that applies system tokens to HTML elements.
 * Does NOT define component rules; those live alongside each component.
 * Load order: design-tokens.css → design-base.css → component-specific CSS.
 */

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

/* ─── Root / Body ────────────────────────────────────────────────────────── */
:root {
    color-scheme: light dark;
}

body {
    background-color: var(--md-sys-color-background);
    color:            var(--md-sys-color-on-background);
    font-family:      var(--md-sys-typescale-font-family-plain);
    font-size:        var(--md-sys-typescale-body-large-size);
    font-weight:      var(--md-sys-typescale-body-large-weight);
    line-height:      var(--md-sys-typescale-body-large-line-height);
    letter-spacing:   var(--md-sys-typescale-body-large-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Headings (MD3 headline scale) ─────────────────────────────────────── */
h1 {
    font-family:    var(--md-sys-typescale-headline-large-font);
    font-size:      var(--md-sys-typescale-headline-large-size);
    font-weight:    var(--md-sys-typescale-headline-large-weight);
    line-height:    var(--md-sys-typescale-headline-large-line-height);
    letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

h2 {
    font-family:    var(--md-sys-typescale-headline-medium-font);
    font-size:      var(--md-sys-typescale-headline-medium-size);
    font-weight:    var(--md-sys-typescale-headline-medium-weight);
    line-height:    var(--md-sys-typescale-headline-medium-line-height);
    letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

h3 {
    font-family:    var(--md-sys-typescale-headline-small-font);
    font-size:      var(--md-sys-typescale-headline-small-size);
    font-weight:    var(--md-sys-typescale-headline-small-weight);
    line-height:    var(--md-sys-typescale-headline-small-line-height);
    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}

h4 {
    font-family:    var(--md-sys-typescale-title-large-font);
    font-size:      var(--md-sys-typescale-title-large-size);
    font-weight:    var(--md-sys-typescale-title-large-weight);
    line-height:    var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

h5 {
    font-family:    var(--md-sys-typescale-title-medium-font);
    font-size:      var(--md-sys-typescale-title-medium-size);
    font-weight:    var(--md-sys-typescale-title-medium-weight);
    line-height:    var(--md-sys-typescale-title-medium-line-height);
    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

h6 {
    font-family:    var(--md-sys-typescale-title-small-font);
    font-size:      var(--md-sys-typescale-title-small-size);
    font-weight:    var(--md-sys-typescale-title-small-weight);
    line-height:    var(--md-sys-typescale-title-small-line-height);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
}

/* ─── Links ─────────────────────────────────────────────────────────────── */
a {
    color:           var(--md-sys-color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ─── Focus ring (accessible) ───────────────────────────────────────────── */
:focus-visible {
    outline:        2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
    border-radius:  var(--md-sys-shape-corner-extra-small);
}

/* ─── MD3 Button ─────────────────────────────────────────────────────────── */
.md-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    user-select:     none;
    border:          none;
    outline:         none;
    text-decoration: none;
    white-space:     nowrap;

    /* Label Large */
    font-family:    var(--md-sys-typescale-label-large-font);
    font-size:      var(--md-sys-typescale-label-large-size);
    font-weight:    var(--md-sys-typescale-label-large-weight);
    line-height:    var(--md-sys-typescale-label-large-line-height);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);

    height:          40px;
    padding-inline:  24px;
    border-radius:   var(--md-sys-shape-corner-full);

    transition:
        box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

/* State layer (pseudo-element overlay for hover/focus/pressed) */
.md-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: currentColor;
    opacity:    0;
    border-radius: inherit;
    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-btn:hover::before   { opacity: var(--md-sys-state-hover-state-layer-opacity); }
.md-btn:focus::before   { opacity: var(--md-sys-state-focus-state-layer-opacity); }
.md-btn:active::before  { opacity: var(--md-sys-state-pressed-state-layer-opacity); }

/* Filled */
.md-btn--filled {
    background-color: var(--md-sys-color-primary);
    color:            var(--md-sys-color-on-primary);
}
.md-btn--filled:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

/* Tonal */
.md-btn--tonal {
    background-color: var(--md-sys-color-secondary-container);
    color:            var(--md-sys-color-on-secondary-container);
}
.md-btn--tonal:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

/* Elevated */
.md-btn--elevated {
    background-color: var(--md-sys-color-surface-container-low);
    color:            var(--md-sys-color-primary);
    box-shadow:       var(--md-sys-elevation-level1);
}
.md-btn--elevated:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

/* Outlined */
.md-btn--outlined {
    background-color: transparent;
    color:            var(--md-sys-color-primary);
    border:           1px solid var(--md-sys-color-outline);
    padding-inline:   23px; /* compensate for border */
}

/* Text */
.md-btn--text {
    background-color: transparent;
    color:            var(--md-sys-color-primary);
    padding-inline:   12px;
}

/* Disabled state */
.md-btn:disabled,
.md-btn[aria-disabled="true"] {
    cursor:           not-allowed;
    box-shadow:       none;
    pointer-events:   none;
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
    color:            color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    border-color:     transparent;
}

.md-btn__label {
    position: relative; /* above state layer */
    z-index:  1;
}

.md-btn__icon {
    position: relative;
    z-index:  1;
    font-size: 18px;
    line-height: 1;
}

/* ─── MD3 Text Field ─────────────────────────────────────────────────────── */
.md-textfield {
    position: relative;
    display:  inline-flex;
    flex-direction: column;
    min-width: 200px;
}

.md-textfield__input {
    font-family:    var(--md-sys-typescale-body-large-font);
    font-size:      var(--md-sys-typescale-body-large-size);
    font-weight:    var(--md-sys-typescale-body-large-weight);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    color:          var(--md-sys-color-on-surface);
    background:     transparent;
    border:         none;
    outline:        none;
    width:          100%;
    padding:        0;
    caret-color:    var(--md-sys-color-primary);
}

.md-textfield__input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

.md-textfield__label {
    font-family:    var(--md-sys-typescale-body-large-font);
    font-size:      var(--md-sys-typescale-body-large-size);
    font-weight:    var(--md-sys-typescale-body-large-weight);
    letter-spacing: var(--md-sys-typescale-body-large-tracking);
    color:          var(--md-sys-color-on-surface-variant);
    pointer-events: none;
    transition:
        font-size      var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
        transform      var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
        color          var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-textfield__supporting {
    font-family:    var(--md-sys-typescale-body-small-font);
    font-size:      var(--md-sys-typescale-body-small-size);
    font-weight:    var(--md-sys-typescale-body-small-weight);
    letter-spacing: var(--md-sys-typescale-body-small-tracking);
    color:          var(--md-sys-color-on-surface-variant);
    padding: 4px 16px 0;
}

/* Filled variant */
.md-textfield--filled {
    background-color: var(--md-sys-color-surface-container-highest);
    border-radius:    var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
    padding:          20px 16px 6px;
    border-bottom:    1px solid var(--md-sys-color-on-surface-variant);
    transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-textfield--filled .md-textfield__label {
    position: absolute;
    top:      16px;
    left:     16px;
}

.md-textfield--filled .md-textfield__label--float,
.md-textfield--filled:focus-within .md-textfield__label {
    font-size:   var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    color:       var(--md-sys-color-primary);
    transform:   translateY(-12px);
}

.md-textfield--filled:focus-within {
    border-bottom: 2px solid var(--md-sys-color-primary);
}

/* Outlined variant */
.md-textfield--outlined {
    border-radius: var(--md-sys-shape-corner-extra-small);
    border:        1px solid var(--md-sys-color-outline);
    padding:       14px 16px;
    transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.md-textfield--outlined .md-textfield__label {
    position:   absolute;
    top:        14px;
    left:       12px;
    background: var(--md-sys-color-surface);
    padding:    0 4px;
}

.md-textfield--outlined .md-textfield__label--float,
.md-textfield--outlined:focus-within .md-textfield__label {
    font-size:   var(--md-sys-typescale-body-small-size);
    line-height: var(--md-sys-typescale-body-small-line-height);
    color:       var(--md-sys-color-primary);
    transform:   translateY(-22px);
}

.md-textfield--outlined:focus-within {
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
}

/* Error modifier */
.md-textfield--error {
    border-color: var(--md-sys-color-error) !important;
}
.md-textfield--error .md-textfield__label,
.md-textfield--error:focus-within .md-textfield__label {
    color: var(--md-sys-color-error) !important;
}
.md-textfield--error .md-textfield__supporting {
    color: var(--md-sys-color-error);
}

/* Disabled */
.md-textfield:has(.md-textfield__input:disabled) {
    opacity: var(--md-sys-state-disabled-content-opacity);
    pointer-events: none;
}

/* ─── MD3 Card ───────────────────────────────────────────────────────────── */
.md-card {
    display:       flex;
    flex-direction: column;
    border-radius: var(--md-sys-shape-corner-medium);
    overflow:      hidden;
    color:         var(--md-sys-color-on-surface);
    transition:    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

/* Elevated */
.md-card--elevated {
    background-color: var(--md-sys-color-surface-container-low);
    box-shadow:       var(--md-sys-elevation-level1);
}
.md-card--elevated:hover {
    box-shadow: var(--md-sys-elevation-level2);
}

/* Filled */
.md-card--filled {
    background-color: var(--md-sys-color-surface-container-highest);
    box-shadow:       var(--md-sys-elevation-level0);
}
.md-card--filled:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

/* Outlined */
.md-card--outlined {
    background-color: var(--md-sys-color-surface);
    border:           1px solid var(--md-sys-color-outline-variant);
    box-shadow:       var(--md-sys-elevation-level0);
}
.md-card--outlined:hover {
    box-shadow: var(--md-sys-elevation-level1);
}

.md-card__header {
    display:         flex;
    flex-direction:  column;
    gap:             4px;
    padding:         16px 16px 0;
}

.md-card__headline {
    font-family:    var(--md-sys-typescale-title-large-font);
    font-size:      var(--md-sys-typescale-title-large-size);
    font-weight:    var(--md-sys-typescale-title-large-weight);
    line-height:    var(--md-sys-typescale-title-large-line-height);
    letter-spacing: var(--md-sys-typescale-title-large-tracking);
    color:          var(--md-sys-color-on-surface);
}

.md-card__subhead {
    font-family:    var(--md-sys-typescale-body-medium-font);
    font-size:      var(--md-sys-typescale-body-medium-size);
    font-weight:    var(--md-sys-typescale-body-medium-weight);
    line-height:    var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
    color:          var(--md-sys-color-on-surface-variant);
}

.md-card__content {
    padding: 16px;
    font-family:    var(--md-sys-typescale-body-medium-font);
    font-size:      var(--md-sys-typescale-body-medium-size);
    font-weight:    var(--md-sys-typescale-body-medium-weight);
    line-height:    var(--md-sys-typescale-body-medium-line-height);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.md-card__actions {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 8px 8px;
    flex-wrap:       wrap;
}