/**
 * K0 – Functional Design Grammar
 * Core System
 * * @version 2.1.0 (Lite Version)
 * @author Santiago Bustelo
 * @license MIT
 */

/* ==================================================================
   RESET BASE 
   ================================================================== */
.k0, .k0 *, .k0 *::before, .k0 *::after {
    box-sizing: border-box;
}

.k0 {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.k0 :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
}

.k0 ul[role="list"], .k0 ol[role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k0 :is(h1, h2, h3, h4, h5, h6, button, input, label) {
    line-height: 1.1;
}

.k0 :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

.k0 :is(img, picture) {
    max-width: 100%;
    display: block;
}

.k0 :is(input, button, textarea, select) {
    font-family: inherit;
    font-size: inherit;
}

.k0 textarea:not([rows]) {
    min-height: 10em;
}

.k0 :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote, div, span) {
    text-wrap: pretty;
}

.k0 address {
    font-style: inherit;
}

.k0 abbr[title] {
    text-decoration: none;
    cursor: help;
}

.k0 :is(b, strong) {
    font-weight: 600;
}

.k0 :is(code, kbd, samp, pre) {
    font-family: var(--k0-font-mono);
}

/* ==================================================================
   UNIVERSAL VARIABLES
   ================================================================== */
.k0 {
    font-size: 16px;

    /* TYPOGRAPHIC SCALE */
    --k0-pt-6: 0.5rem;
    --k0-pt-7: 0.574rem;
    --k0-pt-8: 0.66rem;
    --k0-pt-9: 0.758rem;
    --k0-pt-10: 0.871rem;
    --k0-pt-11: 0.935rem;
    --k0-pt-12: 1rem;
    --k0-pt-14: 1.149rem;
    --k0-pt-16: 1.32rem;
    --k0-pt-18: 1.516rem;
    --k0-pt-21: 1.741rem;
    --k0-pt-24: 2rem;
    --k0-pt-28: 2.297rem;
    --k0-pt-32: 2.639rem;
    --k0-pt-36: 3.031rem;
    --k0-pt-42: 3.482rem;
    --k0-pt-48: 4rem;
    --k0-pt-56: 4.595rem;
    --k0-pt-64: 5.278rem;
    --k0-pt-72: 6.063rem;
    --k0-pt-84: 6.964rem;
    --k0-pt-96: 8rem;
    --k0-pt-112: 9.19rem;
    --k0-pt-128: 10.556rem;
    --k0-pt-144: 12.126rem;
    --k0-pt-168: 13.929rem;
    --k0-pt-192: 16.000rem;
    --k0-pt-224: 18.379rem;
    --k0-pt-256: 21.112rem;

    /* TYPOGRAPHY STACKS */
    --k0-font-base: system-ui, -apple-system, sans-serif;
    --k0-font-text: serif;
    --k0-font-mono: 'Courier New', monospace;

    /* DEFAULTS */
    --k0-color-paperx: #ffffff;
    --k0-color-paper: #F1F1F1;
    --k0-color-accent-1-i:#515151;
    --k0-color-accent-1-p: #cacaca;
    --k0-color-accent-1: #767676;
    --k0-color-accent-1-ii: #2e2e2e;
    --k0-color-accent-1-pp: #e6e6e6;
    --k0-color-ink: #0D0D0D;
    --k0-color-inkx: #000000;

    /* DYNAMIC POINTERS */
    --k0-var-accent-pp: var(--k0-color-accent-1-pp);
    --k0-var-accent-p: var(--k0-color-accent-1-p);
    --k0-var-accent: var(--k0-color-accent-1);
    --k0-var-accent-i: var(--k0-color-accent-1-i);
    --k0-var-accent-ii: var(--k0-color-accent-1-ii);

    /* LINK */
    --k0-color-link-on-paper: #0066ff;
    --k0-color-link-on-ink: #00ccff;

    /* CONTEXTUAL VARIABLES */
    --k0-this-paper: var(--k0-color-paper);
    --k0-this-ink: var(--k0-color-ink);
    --k0-this-accent: var(--k0-var-accent-i);
    --k0-this-link: var(--k0-color-link-on-paper);
    --k0-this-paperx: var(--k0-color-paperx);
    --k0-this-inkx: var(--k0-color-inkx);

    /* RELATIVE GRAYS */
    --k0-gray-50: color-mix(in oklab, var(--k0-this-paper) 98%, var(--k0-this-ink) 2%);
    --k0-gray-100: color-mix(in oklab, var(--k0-this-paper) 95%, var(--k0-this-ink) 5%);
    --k0-gray-200: color-mix(in oklab, var(--k0-this-paper) 90%, var(--k0-this-ink) 10%);
    --k0-gray-300: color-mix(in oklab, var(--k0-this-paper) 82%, var(--k0-this-ink) 18%);
    --k0-gray-400: color-mix(in oklab, var(--k0-this-paper) 60%, var(--k0-this-ink) 40%);
    --k0-gray-500: color-mix(in oklab, var(--k0-this-paper) 50%, var(--k0-this-ink) 50%);
    --k0-gray-600: color-mix(in oklab, var(--k0-this-paper) 40%, var(--k0-this-ink) 60%);
    --k0-gray-700: color-mix(in oklab, var(--k0-this-paper) 18%, var(--k0-this-ink) 82%);
    --k0-gray-800: color-mix(in oklab, var(--k0-this-paper) 10%, var(--k0-this-ink) 90%);
    --k0-gray-900: color-mix(in oklab, var(--k0-this-paper) 5%, var(--k0-this-ink) 95%);

    /* SPACING & UTILITIES */
    --k0-space-xs: 0.25rem;
    --k0-space-sm: 0.5rem;
    --k0-space-md: 1rem;
    --k0-space-lg: 1.5rem;
    --k0-space-xl: 2rem;
    --k0-space-2xl: 3rem;
    --k0-space-3xl: 4rem;
    --k0-radius-sm: 4px;
    --k0-radius-md: 8px;
    --k0-radius-lg: 12px;
    --k0-radius-xl: 16px;
    --k0-radius-full: 9999px;
    --k0-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --k0-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --k0-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --k0-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --k0-transition-fast: 150ms ease;
    --k0-transition-base: 200ms ease;
    --k0-transition-slow: 300ms ease;

    font-family: var(--k0-font-base);
    background: var(--k0-this-paper);
    color: var(--k0-this-ink);
    line-height: 1.5;
}

