/* ================================
   Design Tokens
   ================================ */
:root {
    /* Brand palette */
    --color-orange: #EB6F3A;
    --color-orange-light: #DC7C54;

    --color-red: #EB483A;
    --color-red-light: #DC5E54;

    /* Theme */
    --color-background: #D83924;
    --color-primary: #420A0A;
    /* primary text on background */
    --color-secondary: #E6CDCD;

    --color-accent: var(--color-red);
    --color-on-accent: #FFFFFF;
    /* text on accent */
    --color-warm-text: #A40B0B;
    /* text on warm gradients */

    /* Typography */
    --font-family: "Futura", "Gill Sans", "Gill Sans MT", "Roboto", "Helvetica", sans-serif;
    --font-size-xs: 12px;
    --letter-wide-1: 1px;
    --leading-tight: 1;

    /* Spacing scale */
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-32: 32px;
    --space-64: 64px;
    --space-128: 128px;

    /* Sizes */
    --size-logo-max: 300px;
    --size-button-h: 128px;
    --size-column-h: 80px;
    --size-icon-md: 48px;
    --size-icon-sm: 32px;
    --size-col-first: 64px;

    /* Radii */
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-64: 64px;

    /* Elevation / effects */
    --shadow-strong: 2px 3px 5px 1px rgba(0, 0, 0, 0.17),
        0px 1px 1px 1px rgba(0, 0, 0, 0.25),
        2px 2px 8px #C62717,
        inset -0.5px -0.5px 1px #AF1000,
        inset 0px 1px 1px #FF8E6F;

    /* Gradients */
    --grad-warm: linear-gradient(148.98deg, #FF9066 0%, #ED4C1C 101.95%);
    --grad-deep: linear-gradient(175deg, #F55742 0%, #AF1000 100%);

    /* Misc */
    --muted-white-60: rgba(255, 255, 255, 0.6);
    --muted-white-80: rgba(255, 255, 255, 0.8);
}

/* ================================
   Reset / Base
   ================================ */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: none;
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-primary);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    margin: 0 auto;
    padding: var(--space-32);

    height: 100vh;
}

/* ================================
   Typography
   ================================ */
a {
    color: var(--color-accent);
}

p {
    margin-bottom: var(--space-16);
    font-style: italic;
    color: var(--muted-white-60);
}

/* ================================
   Layout Blocks
   ================================ */
#logo {
    max-width: var(--size-logo-max);
    margin-bottom: var(--space-32);
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    margin-bottom: var(--space-32);
}

.controls {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);

    width: 100%;
    margin-bottom: var(--space-32);
}

.columns {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: var(--space-128);
}

form {
    margin-bottom: var(--space-16);
}

/* ================================
   Buttons / Interactive
   ================================ */
button,
.contact {
    width: auto;
    height: var(--size-button-h);
    padding: var(--space-16);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    text-align: center;
    font-family: var(--font-family);
    font-weight: normal;
    font-size: var(--font-size-xs);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    letter-spacing: var(--letter-wide-1);

    border: none;
    border-radius: var(--radius-12);

    color: var(--color-warm-text);
    background: var(--grad-warm);
    box-shadow: var(--shadow-strong);

    flex: none;
    order: 0;
    flex-grow: 1;
}

button img {
    width: var(--size-icon-md);
    height: var(--size-icon-md);
}

/* Secondary / wide actions */
.contact,
#reset {
    width: 100%;
    height: auto;
    padding: var(--space-16);

    color: var(--muted-white-80);
    background: var(--grad-deep);
    box-shadow: var(--shadow-strong);
    border-radius: var(--radius-64);
}

/* ================================
   Columns / Chips
   ================================ */
.column {
    width: fit-content;
    height: var(--size-column-h);
    padding: var(--space-12);
    margin-bottom: var(--space-16);

    display: flex;
    justify-content: space-between;
    align-items: center;

    text-align: left;
    font-family: var(--font-family);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    letter-spacing: var(--letter-wide-1);

    border: none;
    border-radius: var(--radius-8);

    color: var(--color-on-accent);
    background: var(--grad-warm);
    box-shadow: var(--shadow-strong);
    border-radius: var(--radius-12);
}

.column span:first-child {
    width: var(--size-col-first);
    margin-right: var(--space-16);
}

.column img {
    height: var(--size-icon-sm);
}

.column span:last-child {
    opacity: 0.5;
    font-weight: bold;
}