/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/typography.css
 Module      : EcoDrop Typography System
 Version     : 1.0.0
 Status      : Draft
 Author      : EcoDrop Platform
 References  : EMS / EHIG / EDS
======================================================================
*/

:root{

    /* ==========================================================
       FONT FAMILIES
    ========================================================== */

    --eco-font-display:
        "SF Pro Display",
        "Inter",
        sans-serif;

    --eco-font-text:
        "Inter",
        "Segoe UI",
        sans-serif;

    --eco-font-number:
        "SF Pro Display",
        "Inter",
        sans-serif;

    --eco-font-mono:
        "JetBrains Mono",
        monospace;

    /* ==========================================================
       FONT WEIGHTS
    ========================================================== */

    --eco-font-thin:100;
    --eco-font-extra-light:200;
    --eco-font-light:300;
    --eco-font-regular:400;
    --eco-font-medium:500;
    --eco-font-semibold:600;
    --eco-font-bold:700;
    --eco-font-extra-bold:800;

    /* ==========================================================
       DISPLAY
    ========================================================== */

    --eco-display-xl-size:88px;
    --eco-display-xl-line:92px;
    --eco-display-xl-spacing:-3px;

    --eco-display-lg-size:72px;
    --eco-display-lg-line:78px;
    --eco-display-lg-spacing:-2px;

    --eco-display-md-size:60px;
    --eco-display-md-line:64px;
    --eco-display-md-spacing:-1.5px;

    --eco-display-sm-size:48px;
    --eco-display-sm-line:54px;
    --eco-display-sm-spacing:-1px;

    /* ==========================================================
       HEADINGS
    ========================================================== */

    --eco-heading-xl:42px;
    --eco-heading-l:36px;
    --eco-heading-m:30px;
    --eco-heading-s:24px;
    --eco-heading-xs:20px;

    --eco-heading-line-xl:48px;
    --eco-heading-line-l:42px;
    --eco-heading-line-m:36px;
    --eco-heading-line-s:30px;
    --eco-heading-line-xs:26px;

    /* ==========================================================
       TITLES
    ========================================================== */

    --eco-title-lg:22px;
    --eco-title-md:20px;
    --eco-title-sm:18px;

    --eco-title-line-lg:30px;
    --eco-title-line-md:28px;
    --eco-title-line-sm:26px;

/* ==========================================================
   BODY
========================================================== */

    --eco-body-xl:20px;
    --eco-body-lg:18px;
    --eco-body-md:16px;
    --eco-body-sm:15px;
    --eco-body-xs:14px;

    --eco-body-line-xl:34px;
    --eco-body-line-lg:30px;
    --eco-body-line-md:28px;
    --eco-body-line-sm:24px;
    --eco-body-line-xs:22px;

    /* ==========================================================
       CAPTION
    ========================================================== */

    --eco-caption-lg:13px;
    --eco-caption-md:12px;
    --eco-caption-sm:11px;

    --eco-caption-line-lg:20px;
    --eco-caption-line-md:18px;
    --eco-caption-line-sm:16px;

    /* ==========================================================
       LABELS
    ========================================================== */

    --eco-label-xl:18px;
    --eco-label-lg:16px;
    --eco-label-md:15px;
    --eco-label-sm:14px;

    --eco-label-line-xl:24px;
    --eco-label-line-lg:22px;
    --eco-label-line-md:20px;
    --eco-label-line-sm:18px;

    /* ==========================================================
       NUMBERS
    ========================================================== */

    --eco-number-impact:64px;
    --eco-number-counter:54px;
    --eco-number-weight:96px;
    --eco-number-reward:60px;
    --eco-number-small:32px;

    --eco-number-line-impact:68px;
    --eco-number-line-counter:58px;
    --eco-number-line-weight:96px;
    --eco-number-line-reward:64px;
    --eco-number-line-small:36px;

    /* ==========================================================
       LETTER SPACING
    ========================================================== */

    --eco-spacing-tight:-0.04em;
    --eco-spacing-normal:0;
    --eco-spacing-wide:.04em;
    --eco-spacing-extra:.08em;

    /* ==========================================================
       TEXT COLORS
    ========================================================== */

    --eco-font-color-primary:
        var(--eco-text-primary);

    --eco-font-color-secondary:
        var(--eco-text-secondary);

    --eco-font-color-muted:
        var(--eco-text-tertiary);

    --eco-font-color-disabled:
        var(--eco-text-disabled);

    --eco-font-color-brand:
        var(--eco-color-brand-500);

    --eco-font-color-success:
        var(--eco-success);

    --eco-font-color-warning:
        var(--eco-warning);

    --eco-font-color-error:
        var(--eco-error);

    /* ==========================================================
       FONT SMOOTHING
    ========================================================== */

    

/* ==========================================================
   DISPLAY CLASSES
========================================================== */

.eco-display-xl{

    font-family:var(--eco-font-display);
    font-size:var(--eco-display-xl-size);
    line-height:var(--eco-display-xl-line);
    letter-spacing:var(--eco-display-xl-spacing);
    font-weight:var(--eco-font-bold);

}

.eco-display-lg{

    font-family:var(--eco-font-display);
    font-size:var(--eco-display-lg-size);
    line-height:var(--eco-display-lg-line);
    letter-spacing:var(--eco-display-lg-spacing);
    font-weight:var(--eco-font-bold);

}

.eco-display-md{

    font-family:var(--eco-font-display);
    font-size:var(--eco-display-md-size);
    line-height:var(--eco-display-md-line);
    letter-spacing:var(--eco-display-md-spacing);
    font-weight:var(--eco-font-semibold);

}

.eco-display-sm{

    font-family:var(--eco-font-display);
    font-size:var(--eco-display-sm-size);
    line-height:var(--eco-display-sm-line);
    letter-spacing:var(--eco-display-sm-spacing);
    font-weight:var(--eco-font-semibold);

}

/* ==========================================================
   HEADINGS
========================================================== */

.eco-heading-xl{

    font-family:var(--eco-font-display);
    font-size:var(--eco-heading-xl);
    line-height:var(--eco-heading-line-xl);
    font-weight:var(--eco-font-bold);

}

.eco-heading-lg{

    font-family:var(--eco-font-display);
    font-size:var(--eco-heading-l);
    line-height:var(--eco-heading-line-l);
    font-weight:var(--eco-font-semibold);

}

.eco-heading-md{

    font-family:var(--eco-font-display);
    font-size:var(--eco-heading-m);
    line-height:var(--eco-heading-line-m);
    font-weight:var(--eco-font-semibold);

}

.eco-heading-sm{

    font-family:var(--eco-font-display);
    font-size:var(--eco-heading-s);
    line-height:var(--eco-heading-line-s);
    font-weight:var(--eco-font-medium);

}

/* ==========================================================
   TITLES
========================================================== */

.eco-title-lg{

    font-family:var(--eco-font-text);
    font-size:var(--eco-title-lg);
    line-height:var(--eco-title-line-lg);
    font-weight:var(--eco-font-semibold);

}

.eco-title-md{

    font-family:var(--eco-font-text);
    font-size:var(--eco-title-md);
    line-height:var(--eco-title-line-md);
    font-weight:var(--eco-font-medium);

}

.eco-title-sm{

    font-family:var(--eco-font-text);
    font-size:var(--eco-title-sm);
    line-height:var(--eco-title-line-sm);
    font-weight:var(--eco-font-medium);

}

/* ==========================================================
   BODY
========================================================== */

.eco-body-xl{

    font-family:var(--eco-font-text);
    font-size:var(--eco-body-xl);
    line-height:var(--eco-body-line-xl);
    font-weight:var(--eco-font-regular);
    color:var(--eco-font-color-primary);

}

.eco-body-lg{

    font-family:var(--eco-font-text);
    font-size:var(--eco-body-lg);
    line-height:var(--eco-body-line-lg);
    font-weight:var(--eco-font-regular);
    color:var(--eco-font-color-primary);

}

.eco-body-md{

    font-family:var(--eco-font-text);
    font-size:var(--eco-body-md);
    line-height:var(--eco-body-line-md);
    font-weight:var(--eco-font-regular);
    color:var(--eco-font-color-primary);

}

.eco-body-sm{

    font-family:var(--eco-font-text);
    font-size:var(--eco-body-sm);
    line-height:var(--eco-body-line-sm);
    font-weight:var(--eco-font-regular);
    color:var(--eco-font-color-secondary);

}

.eco-body-xs{

    font-family:var(--eco-font-text);
    font-size:var(--eco-body-xs);
    line-height:var(--eco-body-line-xs);
    font-weight:var(--eco-font-regular);
    color:var(--eco-font-color-secondary);

}

/* ==========================================================
   CAPTIONS
========================================================== */

.eco-caption-lg{

    font-family:var(--eco-font-text);
    font-size:var(--eco-caption-lg);
    line-height:var(--eco-caption-line-lg);
    font-weight:var(--eco-font-medium);
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--eco-font-color-muted);

}

