/* =====================================================
   PCLab – Design System (Root)
   ===================================================== */

/* =========================
   SELF HOSTED FONTS
========================= */

/* DM Sans – Variable */
@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

/* DM Mono */
@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "DM Mono";
    src: url("../fonts/dm-mono/DMMono-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}



/* ------------------------------
   Reset & base box model
------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
}

/* ------------------------------
   Design Tokens
------------------------------ */
:root {
    /* 🎨 Colors */
    --Orange-100: #E25303FF;
    --Orange-tint-10: #E5641CFF;
    --Orange-tint-20: #E87535FF;
    --Orange-tint-30: #EB874FFF;
    --Orange-tint-40: #EE9868FF;
    --Orange-tint-50: #F1A981FF;
    --Orange-tint-60: #F3BA9AFF;
    --Orange-tint-70: #F6CBB3FF;
    --Orange-tint-80: #F9DDCDFF;
    --Orange-tint-90: #FCEEE6FF;
    --Orange-tint-95: #FEF6F2FF;
    --Orange-shade-10: #CB4B03FF;
    --Orange-shade-20: #B54202FF;
    --Orange-shade-30: #9E3A02FF;
    --Orange-shade-40: #883202FF;
    --Orange-shade-50: #712A02FF;
    --Orange-shade-60: #5A2101FF;
    --Orange-shade-70: #441901FF;
    --Orange-shade-80: #2D1101FF;
    --Orange-shade-90: #170800FF;
    --Orange-shade-95: #0B0400FF;
    --Orange-alpha-90: #E25303E5;
    --Orange-alpha-80: #E25303CC;
    --Orange-alpha-70: #E25303B2;
    --Orange-alpha-60: #E2530399;
    --Orange-alpha-50: #E2530380;
    --Orange-alpha-40: #E2530366;
    --Orange-alpha-30: #E253034D;
    --Orange-alpha-20: #E2530333;
    --Orange-alpha-10: #E253031A;
    --Orange-alpha-5: #E253030D;
    --Dark-100: #363636FF;
    --Dark-tint-10: #4A4A4AFF;
    --Dark-tint-20: #5E5E5EFF;
    --Dark-tint-30: #727272FF;
    --Dark-tint-40: #868686FF;
    --Dark-tint-50: #9B9B9BFF;
    --Dark-tint-60: #AFAFAFFF;
    --Dark-tint-70: #C3C3C3FF;
    --Dark-tint-80: #D7D7D7FF;
    --Dark-tint-90: #EBEBEBFF;
    --Dark-tint-95: #F5F5F5FF;
    --Dark-shade-10: #313131FF;
    --Dark-shade-20: #2B2B2BFF;
    --Dark-shade-30: #262626FF;
    --Dark-shade-40: #202020FF;
    --Dark-shade-50: #1B1B1BFF;
    --Dark-shade-60: #161616FF;
    --Dark-shade-70: #101010FF;
    --Dark-shade-80: #0B0B0BFF;
    --Dark-shade-90: #050505FF;
    --Dark-shade-95: #030303FF;
    --Dark-alpha-90: #363636E5;
    --Dark-alpha-80: #363636CC;
    --Dark-alpha-70: #363636B2;
    --Dark-alpha-60: #36363699;
    --Dark-alpha-50: #36363680;
    --Dark-alpha-40: #36363666;
    --Dark-alpha-30: #3636364D;
    --Dark-alpha-20: #36363633;
    --Dark-alpha-10: #3636361A;
    --Dark-alpha-5: #3636360D;
    --Bright-100: #F9F9F9FF;
    --Bright-tint-10: #FAFAFAFF;
    --Bright-tint-20: #FAFAFAFF;
    --Bright-tint-30: #FBFBFBFF;
    --Bright-tint-40: #FBFBFBFF;
    --Bright-tint-50: #FCFCFCFF;
    --Bright-tint-60: #FDFDFDFF;
    --Bright-tint-70: #FDFDFDFF;
    --Bright-tint-80: #FEFEFEFF;
    --Bright-tint-90: #FEFEFEFF;
    --Bright-tint-95: #FFFFFFFF;
    --Bright-shade-10: #E0E0E0FF;
    --Bright-shade-20: #C7C7C7FF;
    --Bright-shade-30: #AEAEAEFF;
    --Bright-shade-40: #959595FF;
    --Bright-shade-50: #7D7D7DFF;
    --Bright-shade-60: #646464FF;
    --Bright-shade-70: #4B4B4BFF;
    --Bright-shade-80: #323232FF;
    --Bright-shade-90: #191919FF;
    --Bright-shade-95: #0C0C0CFF;
    --Bright-alpha-90: #F9F9F9E5;
    --Bright-alpha-80: #F9F9F9CC;
    --Bright-alpha-70: #F9F9F9B2;
    --Bright-alpha-60: #F9F9F999;
    --Bright-alpha-50: #F9F9F980;
    --Bright-alpha-40: #F9F9F966;
    --Bright-alpha-30: #F9F9F94D;
    --Bright-alpha-20: #F9F9F933;
    --Bright-alpha-10: #F9F9F91A;
    --Bright-alpha-5: #F9F9F90D;

    --c-bg-bright: var(--Bright-100);
    --c-bg-dark: var(--Dark-100);
    --c-bg-accent: var(--Orange-100);
    --c-bg-white: #ffffff;


    --c-text: var(--Dark-100);
    --c-text-muted: var(--Dark-alpha-30);
    --c-text-inverse: var(--Bright-100);



    --c-success: #22C55E;
    --c-warning: #F59E0B;
    --c-danger: #EF4444;

    /* 🅰 Fonts */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;


    /* 🔠 Font sizes (responsive) */
    --fs-h1-d: 80px;
    --lh-h1-d: 74px;
    --fs-h2-d: 40px;
    --lh-h2-d: 1.15;
    /* "Auto" -> sensible default */
    --fs-h3-d: 24px;
    --lh-h3-d: 1.25;
    /* "Auto" */
    --fs-bc-d: 14px;
    --lh-bc-d: 1.3;
    /* "Auto" */
    --fs-md-d: 18px;
    --lh-md-d: 1.55;
    /* "Auto" */
    --fs-sm-d: 16px;
    --lh-sm-d: 1.55;
    /* "Auto" */
    --fs-li-d: 18px;
    --lh-li-d: 20px;

    /* Mobile targets (tweak if your layout needs bigger/smaller) */
    --fs-h1-m: 44px;
    --lh-h1-m: 48px;
    --fs-h2-m: 28px;
    --lh-h2-m: 32px;
    --fs-h3-m: 20px;
    --lh-h3-m: 28px;
    --fs-bc-m: 12px;
    --lh-bc-m: 16px;
    --fs-md-m: 16px;
    --lh-md-m: 26px;
    --fs-sm-m: 15px;
    --lh-sm-m: 24px;
    --fs-li-m: 16px;
    --lh-li-m: 22px;

    /* Fluid typography with clamp(min, fluid, max)
     Assumes phone ~360px and desktop ~1200px */
    --fs-h1: clamp(var(--fs-h1-m), 6vw, var(--fs-h1-d));
    --lh-h1: clamp(var(--lh-h1-m), 6vw, var(--lh-h1-d));

    --fs-h2: clamp(var(--fs-h2-m), 3.2vw, var(--fs-h2-d));
    --lh-h2: clamp(var(--lh-h2-m), 3.2vw, 46px);
    /* cap line-height */

    --fs-h3: clamp(var(--fs-h3-m), 2.2vw, var(--fs-h3-d));
    --lh-h3: clamp(var(--lh-h3-m), 2.2vw, 34px);

    --fs-bc: clamp(var(--fs-bc-m), 1.2vw, var(--fs-bc-d));
    --lh-bc: clamp(var(--lh-bc-m), 1.2vw, 20px);

    --fs-md: clamp(var(--fs-md-m), 1.6vw, var(--fs-md-d));
    --lh-md: clamp(var(--lh-md-m), 1.6vw, 32px);

    --fs-sm: clamp(var(--fs-sm-m), 1.4vw, var(--fs-sm-d));
    --lh-sm: clamp(var(--lh-sm-m), 1.4vw, 30px);

    --fs-li: clamp(var(--fs-li-m), 1.6vw, var(--fs-li-d));
    --lh-li: clamp(var(--lh-li-m), 1.6vw, var(--lh-li-d));


    /* 📐 Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ⭕ Radius */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-round: 999px;

    /* ⚡ Transitions */
    --ease-fast: 0.15s ease;
    --ease-base: 0.25s ease;
}

/* ------------------------------
   Typography
------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--ff-base);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}



/* 3) Styles mapped to elements + optional utility classes */
h1,
.t-h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    margin: 0 0 0.4em;
    letter-spacing: -0.02em;
}

