/* ==========================================================================
   Localtonet Docs - Design Tokens, Reset & Base Typography
   Standalone replacement for the Metronic style.bundle.css on /documents*
   ========================================================================== */

:root {
    /* Brand */
    --doc-primary: #009ef7;
    --doc-primary-hover: #0095e8;
    --doc-primary-soft: #f1faff;
    --doc-danger: #f1416c;
    --doc-success: #27ca40;

    /* Neutral scale (light) */
    --doc-gray-100: #f5f8fa;
    --doc-gray-200: #eff2f5;
    --doc-gray-300: #e4e6ef;
    --doc-gray-400: #b5b5c3;
    --doc-gray-500: #a1a5b7;
    --doc-gray-600: #7e8299;
    --doc-gray-700: #5e6278;
    --doc-gray-800: #3f4254;
    --doc-gray-900: #181c32;

    /* Semantic surfaces */
    --doc-bg: #f7f9fb;
    --doc-surface: #ffffff;
    --doc-surface-raised: #ffffff;
    --doc-aside-bg: #ffffff;
    --doc-text: #181c32;
    --doc-text-muted: #7e8299;
    --doc-border: #e4e6ef;

    /* Code surfaces (identical in both themes - always dark) */
    --doc-code-bg: #1e1e1e;
    --doc-code-border: #333333;
    --doc-code-header-bg: linear-gradient(180deg, #3c3c3c 0%, #323232 100%);
    --doc-code-header-h: 36px;
    --doc-code-text: #e4e4e4;
    --doc-code-label: #b0b0b0;
    --doc-code-scroll: #4a4a4a;
    --doc-code-scroll-hover: #5a5a5a;
    --doc-inline-code-bg: var(--doc-gray-200);
    --doc-inline-code-color: var(--doc-danger);

    /* Spacing scale (4px base) */
    --doc-sp-1: .25rem;
    --doc-sp-2: .5rem;
    --doc-sp-3: .75rem;
    --doc-sp-4: 1rem;
    --doc-sp-5: 1.5rem;
    --doc-sp-6: 2rem;
    --doc-sp-7: 3rem;

    /* Radii */
    --doc-radius-sm: 6px;
    --doc-radius: 8px;
    --doc-radius-lg: 12px;

    /* Elevation - low-spread, layered shadows read as more premium than a
       single soft blur. */
    --doc-shadow-sm: 0 1px 1px rgba(24, 28, 50, .04), 0 1px 3px rgba(24, 28, 50, .05);
    --doc-shadow-lg: 0 1px 2px rgba(24, 28, 50, .06), 0 8px 24px rgba(24, 28, 50, .08);

    /* Motion */
    --doc-transition: 180ms cubic-bezier(.4, 0, .2, 1);

    /* Layout metrics */
    --doc-aside-w: 280px;
    --doc-header-h: 75px;

    /* Typography - monospace is an intentional brand decision for the docs.
       Monospace faces render optically larger than sans-serif at the same px
       size, so the base scale is stepped down to compensate. */
    --doc-font-base: ui-monospace, SFMono-Regular, "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
    --doc-font-code: "JetBrains Mono", "Fira Code", Consolas, Monaco, "Courier New", monospace;
    --doc-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Fluid base font size: 13px on small phones -> 14px from ~600px up */
    --doc-font-size: clamp(.8125rem, .765rem + .2vw, .875rem);
}

[data-theme="dark"] {
    --doc-primary-soft: #212e48;

    --doc-gray-100: #1b1b29;
    --doc-gray-200: #2b2b40;
    --doc-gray-300: #323248;
    --doc-gray-400: #474761;
    --doc-gray-500: #565674;
    --doc-gray-600: #6d6d80;
    --doc-gray-700: #92929f;
    --doc-gray-800: #cdcdde;
    --doc-gray-900: #ffffff;

    --doc-bg: #151521;
    --doc-surface: #1e1e2d;
    --doc-surface-raised: #1e1e2d;
    --doc-aside-bg: #1e1e2d;
    --doc-text: #ffffff;
    --doc-text-muted: #92929f;
    --doc-border: #2b2b40;

    --doc-inline-code-bg: #2d2d2d;
    --doc-inline-code-color: #e06c75;

    --doc-shadow-sm: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 3px rgba(0, 0, 0, .3);
    --doc-shadow-lg: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------------------------
   Legacy --kt-* aliases.
   Database-authored article HTML (Froala) may reference these names, so they
   are kept as aliases onto the new token layer rather than dropped.
   Note: the --kt-highlight-* family was never defined by the old bundle, so
   sensible values are supplied here for the first time.
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
    --kt-primary: var(--doc-primary);
    --kt-primary-active: var(--doc-primary-hover);
    --kt-primary-light: var(--doc-primary-soft);
    --kt-danger: var(--doc-danger);
    --kt-gray-100: var(--doc-gray-100);
    --kt-gray-200: var(--doc-gray-200);
    --kt-gray-300: var(--doc-gray-300);
    --kt-gray-400: var(--doc-gray-400);
    --kt-gray-500: var(--doc-gray-500);
    --kt-gray-600: var(--doc-gray-600);
    --kt-gray-700: var(--doc-gray-700);
    --kt-gray-800: var(--doc-gray-800);
    --kt-gray-900: var(--doc-gray-900);
    --kt-border-color: var(--doc-border);
    --kt-body-bg: var(--doc-bg);
    --kt-card-bg: var(--doc-surface);
    --kt-text-dark: var(--doc-text);
    --kt-text-muted: var(--doc-text-muted);
    --kt-highlight-bg: var(--doc-code-bg);
    --kt-highlight-border: var(--doc-code-border);
    --kt-highlight-btn-bg: rgba(255, 255, 255, .1);
    --kt-highlight-btn-bg-hover: rgba(255, 255, 255, .2);
    --kt-highlight-btn-color-hover: #ffffff;
    --kt-highlight-scrollbar-color: var(--doc-code-scroll);
    --kt-highlight-scrollbar-color-hover: var(--doc-code-scroll-hover);
}

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

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

body {
    margin: 0;
    background-color: var(--doc-bg);
    color: var(--doc-text);
    font-family: var(--doc-font-base);
    font-size: var(--doc-font-size);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

button {
    cursor: pointer;
}

a {
    color: var(--doc-primary);
    text-decoration: none;
    transition: color var(--doc-transition);
}

    a:hover {
        color: var(--doc-primary-hover);
        text-decoration: underline;
    }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--doc-sp-3);
    line-height: 1.3;
    color: var(--doc-text);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}

p, ul, ol, pre, table, blockquote, figure {
    margin: 0 0 var(--doc-sp-4);
}

hr {
    border: 0;
    border-top: 1px solid var(--doc-border);
    margin: var(--doc-sp-6) 0;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--doc-primary);
    outline-offset: 2px;
    border-radius: var(--doc-radius-sm);
}

.doc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.doc-skip-link {
    position: absolute;
    top: -100px;
    left: var(--doc-sp-4);
    z-index: 1000;
    padding: var(--doc-sp-2) var(--doc-sp-4);
    background: var(--doc-primary);
    color: #fff;
    border-radius: var(--doc-radius-sm);
    transition: top var(--doc-transition);
}

    .doc-skip-link:focus {
        top: var(--doc-sp-4);
        color: #fff;
        text-decoration: none;
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}