/* =============================================================================
   Pinnacle of All Trades — Main Stylesheet
   Material Design 3 token system + confirmed brand palette
   ============================================================================= */

/* MD3 colour tokens — mapped to Pinnacle brand palette */
:root {
    /* Brand primitives */
    --pinnacle-navy:  #1A2744;
    --pinnacle-amber: #D4AF37;
    --pinnacle-cream: #F9F7F2;
    --pinnacle-white: #FFFFFF;

    /* MD3 system colour roles */
    --md-sys-color-primary:            var(--pinnacle-navy);
    --md-sys-color-on-primary:         var(--pinnacle-white);
    --md-sys-color-on-primary-muted:   rgba(255, 255, 255, 0.72); /* tagline / secondary text on primary */
    --md-sys-color-on-primary-subtle:  rgba(255, 255, 255, 0.56); /* tertiary text on primary */
    --md-sys-color-primary-container:  #2C3F6B; /* navy lightened */
    --md-sys-color-on-primary-container: #D4E0FF;

    --md-sys-color-secondary:          var(--pinnacle-amber);
    --md-sys-color-on-secondary:       var(--pinnacle-navy);
    --md-sys-color-secondary-container: #F0D97A;
    --md-sys-color-on-secondary-container: var(--pinnacle-navy);

    --md-sys-color-surface:            var(--pinnacle-cream);
    --md-sys-color-on-surface:         var(--pinnacle-navy);
    --md-sys-color-surface-variant:    #EAE8E2;
    --md-sys-color-on-surface-variant: #44473F;

    --md-sys-color-background:         var(--pinnacle-cream);
    --md-sys-color-on-background:      var(--pinnacle-navy);

    --md-sys-color-outline:            #74776E;
    --md-sys-color-outline-variant:    #C4C7BE;

    /* MD3 typography scale */
    --md-sys-typescale-display-font:   'Montserrat', sans-serif;
    --md-sys-typescale-body-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --md-sys-typescale-display-large-size:   57px;
    --md-sys-typescale-display-large-line:   64px;
    --md-sys-typescale-display-large-weight: 700;
    --md-sys-typescale-display-large-tracking: -0.025em;

    --md-sys-typescale-display-medium-size:   45px;
    --md-sys-typescale-display-medium-line:   52px;
    --md-sys-typescale-display-medium-weight: 700;
    --md-sys-typescale-display-medium-tracking: -0.02em;

    --md-sys-typescale-headline-large-size:   32px;
    --md-sys-typescale-headline-large-line:   40px;
    --md-sys-typescale-headline-large-weight: 700;

    --md-sys-typescale-title-medium-size:   16px;
    --md-sys-typescale-title-medium-line:   24px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-tracking: 0.015em;

    --md-sys-typescale-label-large-size:    14px;
    --md-sys-typescale-label-large-line:    20px;
    --md-sys-typescale-label-large-weight:  500;
    --md-sys-typescale-label-large-tracking: 0.1em;

    --md-sys-typescale-body-large-size:   16px;
    --md-sys-typescale-body-large-line:   28px;
    --md-sys-typescale-body-large-weight: 400;

    --md-sys-typescale-body-medium-size:   14px;
    --md-sys-typescale-body-medium-line:   20px;
    --md-sys-typescale-body-medium-weight: 400;

    /* MD3 shape tokens */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small:       8px;
    --md-sys-shape-corner-medium:      12px;
    --md-sys-shape-corner-large:       16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full:        9999px;

    /* MD3 elevation (box-shadow) */
    --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);

    /* Spacing — 8dp grid */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
}

/* =============================================================================
   Reset
   ============================================================================= */

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

html, body {
    height: 100%;
}

/* =============================================================================
   Base
   ============================================================================= */

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

/* =============================================================================
   Coming soon page
   ============================================================================= */

.coming-soon {
    min-height: 100vh;
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
}

.coming-soon__container {
    max-width: 640px;
    width: 100%;
}

/* Label — MD3 Label Large, all caps, amber */
.coming-soon__label {
    display: inline-block;
    font-family: var(--md-sys-typescale-body-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);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    text-transform: uppercase;
    color: var(--md-sys-color-secondary);
    margin-bottom: var(--space-2);
}

/* Headline — sits below founder name as the platform name */
.coming-soon__headline {
    font-family: var(--md-sys-typescale-display-font);
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: var(--md-sys-typescale-display-medium-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--md-sys-color-secondary);
    margin: 0;
}

/* Body paragraphs */
.coming-soon__body {
    margin-bottom: var(--space-3);
}

.coming-soon__body p {
    font-family: var(--md-sys-typescale-body-font);
    font-size: clamp(var(--md-sys-typescale-body-large-size), 2.5vw, 18px);
    font-weight: var(--md-sys-typescale-body-large-weight);
    line-height: 1.75;
    color: var(--md-sys-color-on-primary-muted);
    margin: 0 0 var(--space-3);
}

.coming-soon__body p:last-child {
    margin-bottom: 0;
}

/* Divider — amber accent line */
.coming-soon__divider {
    width: 40px;
    height: 3px;
    background-color: var(--md-sys-color-secondary);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    margin: 0 auto var(--space-3);
}

/* Founder attribution — photo left, name + platform name right, centred in container */
.coming-soon__attribution {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    text-align: left;
}

.coming-soon__attribution-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.coming-soon__avatar {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: var(--md-sys-shape-corner-full);
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--md-sys-color-secondary);
}

/* Founder name */
.coming-soon__founder {
    font-family: var(--md-sys-typescale-body-font);
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: var(--md-sys-typescale-title-medium-weight);
    color: var(--md-sys-color-on-primary);
    margin: 0;
}