h2,
.t-h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

h3,
.t-h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin: 0 0 0.6em;
}

.t-breadcrumb {
    font-size: var(--fs-bc);
    line-height: var(--lh-bc);
}

.t-md {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
}

.t-sm {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
}

.t-list-item,
li.t-list-item {
    font-size: var(--fs-li);
    line-height: var(--lh-li);
}

/* 4) Mobile fine-tuning (optional hard override)
   If you want clamp only, you can delete this block. */
@media (max-width: 480px) {

    h1,
    .t-h1 {
        letter-spacing: -0.01em;
    }
}

/* ------------------------------
   Links
------------------------------ */
a {
    color: var(--c-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--ease-fast);
}

a:hover {
    color: var(--c-brand);
}

/* ------------------------------
   Layout helpers
------------------------------ */
.container {
    width: min(100% - 2 * var(--sp-5), var(--container));
    margin-inline: auto;
}

.container--narrow {
    width: min(100% - 2 * var(--sp-5), var(--container-narrow));
}

/* ------------------------------
   Buttons
------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 40px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: var(--fs-small);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--ease-fast),
        color var(--ease-fast),
        transform var(--ease-fast),
        border-color var(--ease-fast);
}

.btn--primary {
    border-radius: 12px;
    border: 1px solid var(--Orange-shade-10, #CB4B03);
    background: var(--Orange-100, #E25303);
}

.btn--primary:hover {
    border: 1px solid var(--Orange-tint-50, #F1A981);
    background: var(--Orange-tint-60, #F3BA9A);
    transform: translateY(-1px);
}

.btn--primary:active {
    border: 1px solid var(--Orange-shade-20, #B54202);
    background: var(--Orange-shade-20, #B54202);
    box-shadow: 0 0 5px 0 #7A2C00 inset;
    transform: translateY(0);
}

.btn--primary:focus {
    border: 1px solid var(--Orange-shade-10, #CB4B03);
    background: var(--Orange-tint-30, #EB874F);
    -webkit-box-shadow: 0px 0px 1px 4px rgba(226, 83, 3, 0.4);
    -moz-box-shadow: 0px 0px 1px 4px rgba(226, 83, 3, 0.4);
    box-shadow: 0px 0px 1px 4px rgba(226, 83, 3, 0.4);
}

.btn--ghost {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text);
}

.btn--ghost:hover {
    border-color: var(--c-brand);
    color: var(--c-brand);
}

/* ------------------------------
   Cards
------------------------------ */
.card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
}

/* ------------------------------
   Utilities
------------------------------ */
.u-text-muted {
    color: var(--c-text-muted);
}

.u-text-center {
    text-align: center;
}

.u-mt-lg {
    margin-top: var(--sp-7);
}

.u-mb-lg {
    margin-bottom: var(--sp-7);
}

/* ------------------------------
   Accessibility
------------------------------ */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
}