/*
* Description: default tokens for design system
* Author: C Studio
* Version: 1.0.0
* Update: 26-03-20
*/

:root {
    /*–––––––––––––––––––––––––––––––––––––––––*/
    /*VIEWPORT*/
    --min-viewport: 360;
    --max-viewport: 1600;

    /*GRID*/
    --grid-gutter: 8px;
    --grid-margin: 20px;

    /*SPACE*/
    --space-unit: 8px;
    --space-xs: calc(var(--space-unit) / 2);
    --space-s: calc(var(--space-unit) * 3);
    --space-m: calc(var(--space-unit) * 5);
    --space-l: calc(var(--space-unit) * 7);
    --space-xl: calc(var(--space-unit) * 10);
    --space-2xl: calc(var(--space-unit) * 20);

    /*WIDTH*/
    --max-width: min(100vw, 1440px);
    --max-width-mobile: 390px;
    --max-width-content: var(--col-8);
    --max-width-content--percent: 75%;
    /* outer centered box (o-container / flush-grid border box) */
    --grid-shell: var(--max-width);
    /* inner 12-column area after side margins */
    --grid-track: calc(var(--grid-shell) - var(--grid-margin) * 2);

    /*SCROLLBAR*/
    --scrollbar-height: 4px;
    --scrollbar-width: 2px;

    /*EASINGS*/
    --bezier-in: cubic-bezier(0.87, 0.53, 0.31, 0.9);
    --bezier-out: cubic-bezier(0.87, 0.53, 0.31, 0.9);
    --bezier-bounce: cubic-bezier(0.16, 1, 0.3, 1);

    /*DURATIONS*/
    --time-in: 0.25s;
    --time-out: 0.2s;
    --time-slow: 0.7s;
    --time-normal: 0.45s;
    --time-fast: 0.35s;

    /* MOTION — @keyframes in core/framework/_motion.css */
    --motion-duration-page-in: var(--time-normal);
    --motion-duration-fade-in: var(--time-fast);
    --motion-ease-page-in: var(--bezier-bounce);
    --motion-ease-fade-in: ease;
    --motion-page-in: page-in var(--motion-duration-page-in) var(--motion-ease-page-in) forwards;
    --motion-fade-in: fade-in var(--motion-duration-fade-in) var(--motion-ease-fade-in) both;

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /*LAYOUT*/

    /*ZINDEX*/
    --z-section: 2;
    --z-widget: 9;
    --z-header: 10;
    --z-cursor: 10;
    --z-overlay: 15;
    --z-modal: 500;
    --z-footer: 100;
    --z-loader: 1500;

    /*HEIGHT */
    --offset-vh: 160dvh;
    --hero-vh: 95dvh;
    --default-vh: var(--hero-vh);
    --vh-off: var(--offset-vh);
    --max-vh: 100dvh;
    --min-vh: 75dvh;
    --max-height: clamp(calc(600rem / var(--base-font)), calc(600rem / var(--base-font) + (810 - 600) * var(--fluid)), calc(810rem / var(--base-font)));
    --min-height: clamp(calc(500rem / var(--base-font)), calc(500rem / var(--base-font) + (600 - 500) * var(--fluid)), calc(600rem / var(--base-font)));

    /*STICKY*/
    --sticky-top: clamp(calc(80rem / var(--base-font)), calc(80rem / var(--base-font) + (160 - 80) * var(--fluid)), calc(160rem / var(--base-font)));

    /*HEADER — legacy roots header-height */
    --header-height: calc(var(--btn-m-height) + var(--gap-25));
    --header-inner: clamp(calc(12rem / var(--base-font)), calc(12rem / var(--base-font) + (10 - 12) * var(--fluid)), calc(10rem / var(--base-font)));
    --header-icons: clamp(calc(20rem / var(--base-font)), calc(20rem / var(--base-font) + (24 - 20) * var(--fluid)), calc(24rem / var(--base-font)));
    --header-logo-height: clamp(calc(20rem / var(--base-font)), calc(20rem / var(--base-font) + (20 - 20) * var(--fluid)), calc(20rem / var(--base-font)));

    --navigation-height: clamp(calc(20rem / var(--base-font)), calc(20rem / var(--base-font) + (24 - 20) * var(--fluid)), calc(24rem / var(--base-font)));

    /*TOPBAR*/
    --topbar-height: clamp(calc(36rem / var(--base-font)), calc(36rem / var(--base-font) + (44 - 36) * var(--fluid)), calc(44rem / var(--base-font)));
    --topbar-inner: var(--header-inner);
    --header-offset: calc(var(--topbar-height) + var(--header-height));

    /* MAIN & SECTION — FTP roots.css (all zero-terms → resolves like legacy) */
    --main-top: clamp(calc(1rem * (0 / var(--base-font))),
            calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((0 - 0) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (0 / var(--base-font)))) + (((0 - 0) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit),
            calc(1rem * (0 / var(--base-font))));
    --main-bottom: 0;
    --main-first-child: 100px;
    --section-top: 80px;
    --section-bottom: 100px;
    --section-gap: clamp(4.8rem, calc(4.8rem + 3.2 * var(--fluid)), 8.0rem);
    --section-inner: var(--grid-gutter);
    --section-wrap: var(--col-10);
    --section-top--hero: clamp(12.0rem, calc(12.0rem + 8.0 * var(--fluid)), 20.0rem);

    --sidebar-inner: var(--gap-4);
    --card-height: 450px;
    --card-min-width: 360px;

    --flex-gap: var(--grid-gutter);
    --flex-gap-s: calc(var(--flex-gap) * 2);
    --flex-gap-m: calc(var(--flex-gap) * 3);
    --flex-gap-l: calc(var(--flex-gap) * 5);
    --flex-gap-xl: calc(var(--flex-gap) * 7);

    /* flex row fractions — grid-aligned spans (use with .o-flex.gutters on o-track / o-container) */
    --flex-col-gap: 0px;
    --flex-col-1-2: var(--col-6);
    --flex-col-1-3: var(--col-4);
    --flex-col-2-3: var(--col-8);
    --flex-col-1-4: var(--col-3);
    --flex-col-3-4: var(--col-9);

    /* Padding */
    --hero-inner: clamp(3.2rem, calc(3.2rem + 0.8 * var(--fluid)), 4.0rem);
    --frame-inner: clamp(3.2rem, calc(3.2rem + 0.8 * var(--fluid)), 4.0rem);
    --teaser-inner: clamp(2.4rem, calc(2.4rem + 1.6 * var(--fluid)), 4rem);
    --teaser-xl-inner: clamp(4rem, calc(4rem + 1.6 * var(--fluid)), 4rem);
    --application-inner: clamp(1.6rem, calc(1.6rem + 1.6 * var(--fluid)), 2.4rem);
    --banner-inner: var(--gap-6);
    --modal-inner: var(--teaser-inner);

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /*BTN & CONTROLS*/

    /*AVATAR*/
    --avatar-s: var(--gap-3);
    --avatar-m: var(--gap-5);
    --avatar-l: var(--gap-7);
    --avatar-xl: 10rem;

    /*ICONS*/
    --icon-xs: clamp(calc(15rem / var(--base-font)), calc(15rem / var(--base-font) + (15 - 15) * var(--fluid)), calc(15rem / var(--base-font)));
    --icon-s: clamp(calc(20rem / var(--base-font)), calc(20rem / var(--base-font) + (24 - 20) * var(--fluid)), calc(24rem / var(--base-font)));
    --icon-m: clamp(calc(24rem / var(--base-font)), calc(24rem / var(--base-font) + (32 - 24) * var(--fluid)), calc(32rem / var(--base-font)));
    --icon-l: clamp(calc(44rem / var(--base-font)), calc(44rem / var(--base-font) + (44 - 44) * var(--fluid)), calc(44rem / var(--base-font)));
    --icon-circle: 120px;
    --icon-highlight-s: calc(var(--icon-s) + var(--gap-15));
    --icon-highlight-m: calc(var(--icon-m) + var(--gap-25));
    --icon-highlight-l: calc(var(--icon-l) + var(--gap-25));

    /*CURSOR — gradient blob (c-cursor-grd module) */
    --cursor-gradient-size: clamp(
        calc(400rem / var(--base-font)),
        calc(400rem / var(--base-font) + (800 - 400) * var(--fluid)),
        calc(800rem / var(--base-font))
    );

    /*BTN — legacy roots cta heights */
    --btn-l-height: clamp(calc(44rem / var(--base-font)), calc(44rem / var(--base-font) + (52 - 44) * var(--fluid)), calc(52rem / var(--base-font)));
    --btn-m-height: 44px;
    --btn-min-height: 32px;

    --btn-s-x: var(--gap-15);
    --btn-s-y: var(--gap-15);
    --btn-m-x: var(--gap-3);
    --btn-m-y: var(--gap-2);
    --btn-l-x: clamp(calc(30rem / var(--base-font)), calc(30rem / var(--base-font) + (30 - 30) * var(--fluid)), calc(30rem / var(--base-font)));
    --btn-l-y: clamp(calc(12rem / var(--base-font)), calc(12rem / var(--base-font) + (14 - 12) * var(--fluid)), calc(14rem / var(--base-font)));

    --btn-icon: 12px;
    --btn-sm-icon-distance-x: -150%;
    --btn-sm-icon-distance-y: 0%;
    --btn-m-icon-distance-x: -150%;
    --btn-m-icon-distance-y: 0%;

    --btn-min-width: var(--col-3);

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /*TYPEFACE — FTP roots.css */
    --typeface-primary: 'Atkinson Hyperlegible', sans-serif;
    --typeface-secondary: 'antarctican-mono', sans-serif, ui-monospace;

    /*WEIGHTS*/
    --weight-label: 300;
    --weight-headline: var(--weight-body);
    --weight-body: 300;
    --weight-mono: 300;
    --weight-link: var(--weight-body);
    --weight-strong: var(--weight-body);
    --weight-input: 300;

    /*LINE HEIGHTS — legacy roots */
    --line-height-btn: 1;
    --line-height-cta: 1;
    --line-height-headline: 1;
    --line-height-body: 1.1;
    --line-height-input: 0.9;
    --line-height-link: 0.9;
    --line-height-blockquote: 0.9;
    --line-height-caption: 0.9;

    /*MARGINS*/
    --label-margin-bottom: 0.5em;
    --headline-margin-bottom: 0.9em;
    --copy-margin-bottom: 0.5em;

    /*OPACITY*/
    --opacity-body: 1;

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* FONT SIZE + LINE HEIGHT — maintain these editable tokens only */
    /* Desktop — Figma Breakpoint / Desktop */
    --h-4xl-size: 96rem;
    --h-3xl-size: 64rem;
    --h-2xl-size: 54rem;
    --h-xl-size: 40rem;
    --h-l-size: 32rem;
    --h-m-size: 24rem;
    --h-s-size: 18rem;
    --h-xs-size: 14rem;

    --h-4xl: calc(var(--h-4xl-size) / var(--base-font));
    --h-3xl: calc(var(--h-3xl-size) / var(--base-font));
    --h-2xl: calc(var(--h-2xl-size) / var(--base-font));
    --h-xl: calc(var(--h-xl-size) / var(--base-font));
    --h-l: calc(var(--h-l-size) / var(--base-font));
    --h-m: calc(var(--h-m-size) / var(--base-font));
    --h-s: calc(var(--h-s-size) / var(--base-font));
    --h-xs: calc(var(--h-xs-size) / var(--base-font));

    /*COPY — legacy roots body / copy steps */
    --body-font-size: 14rem;
    --c-2xl-size: 32rem;
    --c-xl-size: 28rem;
    --c-l-size: 22rem;
    --c-m-size: 16rem;
    --c-micro-size: 12rem;

    --body-font: calc(var(--body-font-size) / var(--base-font));
    --c-2xl: calc(var(--c-2xl-size) / var(--base-font));
    --c-xl: calc(var(--c-xl-size) / var(--base-font));
    --c-l: calc(var(--c-l-size) / var(--base-font));
    --c-m: calc(var(--c-m-size) / var(--base-font));
    --c-micro: calc(var(--c-micro-size) / var(--base-font));
    --label: var(--body-font);

    /*LIST*/
    --list-size-s: var(--body-font);
    --list-size-m: var(--c-m);
    --list-size-l: var(--c-l);

    --list-icon-xs: 24px;
    --list-icon-s: 32px;
    --list-icon-m: 44px;
    --list-icon-l: 56px;
    --list-icon--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.799' height='7.225' viewBox='0 0 10.799 7.225'%3E%3Cpath d='M3.834,6.725a1.425,1.425,0,0,1-1.014-.42L-.219,3.266A.958.958,0,0,1,.458,1.632a.951.951,0,0,1,.677.28l2.7,2.7L8.665-.219A.958.958,0,0,1,10.3.458a.951.951,0,0,1-.28.677l-5.17,5.17A1.425,1.425,0,0,1,3.834,6.725Z' transform='translate(0.5 0.499)' fill='currentColor'/%3E%3C/svg%3E");


    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* RADIUS & BORDER*/
    --radius-unit: clamp(calc(10rem / var(--base-font)), calc(10rem / var(--base-font) + (10 - 10) * var(--fluid)), calc(10rem / var(--base-font)));

    --radius-control: 0.5rem;
    --radius-section: clamp(calc(0rem / var(--base-font)), calc(0rem / var(--base-font) + (0 - 0) * var(--fluid)), calc(0rem / var(--base-font)));
    --radius-block: clamp(calc(8rem / var(--base-font)), calc(8rem / var(--base-font) + (8 - 8) * var(--fluid)), calc(8rem / var(--base-font)));
    --radius-navigation: clamp(calc(4rem / var(--base-font)), calc(4rem / var(--base-font) + (10 - 4) * var(--fluid)), calc(10rem / var(--base-font)));
    --radius-teaser: clamp(calc(12rem / var(--base-font)), calc(12rem / var(--base-font) + (12 - 12) * var(--fluid)), calc(12rem / var(--base-font)));
    --radius-teaser-frame: clamp(calc(16rem / var(--base-font)), calc(16rem / var(--base-font) + (16 - 16) * var(--fluid)), calc(16rem / var(--base-font)));
    --radius-image: clamp(calc(12rem / var(--base-font)), calc(12rem / var(--base-font) + (12 - 12) * var(--fluid)), calc(12rem / var(--base-font)));

    --radius-btn: var(--btn-l-height);
    --radius-avatar: var(--avatar-l);
    --radius-badge: clamp(calc(40rem / var(--base-font)), calc(40rem / var(--base-font) + (40 - 40) * var(--fluid)), calc(40rem / var(--base-font)));
    --radius-icon: clamp(calc(4rem / var(--base-font)), calc(4rem / var(--base-font) + (4 - 4) * var(--fluid)), calc(4rem / var(--base-font)));

    --radius-input: clamp(calc(4rem / var(--base-font)), calc(4rem / var(--base-font) + (4 - 4) * var(--fluid)), calc(4rem / var(--base-font)));
    --radius-message: clamp(calc(4rem / var(--base-font)), calc(4rem / var(--base-font) + (10 - 4) * var(--fluid)), calc(10rem / var(--base-font)));

    --border-style: solid;
    --border-unit: 1px;

    --border-input: var(--border-unit);
    --border-accordion: var(--border-unit);
    --border-list: var(--border-unit);
    --border-marker: 2px;
    --border-btn: 2px;

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /*CORE*/
    /* CLAMP ENGINE */
    --base-font: 10;
    --clamp-unit: 1vw;
    --fluid: calc((100vw - var(--min-viewport) * 1px) / (var(--max-viewport) - var(--min-viewport)));

    /* SPACING — gap root; scale in core/framework/_layout.css */
    --gap-unit: 8px;

    /* GRID — col-unit derives from --grid-track (not raw --max-width) */
    --col-unit: calc(var(--grid-track) / 12 - (var(--grid-gutter) * 11 / 12));

    --col-1: var(--col-unit);
    --col-2: calc(var(--col-unit) * 2 + var(--grid-gutter));
    --col-3: calc(var(--col-unit) * 3 + var(--grid-gutter) * 2);
    --col-4: calc(var(--col-unit) * 4 + var(--grid-gutter) * 3);
    --col-5: calc(var(--col-unit) * 5 + var(--grid-gutter) * 4);
    --col-6: calc(var(--col-unit) * 6 + var(--grid-gutter) * 5);
    --col-7: calc(var(--col-unit) * 7 + var(--grid-gutter) * 6);
    --col-8: calc(var(--col-unit) * 8 + var(--grid-gutter) * 7);
    --col-9: calc(var(--col-unit) * 9 + var(--grid-gutter) * 8);
    --col-10: calc(var(--col-unit) * 10 + var(--grid-gutter) * 9);
    --col-11: calc(var(--col-unit) * 11 + var(--grid-gutter) * 10);
    --col-12: 100%;

    /* LAYOUT — aliases (FTP offset-vh / max-vh) */
    --vh-off: var(--offset-vh);
    --vh-max: var(--max-vh);

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* CUSTOM */
    --main-frame: .4rem;
    --main-radius: 16px;
    --concave-s: var(--main-radius);
    --blur-control: blur(1rem);
    --blur-gradient: blur(5rem);
}

