/* ============================================================
   ANTIGRAVITY UI — DESIGN SYSTEM TOKENS
   Can-Mould Corporate Website
   Industrial Premium · Light + Dark Sections Design
   ============================================================ */

/* ----- Google Fonts Import ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400&display=swap');

/* ----- Root Variables / Design Tokens ----- */
:root {
    /* ── Brand Colors (from logo) ── */
    --brand-navy:         #6A2E73;
    --brand-navy-light:   #874A91;
    --brand-steel:        #947998;
    --brand-steel-light:  #BD9FC2;

    /* ── Primary Backgrounds ── */
    --bg-primary:         #FFFFFF;
    --bg-secondary:       #F7F2F8;
    --bg-tertiary:        #F0E8F1;
    --bg-card:            #FFFFFF;
    --bg-elevated:        #FAF5FA;
    --bg-border:          #E5D8E7;
    --bg-border-light:    #F0E8F1;

    /* ── Dark Sections (hero, footer, accent bands) ── */
    --bg-dark:            #27132B;
    --bg-dark-card:       #341A39;
    --bg-dark-border:     #572F5E;
    --text-on-dark:       #FFFFFF;
    --text-on-dark-secondary: #D4C3D6;
    --text-on-dark-muted: #9E89A2;

    /* ── Text ── */
    --text-headline:      #27132B;
    --text-body:          #4E4150;
    --text-secondary:     #6E6071;
    --text-muted:         #9A8C9D;
    --text-caption:       #7D7080;

    /* ── Accent Colors ── */
    --accent-primary:     #6A2E73;
    --accent-primary-hover: #874A91;
    --accent-primary-glow: rgba(106, 46, 115, 0.18);
    --accent-cta:         #8D5FA8;
    --accent-cta-hover:   #774D91;
    --accent-cta-glow:    rgba(141, 95, 168, 0.22);
    --accent-link:        #7E3888;
    --accent-link-hover:  #5F2967;
    --accent-success:     #16A34A;
    --accent-error:       #DC2626;

    /* ── Gradients ── */
    --gradient-hero:      linear-gradient(135deg, #27132B 0%, #6A2E73 52%, #874A91 100%);
    --gradient-nav:       linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 100%);
    --gradient-steel:     linear-gradient(135deg, #6B8299 0%, #8BA3B8 50%, #6B8299 100%);
    --gradient-footer:    linear-gradient(180deg, #27132B 0%, #341A39 100%);
    --gradient-section:   linear-gradient(180deg, #F7F2F8 0%, #FFFFFF 100%);

    /* ── Typography ── */
    --font-primary:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ── Font Sizes ── */
    --fs-display:      clamp(2.5rem, 5vw, 4.5rem);
    --fs-page-title:   clamp(2rem, 3.5vw, 3rem);
    --fs-section-title: clamp(1.5rem, 2.5vw, 2rem);
    --fs-subtitle:     clamp(1.05rem, 1.3vw, 1.25rem);
    --fs-body:         clamp(0.9375rem, 1vw, 1rem);
    --fs-caption:      clamp(0.8125rem, 0.9vw, 0.875rem);
    --fs-spec:         clamp(0.875rem, 0.95vw, 1rem);
    --fs-small:        0.8125rem;

    /* ── Font Weights ── */
    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* ── Letter Spacing ── */
    --ls-tight:    -0.03em;
    --ls-snug:     -0.02em;
    --ls-normal:    0;
    --ls-wide:      0.01em;
    --ls-wider:     0.05em;
    --ls-widest:    0.1em;

    /* ── Line Height ── */
    --lh-tight:     1.1;
    --lh-snug:      1.25;
    --lh-normal:    1.6;
    --lh-relaxed:   1.8;

    /* ── Spacing Scale ── */
    --space-xs:     0.5rem;
    --space-sm:     1rem;
    --space-md:     1.5rem;
    --space-lg:     2rem;
    --space-xl:     3rem;
    --space-2xl:    4rem;
    --space-3xl:    5rem;
    --space-4xl:    7.5rem;

    /* ── Border Radius ── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;

    /* ── Shadows (light theme) ── */
    --shadow-sm:      0 1px 3px rgba(15, 23, 41, 0.06);
    --shadow-card:    0 2px 12px rgba(15, 23, 41, 0.07);
    --shadow-elevated: 0 8px 30px rgba(15, 23, 41, 0.10);
    --shadow-heavy:   0 16px 48px rgba(15, 23, 41, 0.14);
    --shadow-glow:    0 0 30px var(--accent-cta-glow);

    /* ── Transitions ── */
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-slow:    400ms ease;
    --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-behind:    -1;
    --z-base:       0;
    --z-above:      10;
    --z-nav:        100;
    --z-sticky:     200;
    --z-overlay:    500;
    --z-modal:      1000;

    /* ── Layout ── */
    --max-width:    1280px;
    --nav-height:   72px;
    --section-gap:  var(--space-4xl);
}

/* ----- CSS Reset & Base ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-wide);
    color: var(--text-body);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* ----- Global Typography ----- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-headline);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

h1 {
    font-size: var(--fs-display);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
}

h2 {
    font-size: var(--fs-page-title);
    letter-spacing: var(--ls-snug);
}

h3 {
    font-size: var(--fs-section-title);
    letter-spacing: var(--ls-snug);
}

h4 {
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-semibold);
}

p {
    margin-bottom: var(--space-sm);
}

a {
    color: var(--accent-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-link-hover);
}

strong {
    font-weight: var(--fw-semibold);
    color: var(--text-headline);
}

ul, ol {
    padding-left: var(--space-md);
}

li {
    margin-bottom: var(--space-xs);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ----- Utility Classes ----- */
.mono {
    font-family: var(--font-mono);
    font-size: var(--fs-spec);
    letter-spacing: var(--ls-normal);
}

.text-headline  { color: var(--text-headline); }
.text-body      { color: var(--text-body); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-primary); }
.text-cta       { color: var(--accent-cta); }
.text-center    { text-align: center; }

.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card      { background-color: var(--bg-card); }
.bg-dark      { background-color: var(--bg-dark); }

/* ----- Selection ----- */
::selection {
    background-color: var(--brand-navy);
    color: #FFFFFF;
}

/* ----- Scrollbar (Webkit) ----- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-steel);
}