.eco-caption-md{

    font-family:var(--eco-font-text);
    font-size:var(--eco-caption-md);
    line-height:var(--eco-caption-line-md);
    font-weight:var(--eco-font-medium);
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--eco-font-color-muted);

}

.eco-caption-sm{

    font-family:var(--eco-font-text);
    font-size:var(--eco-caption-sm);
    line-height:var(--eco-caption-line-sm);
    font-weight:var(--eco-font-medium);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--eco-font-color-muted);

}

/* ==========================================================
   LABELS
========================================================== */

.eco-label-xl{

    font-family:var(--eco-font-text);
    font-size:var(--eco-label-xl);
    line-height:var(--eco-label-line-xl);
    font-weight:var(--eco-font-semibold);

}

.eco-label-lg{

    font-family:var(--eco-font-text);
    font-size:var(--eco-label-lg);
    line-height:var(--eco-label-line-lg);
    font-weight:var(--eco-font-semibold);

}

.eco-label-md{

    font-family:var(--eco-font-text);
    font-size:var(--eco-label-md);
    line-height:var(--eco-label-line-md);
    font-weight:var(--eco-font-medium);

}

.eco-label-sm{

    font-family:var(--eco-font-text);
    font-size:var(--eco-label-sm);
    line-height:var(--eco-label-line-sm);
    font-weight:var(--eco-font-medium);

}