@media (min-width: 1240px) {
    :root {
        --cta-min-width: 200px;
    }
}

@media (max-width: 940px) {
    :root {
        --grid-margin: 16px;
        --section-wrap: var(--col-11);
        --header-height: calc(var(--btn-m-height) + var(--gap-15));
        --cta-min-width: var(--col-4);
        --application-inner: clamp(2.4rem, calc(2.4rem + 2.4 * var(--fluid)), 2.4rem);
        --main-frame: .8rem;
    }
}

@media (max-width: 840px) {
    :root {
        --cta-min-width: var(--col-5);
        /* --application-inner: clamp(1.4rem, calc(1.4rem + 1.4 * var(--fluid)), 1.4rem); */

        --space-xs: calc(var(--space-unit) * .5);
        --space-s: calc(var(--space-unit) * 1);
        --space-m: calc(var(--space-unit) * 2);
        --space-l: calc(var(--space-unit) * 4);
        --space-xl: calc(var(--space-unit) * 8);
        --space-2xl: calc(var(--space-unit) * 12);

        /* Tablet — Figma Breakpoint / Tablet */
        --c-2xl-size: 28rem;
        --c-xl-size: 24rem;
    }
}

@media (max-width: 767px) {
    :root {
        --sidebar-inner: var(--gap-2);

        --grid-gutter: 6px;
        
        --btn-m-x: var(--gap-15);
        --btn-m-y: var(--gap-15);

        --hero-vh: 120dvh;
        --default-vh: var(--hero-vh);

        --section-top: 60px;
        --section-bottom: 60px;

        --teaser-inner: clamp(2rem, calc(2rem + 1.6 * var(--fluid)), 2rem);
        --teaser-xl-inner: clamp(2rem, calc(2rem + 1.6 * var(--fluid)), 2rem);
        --radius-teaser: clamp(calc(12rem / var(--base-font)), calc(12rem / var(--base-font) + (12 - 12) * var(--fluid)), calc(12rem / var(--base-font)));
        --radius-teaser-frame: clamp(calc(16rem / var(--base-font)), calc(16rem / var(--base-font) + (16 - 16) * var(--fluid)), calc(16rem / var(--base-font)));
    }
}

/*
 * MOBILE TYPE (--to-s) — override *-size rem tokens; must stay last so it wins over 840px/940px.
 * --h-* / --c-* are calc(size / --base-font); edit *-size only.
 */
@media (max-width: 699px) {
    :root {
        /* Mobile — Figma Breakpoint / Mobile */
        --h-4xl-size: 36rem;
        --h-3xl-size: 36rem;
        --h-2xl-size: 36rem;
        --h-xl-size: 32rem;
        --h-l-size: 24rem;
        --h-m-size: 20rem;
        --h-s-size: 18rem;
        --h-xs-size: 14rem;

        --body-font-size: 14rem;
        --c-2xl-size: 28rem;
        --c-xl-size: 24rem;
        --c-l-size: 22rem;
        --c-m-size: 16rem;
        --c-micro-size: 12rem;
    }
}