/* ==========================================================================
   Kiili Autoremont — Design Tokens
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU NEED TO EDIT TO RE-THEME THE SITE.
   Every component reads from these custom properties.
   ========================================================================== */

:root {
    /* -- Brand palette ---------------------------------------------------
       Dark-first palette: graphite-navy base (#0e171c) with electric-blue
       accent (#039cfd). Cool off-white surfaces. See themes/ for
       alternative schemes. */
    --color-brand:          #039cfd;   /* electric sky blue, primary accent */
    --color-brand-dark:     #0578c0;   /* darker mid-blue for hover/pressed */
    --color-brand-deep:     #01194f;   /* deep navy from the palette, used in gradients */
    --color-brand-soft:     rgba(3, 156, 253, 0.10);

    --color-ink:            #0e171c;   /* graphite-navy — primary dark surface */
    --color-ink-2:          #172230;   /* lifted dark surface (cards on dark) */
    --color-ink-soft:       #1f2d38;   /* dark text on light bg */
    --color-muted:          #5e6b78;   /* cool gray for secondary text */
    --color-line:           #1c2a35;   /* hairline on dark */

    --color-bg:             #eef2f6;   /* cool off-white */
    --color-bg-2:           #e3e9ef;
    --color-paper:          #ffffff;
    --color-border:         rgba(14, 23, 28, 0.12);
    --color-border-strong:  rgba(14, 23, 28, 0.85);

    --color-on-brand:       #ffffff;
    --color-on-ink:         #eef2f6;
    --color-on-ink-muted:   rgba(238, 242, 246, 0.55);

    /* -- Gradients (subtle, adjacent-hue per UI principles) -------------- */
    --gradient-brand:       linear-gradient(135deg, #039cfd 0%, #0758b7 60%, #01194f 100%);
    --gradient-brand-soft:  linear-gradient(135deg, rgba(3,156,253,0.10) 0%, rgba(1,25,79,0.0) 70%);
    --gradient-ink:         linear-gradient(180deg, #0e171c 0%, #172230 100%);
    --gradient-glow:        radial-gradient(ellipse at 80% 20%, rgba(3,156,253,0.18) 0%, transparent 55%);

    /* -- Typography ------------------------------------------------------
       Display: Oswald (condensed, heavy) — used for hero + section heads.
       Body:    Inter — utilitarian, dense legibility.
       Mono:    JetBrains Mono — used for numbers, "EST.", section indices. */
    --font-display:         'Oswald', 'Impact', 'Helvetica Neue', sans-serif;
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:                0.75rem;    /* 12 */
    --fs-sm:                0.875rem;   /* 14 */
    --fs-base:              1rem;       /* 16 */
    --fs-lg:                1.125rem;   /* 18 */
    --fs-xl:                1.375rem;   /* 22 */
    --fs-2xl:               1.875rem;   /* 30 */
    --fs-3xl:               2.5rem;     /* 40 */
    --fs-4xl:               3.5rem;     /* 56 */
    --fs-5xl:               5rem;       /* 80 */
    --fs-6xl:               7rem;       /* 112 — hero only */

    --fw-normal:            400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;
    --fw-black:             800;

    --lh-tight:             1.08;   /* leaves headroom for Estonian diacritics (Ü Õ Ä Ö) */
    --lh-snug:              1.2;
    --lh-normal:            1.55;

    --tracking-display:     -0.02em;
    --tracking-tight:       -0.01em;
    --tracking-wide:        0.18em;     /* uppercase labels */

    /* -- Spacing scale (4 px base) -------------------------------------- */
    --space-1:              0.25rem;
    --space-2:              0.5rem;
    --space-3:              0.75rem;
    --space-4:              1rem;
    --space-5:              1.5rem;
    --space-6:              2rem;
    --space-7:              3rem;
    --space-8:              4.5rem;
    --space-9:              6.5rem;
    --space-10:             9rem;

    /* -- Layout ---------------------------------------------------------- */
    --container-max:        1240px;
    --container-px:         var(--space-5);
    --section-py:           var(--space-9);

    /* -- Radii ----------------------------------------------------------- */
    --radius-sm:            2px;        /* sharp by default */
    --radius:               4px;
    --radius-lg:            6px;
    --radius-pill:          999px;      /* reserved for small status chips */

    /* -- Borders --------------------------------------------------------- */
    --hairline:             1px solid var(--color-border);
    --hairline-strong:      1px solid var(--color-border-strong);
    --hairline-dark:        1px solid var(--color-line);

    /* -- Shadows (tighter, more architectural) -------------------------- */
    --shadow-sm:            0 1px 0 rgba(13, 15, 18, 0.06);
    --shadow:               0 2px 0 rgba(13, 15, 18, 0.08);
    --shadow-lg:            0 12px 0 -8px rgba(13, 15, 18, 0.18);

    /* -- Motion ---------------------------------------------------------- */
    --ease:                 cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration-fast:        120ms;
    --duration:             220ms;

    /* -- Header height (used for scroll-padding) ------------------------ */
    --header-h:             64px;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--color-ink);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-brand); }

img, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--color-brand); color: var(--color-on-brand); }