/* ==========================================================
   NUMERIC STYLES
========================================================== */

.eco-number-impact{

    font-family:var(--eco-font-number);
    font-size:var(--eco-number-impact);
    line-height:var(--eco-number-line-impact);
    font-weight:var(--eco-font-bold);
    letter-spacing:-0.03em;
    color:var(--eco-color-brand-500);

}

.eco-number-counter{

    font-family:var(--eco-font-number);
    font-size:var(--eco-number-counter);
    line-height:var(--eco-number-line-counter);
    font-weight:var(--eco-font-bold);
    letter-spacing:-0.03em;
    color:var(--eco-text-primary);

}

.eco-number-weight{

    font-family:var(--eco-font-number);
    font-size:var(--eco-number-weight);
    line-height:var(--eco-number-line-weight);
    font-weight:var(--eco-font-bold);
    letter-spacing:-0.04em;
    color:var(--eco-color-brand-500);

}

.eco-number-reward{

    font-family:var(--eco-font-number);
    font-size:var(--eco-number-reward);
    line-height:var(--eco-number-line-reward);
    font-weight:var(--eco-font-bold);
    letter-spacing:-0.03em;
    color:#FBBF24;

}

.eco-number-small{

    font-family:var(--eco-font-number);
    font-size:var(--eco-number-small);
    line-height:var(--eco-number-line-small);
    font-weight:var(--eco-font-semibold);

}

/* ==========================================================
   TEXT UTILITIES
========================================================== */

.eco-text-primary{

    color:var(--eco-font-color-primary);

}

.eco-text-secondary{

    color:var(--eco-font-color-secondary);

}

.eco-text-muted{

    color:var(--eco-font-color-muted);

}

.eco-text-success{

    color:var(--eco-success);

}

.eco-text-warning{

    color:var(--eco-warning);

}

.eco-text-error{

    color:var(--eco-error);

}

.eco-text-brand{

    color:var(--eco-color-brand-500);

}

.eco-text-center{

    text-align:center;

}

.eco-text-left{

    text-align:left;

}

.eco-text-right{

    text-align:right;

}

.eco-uppercase{

    text-transform:uppercase;

}

.eco-lowercase{

    text-transform:lowercase;

}

.eco-capitalize{

    text-transform:capitalize;

}

.eco-nowrap{

    white-space:nowrap;

}

.eco-balance{

    text-wrap:balance;

}

.eco-wrap{

    text-wrap:pretty;

}

/* ==========================================================
   FONT WEIGHT UTILITIES
========================================================== */

.eco-thin{

    font-weight:var(--eco-font-thin);

}

.eco-light{

    font-weight:var(--eco-font-light);

}

.eco-regular{

    font-weight:var(--eco-font-regular);

}

.eco-medium{

    font-weight:var(--eco-font-medium);

}

.eco-semibold{

    font-weight:var(--eco-font-semibold);

}

.eco-bold{

    font-weight:var(--eco-font-bold);

}

.eco-extra-bold{

    font-weight:var(--eco-font-extra-bold);

}

/* ==========================================================
   LETTER SPACING
========================================================== */

.eco-spacing-tight{

    letter-spacing:var(--eco-spacing-tight);

}

.eco-spacing-normal{

    letter-spacing:var(--eco-spacing-normal);

}

.eco-spacing-wide{

    letter-spacing:var(--eco-spacing-wide);

}

.eco-spacing-extra{

    letter-spacing:var(--eco-spacing-extra);

}

/* ==========================================================
   LINE CLAMP
========================================================== */

.eco-clamp-1{

    overflow:hidden;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:1;

}

.eco-clamp-2{

    overflow:hidden;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}

.eco-clamp-3{

    overflow:hidden;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

}

/* ==========================================================
   TEXT EFFECTS
========================================================== */

.eco-text-shadow-soft{

    text-shadow:
        0 2px 12px rgba(0,0,0,.25);

}

.eco-text-shadow-glow{

    text-shadow:
        0 0 24px rgba(34,184,95,.28);

}

.eco-text-gradient{

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #BDEFCF
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

}

/* ==========================================================
   NUMERIC TABULAR
========================================================== */

.eco-tabular{

    font-variant-numeric:
        tabular-nums;

}

.eco-lining{

    font-variant-numeric:
        lining-nums;

}

.eco-oldstyle{

    font-variant-numeric:
        oldstyle-nums;

}

/* ==========================================================
   TYPOGRAPHY DEFAULTS
========================================================== */

h1,h2,h3,h4,h5,h6{

    margin:0;

    color:var(--eco-font-color-primary);

}

p{

    margin:0;

    color:var(--eco-font-color-secondary);

}

small{

    color:var(--eco-font-color-muted);

}

strong{

    font-weight:var(--eco-font-bold);

}

em{

    font-style:italic;

}

/* ==========================================================
   END OF FILE
========================================================== */