/**
 * Hoqmail — Design tokens
 *
 * The single source of truth for every visual decision in the theme.
 * Nothing below this file may hard-code a colour, a font size or a spacing
 * value; components compose these tokens instead.
 *
 * Colour contrast (WCAG 2.1 AA) was measured, not guessed:
 *   brand      on tint     2.40:1  -> decorative surfaces only, never text
 *   brand-ink  on tint     4.54:1  -> passes AA, used for icons and small text
 *   action     on white   11.51:1  -> primary buttons
 *
 * Type scale follows a named ramp (headline / body / caption) so that every
 * text element maps to a token instead of an arbitrary pixel value.
 */

:root {
    /* ---------------------------------------------------------------
       Brand
       --------------------------------------------------------------- */
    --color-brand: #f47b20;          /* sampled from the logo mark        */
    --color-brand-ink: #ab5616;      /* darkened for AA-compliant text    */
    --color-brand-tint: #feeedf;     /* panel surface                     */

    /* ---------------------------------------------------------------
       Surfaces and text
       --------------------------------------------------------------- */
    --color-bg: #fffbf4;
    --color-surface: #ffffff;
    --color-surface-alt: #faf7f0;
    --color-border: #e4ded2;

    --color-text: #4c4c5c;           /* matches the logo wordmark exactly */
    --color-text-strong: #2b2b38;
    --color-text-muted: #83838f;

    /* ---------------------------------------------------------------
       Action and status
       --------------------------------------------------------------- */
    --color-action: #313a46;
    --color-action-hover: #232a33;
    --color-action-contrast: #ffffff;

    /*
     * Destructive actions. This is the red of the Boron theme's wishlist
     * button (#ed6060), which is an outlined button rather than a filled one:
     * the colour carries both the label and the border, and the fill only
     * arrives on hover.
     *
     * The original is too pale to carry text -- #ed6060 reads at 3.26:1 on
     * white, below the 4.5:1 a label needs -- so the hue is kept and the
     * lightness lowered. Saturation is held at 62% rather than the original
     * 80%: darkening at full saturation turns the soft red into a pure,
     * alarming one, and this button moves mail to the trash, where it stays.
     */
    --color-danger: #d34343;         /* label and border, 4.51:1 on white */
    --color-danger-bg: #fbecec;      /* notices, menu hover */
    --color-danger-fill: #c22d2d;    /* hover fill, as Boron fills on hover */
    --color-danger-on-fill: #ffffff; /* 5.66:1 on that fill */

    /*
     * The one green in the palette: reserved for fetching new mail, so the
     * action reads as "go and get" rather than as another neutral control.
     *
     * This is the sage green of the Boron theme (#669776, hue 140deg,
     * saturation 19%) kept at the same hue and saturation but darkened.
     * The original carries white label text at only 3.36:1, below the 4.5:1
     * the text needs; this value reaches 4.93:1 while staying in the same
     * colour family.
     */
    --color-positive: #52795e;
    --color-positive-hover: #476a53;

    --color-focus: #f47b20;

    /* ---------------------------------------------------------------
       Typography
       --------------------------------------------------------------- */
    --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --fs-h1: clamp(34px, 28.857px + 1.607vw, 52px);
    --fs-h2: clamp(30px, 26px + 1.25vw, 44px);
    --fs-h3: clamp(28px, 25.714px + 0.714vw, 36px);
    --fs-h4: clamp(23px, 20.429px + 0.804vw, 32px);
    --fs-h5: clamp(20px, 18.571px + 0.446vw, 25px);
    --fs-h6: clamp(16px, 15.143px + 0.268vw, 19px);
    --fs-body-1: clamp(19px, 18.714px + 0.089vw, 20px);
    --fs-body-2: 17px;
    --fs-body-3: 15px;
    --fs-caption: 12px;

    --lh-tight: 1.1;
    --lh-snug: 1.2;
    --lh-normal: 1.3;
    --lh-relaxed: 1.5;
    --lh-loose: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --tracking-tight: -0.02em;

    /* ---------------------------------------------------------------
       Space — 4px base, used for every margin, padding and gap
       --------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* ---------------------------------------------------------------
       Shape and depth
       The offset shadow is the signature of the current design: a hard,
       un-blurred drop with no opacity fade.
       --------------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    --shadow-offset: 4px 5px 0 var(--color-border);
    --shadow-offset-brand: 5px 6px 0 var(--color-brand);
    --shadow-menu: 0 6px 24px rgba(43, 43, 56, 0.12);

    /* ---------------------------------------------------------------
       Layout
       --------------------------------------------------------------- */
    --container-max: 1240px;
    --container-pad: var(--space-4);

    /*
     * Logo sizing.
     *
     * The source image is 375x84 (4.46:1), cropped to its ink bounds, so these
     * heights are the height actually seen on screen; width follows the ratio.
     *
     * --logo-height-bar sits at ~44% of --topbar-height, which keeps the mark
     * legible without crowding the bar. It is a round pixel value on purpose:
     * deriving it with calc() would land on a fraction and scale a raster logo
     * onto half pixels.
     */
    --logo-height-bar: 30px;
    --topbar-height: 68px;

    /* The landing mark tracks the headline instead, so brand and h1 grow together. */
    --logo-height-hero: clamp(28px, 21.23px + 1.442vw, 42px);

    /* ---------------------------------------------------------------
       Motion — honoured only when the visitor allows it (see base.css)
       --------------------------------------------------------------- */
    --transition-fast: 120ms ease;
}

@media (min-width: 768px) {
    :root {
        --container-pad: var(--space-6);
    }
}

/**
 * Dark appearance.
 *
 * Follows the reader's system setting; there is no switch, because a switch
 * needs somewhere to remember the choice and the operating system already
 * knows it.
 *
 * Every value was measured against its background rather than dimmed by eye.
 * The nine text pairings the interface actually uses all clear 4.5:1, the
 * lowest being secondary text at 5.55:1.
 *
 * Two colours cannot simply be reused from the light palette:
 *   - the brand ink is darkened for light backgrounds, so a lighter tone of
 *     the same orange carries text here (8.05:1);
 *   - the primary action is near-black on light, which would vanish, so it
 *     inverts to a near-white surface with dark text (14.17:1).
 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #16161c;
        --color-surface: #1e1e26;
        --color-surface-alt: #26262f;
        --color-border: #33333f;

        --color-text: #c9c9d4;
        --color-text-strong: #f0f0f5;
        --color-text-muted: #9494a6;

        --color-brand-ink: #f0a468;
        --color-brand-tint: #2a1f16;

        --color-action: #e9e9f0;
        --color-action-hover: #ffffff;
        --color-action-contrast: #1b1b22;

        --color-positive: #7fb08c;
        --color-positive-hover: #96c2a1;

        /*
         * On a dark surface the pale original works as-is: this is #ed6060's
         * hue and saturation at 4.50:1 against #1e1e26. The hover fill cannot
         * follow Boron here -- white on a light red fails on dark -- so it
         * stays a tint and the label keeps the red.
         */
        --color-danger: #d95e5e;
        --color-danger-bg: #261515;
        --color-danger-fill: #261515;
        --color-danger-on-fill: #d95e5e;  /* 4.76:1 on that tint */

        color-scheme: dark;
    }
}