/* metrics */
:root {
    --the-unit-fullrow: var(--the-unit-8x);
}

/* typography */
@font-face {
    font-family: "regular";
    src: url("Circular-Regular.woff2") format("woff2");
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "book";
    src: url("Circular-Book.woff2") format("woff2");
    font-display: swap;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "medium";
    src: url("Circular-Medium.woff2") format("woff2");
    font-display: swap;
    text-rendering: optimizeLegibility;
}

:root {
    --the-ff-content: "regular";
    --the-ff-ui: "medium";
    --the-ff-action: "medium";
    --the-ff-header: "book"; /* fake the */
}

input, .the-box {
    font-family: var(--the-ff-content); /* unlike business apps*/
}

body {
    font-family: var(--the-ff-content); /* could avoid this with more semantic use of tags */
}

figcaption {
    font-family: var(--the-ff-ui); /* should probably be in the framework */
}

p {
    line-height: 1.3;
}

header, h1, h2, h3, h4, h5, h6 {
    font-family: var(--the-ff-header);
}

h3 {
    font-size: clamp(18px, 2vw, 30px);
}

h4 {
    font-size: clamp(18px, 2vw, 30px);
}

h5 {
    font-size: clamp(16px, 2vw, 20px);
}

h6 {
    font-size: 14px;
}

/* colour */
:root {
    /* adapted from lypa's "black" to "white" ramp"*/
    --the-hue-neutral-0: #ffffff; /* background of fields & active widgets */
    --the-hue-neutral-1: rgba(0,0,0,0.03); /* background of content regions & disabled widgets */
    --the-hue-neutral-2: rgba(0,0,0,0.1); /* deemphasised text, separators */
    --the-hue-neutral-3: rgba(0,0,0,0.2); /* embedded bars */
    --the-hue-neutral-4: rgba(0,0,0,0.5); /* bars, field borders */
    --the-hue-neutral-5: rgba(0,0,0,0.75);
    --the-hue-neutral-6: #111111; /* most text, including fields */

    /* based on "sand" from eco theme */
    --the-hue-chrome-0: #ffffff; /* orig #f8fafb */
    --the-hue-chrome-1: #f2f0eb; /* lypa light, orig #e6e4dc */
    --the-hue-chrome-2: #c2b9a0;
    --the-hue-chrome-3: #9a9178;
    --the-hue-chrome-4: #736a53;
    --the-hue-chrome-5: #4b4639;
    --the-hue-chrome-6: #252521;

    /* lypa's flat red*/
    --the-hue-action-0: #ebe0ce; /* action background - used by buttons, but changed boxes are still neutral */
    --the-hue-action-1: #ebe0ce; 
    --the-hue-action-2: #ebe0ce;
    --the-hue-action-3: #e5473c; /* borders of potential action - changed boxes, button chrome */
    --the-hue-action-4: #e5473c; /* text describing potential action */
    --the-hue-action-5: #e5473c;
    --the-hue-action-6: #e5473c; /* action is actively occurring */

    /* lypa's flat plum */
    --the-hue-success-0: #ffffff;
    --the-hue-success-1: #ffffff; 
    --the-hue-success-2: #ffffff;
    --the-hue-success-3: #59363e;
    --the-hue-success-4: #59363e;
    --the-hue-success-5: #59363e;
    --the-hue-success-6: #59363e;

    /* lypa's flat black */
    --the-hue-info-0: #ffffff;
    --the-hue-info-1: #ffffff; 
    --the-hue-info-2: #ffffff;
    --the-hue-info-3: #111111;
    --the-hue-info-4: #111111;
    --the-hue-info-5: #111111;
    --the-hue-info-6: #111111;
}

/* shell */
body {
    background: var(--the-hue-chrome-1); /* same as shells */
}

/* xxx should be on index, but not nested */
form {
    flex: 1;
    max-width: 500px;
}

/* widgets */
:root {
    --the-box-stroke: var(--the-hue-neutral-2)
}

.the-box {
    border-radius: var(--the-unit-4x);
    padding: var(--the-unit-1x) var(--the-unit-2x);
    font-weight: normal !important;
}

.the-box-input[type=text], .the-box-input[type=search], .the-box-input[type=password], .the-box-input[type=email] {
    padding: var(--the-unit-1x) var(--the-unit-2x);
}

.the-box:hover:not([readonly]), .the-box:focus-visible:not([readonly]) {
    --the-box-stroke: var(--the-hue-neutral-4);
    border-width: 1px;
}

::placeholder {
    opacity: 0.5;
}

::selection {
    background-color: var(--the-hue-action-4);
    color: var(--the-hue-action-0);
}

/* flat-colour buttons, shaded only when active */
.the-action-button {
    border-radius: var(--the-unit-4x);
    padding: 0 var(--the-unit-4x);
    display: flex;
    align-items: center;
    gap: var(--the-unit-2x);
    
    background: var(--the-hue-neutral-0);
    border: solid 2px var(--the-button-content-dark);
    color: var(--the-button-content-dark);

    transition: all .2s ease-out;
}

.the-action-button:not([disabled]):hover, .the-action-button:not([disabled]):focus-visible, .the-action-button:not([disabled]):active {
    background-color: var(--the-button-content-dark);
    border-color: var(--the-button-content-dark);
    color: var(--the-button-fill-light);
}

.the-action-button--primary:not([disabled]) {
    background: var(--the-button-content-dark);
    border-color: var(--the-button-content-dark);
    color: var(--the-button-fill-light);
}

.the-action-button--primary[disabled] {
    background-color: var(--the-button-content-dark);
    border-color: var(--the-button-content-dark);
    color: var(--the-hue-neutral-0);
}

.the-action-button--primary:not([disabled]):hover, .the-action-button--primary:not([disabled]):focus-visible, .the-action-button--primary:not([disabled]):active {
    background-color: var(--the-hue-neutral-0);
    border-color: var(--the-button-content-dark);
    color: var(--the-button-content-dark);
}

@media (orientation: portrait), (max-width: 719px) {
    :root {
        font-size: 13px;
        --the-unit-fullrow: calc(var(--the-unit) * 6);
    }
    
    .the-action-button {
        padding: 0 var(--the-unit-2x);        
        gap: var(--the-unit-1x);
    }
}