/* ==========================================
   CHANG TONG CORE

   DESIGN SYSTEM

   Variables.css
   
   Version 1.0

   Author: Chang Tong Thai Streetfood
========================================== */

:root {

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

    /* Brand */

    --ct-color-primary: #C9A227;
    --ct-color-primary-dark: #A67C00;

    --ct-color-secondary: #2B2B2B;

    --ct-color-accent: #B71C1C;

    /* Text */

    --ct-color-text: #333333;
    --ct-color-text-light: #666666;
    --ct-color-text-white: #FFFFFF;

    /* Background */

    --ct-color-background: #F5FFDA;
    --ct-color-surface: #FFFFFF;

    /* Neutral */

    --ct-color-black: #1E1E1E;
    --ct-color-white: #FFFFFF;

    /* Border */

    --ct-color-border: #E5E5E5;


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

    /* Font Families */

    --ct-font-heading: "Playfair Display", serif;
    --ct-font-body: "Inter", sans-serif;

    /* Font Weights */

    --ct-fw-light: 300;
    --ct-fw-regular: 400;
    --ct-fw-medium: 500;
    --ct-fw-semibold: 600;
    --ct-fw-bold: 700;

    /* Font Sizes */

    --ct-fs-xs: .75rem;
    --ct-fs-sm: .875rem;
    --ct-fs-base: 1rem;
    --ct-fs-lg: 1.125rem;
    --ct-fs-xl: 1.25rem;
    --ct-fs-2xl: 1.5rem;
    --ct-fs-3xl: 2rem;
    --ct-fs-4xl: 2.5rem;
    --ct-fs-5xl: 3rem;

    /* Line Heights */

    --ct-lh-tight: 1.2;
    --ct-lh-normal: 1.6;
    --ct-lh-loose: 1.8;


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

    --ct-space-xs: .25rem;
    --ct-space-sm: .5rem;
    --ct-space-md: 1rem;
    --ct-space-lg: 2rem;
    --ct-space-xl: 3rem;
    --ct-space-2xl: 5rem;


/* ==========================================
   BORDER RADIUS
========================================== */

    --ct-radius-sm: 4px;
    --ct-radius-md: 8px;
    --ct-radius-lg: 16px;
    --ct-radius-xl: 24px;
    --ct-radius-pill: 999px;


/* ==========================================
   OPACITY
========================================== */

    --ct-opacity-disabled: .5;
    --ct-opacity-hover: .85;


/* ==========================================
   BORDER WIDTH
========================================== */

    --ct-border-thin: 1px;
    --ct-border-medium: 2px;
    --ct-border-thick: 4px;


/* ==========================================
   SHADOWS
========================================== */

    --ct-shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --ct-shadow-md: 0 6px 16px rgba(0,0,0,.12);
    --ct-shadow-lg: 0 12px 30px rgba(0,0,0,.15);


/* ==========================================
   LAYOUT
========================================== */

    --ct-width-narrow: 640px;
    --ct-width-content: 760px;
    --ct-width-container: 1200px;
    --ct-width-full: 1440px;


/* ==========================================
   COMPONENT SIZES
========================================== */

    /* Header */

    --ct-header-height: 96px;

    /* Logo */

    --ct-logo-height: 56px;

    /* Navigation */

    --ct-nav-height: 48px;

    /* Buttons */

    --ct-button-height: 48px;

    /* Form Elements */

    --ct-input-height: 48px;


/* ==========================================
   BREAKPOINTS
========================================== */

    /* Dokumentation für das Designsystem.
       In CSS Media Queries können diese Variablen
       derzeit nicht mit var() verwendet werden. */

    --ct-breakpoint-sm: 576px;
    --ct-breakpoint-md: 768px;
    --ct-breakpoint-lg: 992px;
    --ct-breakpoint-xl: 1200px;
    --ct-breakpoint-xxl: 1400px;


/* ==========================================
   TRANSITIONS
========================================== */

    --ct-transition-fast: .20s ease;
    --ct-transition-normal: .30s ease;
    --ct-transition-slow: .50s ease;


/* ==========================================
   Z-INDEX
========================================== */

    --ct-z-dropdown: 100;
    --ct-z-header: 500;
    --ct-z-modal: 1000;
    --ct-z-overlay: 1100;

}