/* Typographic utilities */
.k0-pt-6, .k0 .pt-6 {font-size: var(--k0-pt-6);}
.k0-pt-7, .k0 .pt-7 {font-size: var(--k0-pt-7);}
.k0-pt-8, .k0 .pt-8 {font-size: var(--k0-pt-8);}
.k0-pt-9, .k0 .pt-9 {font-size: var(--k0-pt-9);}
.k0-pt-10, .k0 .pt-10 {font-size: var(--k0-pt-10);}
.k0-pt-11, .k0 .pt-11 {font-size: var(--k0-pt-11);}
.k0-pt-12, .k0 .pt-12 {font-size: var(--k0-pt-12);}
.k0-pt-14, .k0 .pt-14 {font-size: var(--k0-pt-14);}
.k0-pt-16, .k0 .pt-16 {font-size: var(--k0-pt-16);}
.k0-pt-18, .k0 .pt-18 {font-size: var(--k0-pt-18);}
.k0-pt-21, .k0 .pt-21 {font-size: var(--k0-pt-21);}
.k0-pt-24, .k0 .pt-24 {font-size: var(--k0-pt-24);}
.k0-pt-28, .k0 .pt-28 {font-size: var(--k0-pt-28);}
.k0-pt-32, .k0 .pt-32 {font-size: var(--k0-pt-32);}
.k0-pt-36, .k0 .pt-36 {font-size: var(--k0-pt-36);}
.k0-pt-42, .k0 .pt-42 {font-size: var(--k0-pt-42);}
.k0-pt-48, .k0 .pt-48 {font-size: var(--k0-pt-48);}
.k0-pt-56, .k0 .pt-56 {font-size: var(--k0-pt-56);}
.k0-pt-64, .k0 .pt-64 {font-size: var(--k0-pt-64);}
.k0-pt-72, .k0 .pt-72 {font-size: var(--k0-pt-72);}
.k0-pt-84, .k0 .pt-84 {font-size: var(--k0-pt-84);}
.k0-pt-96, .k0 .pt-96 {font-size: var(--k0-pt-96);}
.k0-pt-112, .k0 .pt-112 {font-size: var(--k0-pt-112);}
.k0-pt-128, .k0 .pt-128 {font-size: var(--k0-pt-128);}
.k0-pt-144, .k0 .pt-144 {font-size: var(--k0-pt-144);}
.k0-pt-168, .k0 .pt-168 {font-size: var(--k0-pt-168);}
.k0-pt-192, .k0 .pt-192 {font-size: var(--k0-pt-192);}
.k0-pt-224, .k0 .pt-224 {font-size: var(--k0-pt-224);}
.k0-pt-256, .k0 .pt-256 {font-size: var(--k0-pt-256);}

