/* =========================================================
   Studio Huevo
   Legacy System Lab
   Base Design System
   ========================================================= */


/* =========================================================
   01. Design Tokens
   ========================================================= */

:root {

    /* -------------------------
       Colors
       ------------------------- */

    --color-white: #ffffff;
    --color-black: #0f172a;

    --color-bg: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-blue: #eff6ff;

    --color-text: #172033;
    --color-text-secondary: #64748b;
    --color-text-light: #94a3b8;

    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;

    --color-accent: #06b6d4;

    --color-border: #dbe3ef;
    --color-border-light: #e8eef5;


    /* -------------------------
       Typography
       ------------------------- */

    --font-sans:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    --font-mono:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        Consolas,
        monospace;


    /* -------------------------
       Container
       ------------------------- */

    --container-width: 1200px;
    --container-padding: 24px;


    /* -------------------------
       Spacing
       ------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;


    /* -------------------------
       Border Radius
       ------------------------- */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;


    /* -------------------------
       Shadow
       ------------------------- */

    --shadow-sm:
        0 4px 16px rgba(23, 32, 51, 0.06);

    --shadow-md:
        0 12px 32px rgba(23, 32, 51, 0.08);


    /* -------------------------
       Transition
       ------------------------- */

    --transition-fast:
        0.2s ease;

    --transition-normal:
        0.3s ease;

}


/* =========================================================
   02. Reset
   ========================================================= */

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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--color-bg);
    color: var(--color-text);

    font-family: var(--font-sans);

    font-size: 16px;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;

    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}


/* =========================================================
   03. Typography
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--space-5);

    color: var(--color-text);

    font-weight: 800;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.2;

    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;

    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.4;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.5;
}

p {
    margin-bottom: var(--space-5);
}

.text-muted {
    color: var(--color-text-secondary);
}

.text-small {
    font-size: 0.875rem;
}

.text-mono {
    font-family: var(--font-mono);
}


/* =========================================================
   04. Utility
   ========================================================= */

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.hidden {
    display: none !important;
}


/* =========================================================
   05. Technical Grid
   ========================================================= */

.tech-grid {
    background-image:
        linear-gradient(
            rgba(37, 99, 235, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.05) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* =========================================================
   06. Images / Media
   ========================================================= */

figure {
    margin: 0;
}

svg {
    display: block;
}


/* =========================================================
   07. Focus
   ========================================================= */

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
}


/* =========================================================
   08. Selection
   ========================================================= */

::selection {
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-text);
}