/*
 * AROBOS front-end design tokens
 *
 * Phase 1: these values intentionally mirror the current visual design.
 * Components can now consume the semantic tokens below without changing
 * today’s appearance. Brand palette/font decisions can be changed here later.
 */

/* Teko is self-hosted (SIL Open Font License 1.1). */
@font-face {
    font-family: "Teko";
    src: url("../font/teko-latin-600.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/* Inter 900 for the contact hero (SIL Open Font License 1.1). */
@font-face {
    font-family: "Inter";
    src: url("../font/inter-latin-900.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    src: url("../font/inter-latin-ext-900.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    src: url("../font/inter-cyrillic-900.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    /* ── Core colors ───────────────────────────────────────────── */
    --color-ink: #141516;
    --color-ink-strong: #0c0c0d;
    --color-body: #3f463d;
    --color-body-soft: #45474f;
    --color-muted: #5f6b5a;
    --color-subtle: #7c8578;

    --color-surface: #ffffff;
    --color-surface-soft: #f6f7f2;
    --color-surface-muted: #f3f5f6;
    --color-surface-page: #fafafa;
    --color-surface-hover: #ebebeb;
    --color-surface-placeholder: #f5f5f5;
    --color-dark: #1a1a1a;
    --color-border: #e2e8dc;
    --color-border-strong: #c9d3c1;
    --color-border-subtle: #e5e5e5;
    --color-border-muted: #e5e7eb;
    --color-border-faint: #eeeeee;
    --color-border-soft: #dfe5d9;
    --color-meta: #667085;
    --color-text-neutral: #6b7280;
    --color-text-faint: #9ca3af;
    --color-text-placeholder: #b0b0b0;
    --color-on-brand: #141516;
    --color-on-action: #ffffff;
    --color-icon-muted: #cccccc;

    --color-brand: #9eef0b;
    --color-brand-hover: #8cd906;
    --color-brand-dark: #7dbf09;
    --color-brand-ink: #4d7c0f;
    --color-brand-soft: rgba(158, 239, 11, .14);
    --color-brand-wash: #f3f7eb;

    /* Action = quote/CTA orange; price is kept separate by design. */
    --color-action: #e8590c;
    --color-action-hover: #d9480f;
    --color-price: #e8590c;
    --color-accent: #ff7a00;

    --color-success: #198754;
    --color-warning: #f0ad4e;
    --color-danger: #dc3545;
    --color-contact-accent: #a6c47a;
    --color-contact-title: #d9ded4;
    --color-whatsapp: #25d366;
    --color-wechat: #07c160;
    --color-focus: #2563eb;
    --color-header-text: #4b5546;
    --color-link-hover: #3c5f0b;
    --color-placeholder-soft: #adb5bd;

    /* ── Typography ────────────────────────────────────────────── */
    --font-body: "Plus Jakarta Sans", var(--font-cjk);
    --font-heading: "NEARING", var(--font-cjk);
    --font-display: "Teko", "Arial Narrow", sans-serif;
    --font-contact-display: "Inter", "Plus Jakarta Sans", sans-serif;
    --font-admin: "Microsoft YaHei", Arial, sans-serif;

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;

    --leading-display: .98;
    --leading-tight: 1.15;
    --leading-title: 1.25;
    --leading-body: 1.7;

    --tracking-display: .01em;
    --tracking-label: .2em;

    /* ── Spacing and layout ────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;

    --section-y: clamp(56px, 6vw, 88px);
    --section-y-sm: clamp(36px, 4vw, 56px);
    --container-max: 1320px;
    --container-gutter: 24px;

    /* ── Shape and elevation ───────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-card: clamp(8px, .781vw, 30px);
    --radius-pill: 999px;

    --shadow-card: 0 1px 0 rgba(20, 21, 22, .02), 0 10px 24px rgba(20, 21, 22, .05);
    --shadow-card-hover: 0 16px 36px rgba(20, 21, 22, .10);
    --shadow-brand: 0 8px 25px rgba(158, 239, 11, .5);
}