@supports not (color: color-mix(in oklab, white, black)) {
    .k0 {
        --k0-gray-50: #f9fafb;
        --k0-gray-100: #f3f4f6;
        --k0-gray-200: #e5e7eb;
        --k0-gray-300: #d1d5db;
        --k0-gray-400: #9ca3af;
        --k0-gray-500: #6b7280;
        --k0-gray-600: #4b5563;
        --k0-gray-700: #374151;
        --k0-gray-800: #1f2937;
        --k0-gray-900: #111827;
    }
}

/* UTILITIES */
.k0 .k0-sr-only, .k0 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.k0 .k0-nobr, .k0 .nobr { white-space: nowrap; }
.k0 .k0-muted, .k0 .muted { opacity: 0.6; }
.k0 .k0-bold, .k0 .bold { font-weight: 700; }
.k0 .k0-semibold, .k0 .semibold { font-weight: 600; }
.k0 .k0-medium, .k0 .medium { font-weight: 500; }
.k0 .k0-light, .k0 .light { font-weight: 300; }
.k0 .k0-italic, .k0 .italic { font-style: italic; }
.k0 .k0-uppercase, .k0 .uppercase { text-transform: uppercase; }
.k0 .k0-lowercase, .k0 .lowercase { text-transform: lowercase; }

.k0 .k0-text-center, .k0 .text-center { text-align: center; }
.k0 .k0-text-right, .k0 .text-right { text-align: right; }
.k0 .k0-text-left, .k0 .text-left { text-align: left; }

.k0 .k0-text-accent, .k0 .text-accent { color: var(--k0-this-accent); }
.k0 .k0-text-muted, .k0 .text-muted { color: var(--k0-gray-500); }
.k0 .k0-text-link, .k0 .text-link, .k0 A { color: var(--k0-this-link); cursor: pointer; }
.k0 .k0-text-inkx, .k0 .text-inkx { color: var(--k0-this-inkx); }
.k0 .k0-text-paperx, .k0 .text-paperx { color: var(--k0-this-paperx); }

.k0 .k0-bg-accent, .k0 .bg-accent { background: var(--k0-this-accent); }
.k0 .k0-bg-muted, .k0 .bg-muted { background: var(--k0-gray-100); }
.k0 .k0-bg-inkx, .k0 .bg-inkx { background: var(--k0-this-inkx); }
.k0 .k0-bg-paperx, .k0 .bg-paperx { background: var(--k0-this-paperx); }

.k0 .k0-block, .k0 .block { display: block; }
.k0 .k0-inline, .k0 .inline { display: inline; }
.k0 .k0-inline-block, .k0 .inline-block { display: inline-block; }
.k0 .k0-flex, .k0 .flex { display: flex; }
.k0 .k0-grid, .k0 .grid { display: grid; }
.k0 .k0-hidden, .k0 .hidden { display: none; }

.k0 .k0-pointer, .k0 .pointer { cursor: pointer; }
.k0 .k0-not-allowed, .k0 .not-allowed { cursor: not-allowed; }
.k0 .k0-no-select, .k0 .no-select { user-select: none; }

@media (max-width: 479px) { .k0 .k0-hide-mobile, .k0 .hide-mobile { display: none !important; } }
@media (min-width: 480px) { .k0 .k0-show-mobile, .k0 .show-mobile { display: none !important; } }
@media (max-width: 767px) { .k0 .k0-hide-tablet, .k0 .hide-tablet { display: none !important; } }
@media (min-width: 768px) { .k0 .k0-show-tablet, .k0 .show-tablet { display: none !important; } }
@media (max-width: 1023px) { .k0 .k0-hide-desktop, .k0 .hide-desktop { display: none !important; } }
@media (min-width: 1024px) { .k0 .k0-show-desktop, .k0 .show-desktop { display: none !important; } }

body.k0-nobody {
    margin: 0;
    padding: 0;
}

.k0.theme-dark {
    --k0-color-inkx: #ffffff;
    --k0-color-paperx: #000000;
    --k0-color-accent-1: #767676;
    --k0-color-accent-1-p: #505050;
    --k0-color-accent-1-i: #CECECE;
    --k0-color-paper: #151515;
    --k0-color-ink: #F0F0F0;
    --k0-color-accent-1-pp: #2e2e2e;
    --k0-color-accent-1-ii: #E1E1E1;
}