/* Simply Group Design Tokens - GESPIEGELT aus simply-group/dist. Nicht hier bearbeiten. */

/* Schicht 1 - Core Tokens. Gruppenweit. AUTOGENERIERT. */
:root{
  /* Neutralfarben */
  --ink: #181818;
  --ink-rgb: 24,24,24;
  --ink-2: #141417;
  --ink-2-rgb: 20,20,23;
  --ink-3: #202024;
  --ink-3-rgb: 32,32,36;
  --slate-600: #56585F;
  --slate-600-rgb: 86,88,95;
  --slate-400: #9CA3AF;
  --slate-400-rgb: 156,163,175;
  --slate-200: #D8DBDD;
  --slate-200-rgb: 216,219,221;
  --paper: #F0F0EE;
  --paper-rgb: 240,240,238;
  --paper-2: #F7F7F5;
  --paper-2-rgb: 247,247,245;
  --white: #FFFFFF;
  --white-rgb: 255,255,255;
  /* Semantik */
  --success: #0A8F7D;
  --warning: #EF9F27;
  --danger: #C0392B;
  --info: #018FD2;
  /* Typografie */
  --font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Host Grotesk', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fs-display: clamp(44px, 7vw, 86px);
  --lh-display: 1.02;
  --ls-display: -0.035em;
  --fw-display: 600;
  --fs-h1: clamp(34px, 5vw, 58px);
  --lh-h1: 1.08;
  --ls-h1: -0.035em;
  --fw-h1: 600;
  --fs-h2: clamp(26px, 3.4vw, 40px);
  --lh-h2: 1.14;
  --ls-h2: -0.02em;
  --fw-h2: 600;
  --fs-h3: clamp(20px, 2.2vw, 26px);
  --lh-h3: 1.25;
  --ls-h3: -0.015em;
  --fw-h3: 500;
  --fs-lead: clamp(17px, 1.9vw, 21px);
  --lh-lead: 1.6;
  --ls-lead: 0;
  --fw-lead: 400;
  --fs-body: 17px;
  --lh-body: 1.55;
  --ls-body: 0;
  --fw-body: 400;
  --fs-small: 14px;
  --lh-small: 1.55;
  --ls-small: 0;
  --fw-small: 400;
  --fs-eyebrow: 12px;
  --lh-eyebrow: 1.2;
  --ls-eyebrow: 0.24em;
  --fw-eyebrow: 600;
  /* Abstaende */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 140px;
  /* Radien */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  /* Schatten */
  --shadow-sm: 0 2px 8px rgba(11,11,12,.06);
  --shadow-md: 0 10px 30px rgba(11,11,12,.10);
  --shadow-lg: 0 24px 64px rgba(11,11,12,.14);
  /* Layout */
  --layout-max-width: 1180px;
  --layout-gutter: 24px;
  --layout-columns: 12;
  --layout-section-y: clamp(72px, 10vw, 140px);
  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-reveal: 720ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-entrance: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.4,0,1,1);
  /* Logosystem - Bezugsgroesse ist die Versalhoehe H */
  --logo-constant-weight: 600;
  --logo-constant-tracking: -0.03em;
  --logo-descriptor-weight: 300;
  --logo-descriptor-tracking: 0.01em;
  --logo-cap: 0.7em;
  --logo-gap: calc(var(--logo-cap) * 0.32);
  --logo-clearspace: calc(var(--logo-cap) * 0.60);
}

@media (prefers-reduced-motion: reduce){
  :root{ --duration-instant:0ms; --duration-fast:0ms; --duration-base:0ms;
         --duration-slow:0ms; --duration-reveal:0ms; }
}

/* Themenschicht - hell ist Standard. AUTOGENERIERT. */
:root{
  --bg-page: #F0F0EE;
  --bg-page-rgb: 240,240,238;
  --bg-raised: #F7F7F5;
  --bg-raised-rgb: 247,247,245;
  --bg-card: #F7F7F5;
  --bg-card-rgb: 247,247,245;
  --bg-inverted: #141417;
  --bg-inverted-rgb: 20,20,23;
  --fg-primary: #181818;
  --fg-primary-rgb: 24,24,24;
  --fg-secondary: #56585F;
  --fg-secondary-rgb: 86,88,95;
  --fg-tertiary: #9CA3AF;
  --fg-tertiary-rgb: 156,163,175;
  --line: #D8DBDD;
  --line-rgb: 216,219,221;
  --fg-accent: var(--accent-text);
  --logo-constant: #012D6A;
  --logo-constant-rgb: 1,45,106;
}

[data-theme="dark"]{
  --bg-page: #080A07;
  --bg-page-rgb: 8,10,7;
  --bg-raised: #0C0F0A;
  --bg-raised-rgb: 12,15,10;
  --bg-card: #12160F;
  --bg-card-rgb: 18,22,15;
  --bg-inverted: #F0F0EE;
  --bg-inverted-rgb: 240,240,238;
  --fg-primary: #ECEFE7;
  --fg-primary-rgb: 236,239,231;
  --fg-secondary: #BCC4B6;
  --fg-secondary-rgb: 188,196,182;
  --fg-tertiary: #838A7D;
  --fg-tertiary-rgb: 131,138,125;
  --line: rgba(255,255,255,.10);
  --fg-accent: var(--accent-bright);
  --logo-constant: #ECEFE7;
  --logo-constant-rgb: 236,239,231;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-page: #080A07;
    --bg-page-rgb: 8,10,7;
    --bg-raised: #0C0F0A;
    --bg-raised-rgb: 12,15,10;
    --bg-card: #12160F;
    --bg-card-rgb: 18,22,15;
    --bg-inverted: #F0F0EE;
    --bg-inverted-rgb: 240,240,238;
    --fg-primary: #ECEFE7;
    --fg-primary-rgb: 236,239,231;
    --fg-secondary: #BCC4B6;
    --fg-secondary-rgb: 188,196,182;
    --fg-tertiary: #838A7D;
    --fg-tertiary-rgb: 131,138,125;
    --line: rgba(255,255,255,.10);
    --fg-accent: var(--accent-bright);
    --logo-constant: #ECEFE7;
    --logo-constant-rgb: 236,239,231;
  }
}

/* Schicht 2 - Brand Tokens. AUTOGENERIERT. */
/* Anwendung: <html data-brand="connect"> oder auf beliebigem Container. */

/* SimplyGroup - Status: VERIFIED */
[data-brand="group"]{
  --brand-id: group;
  --brand-name: "SimplyGroup";
  --brand-descriptor: "Group";
  --accent: #012D6A;
  --accent-rgb: 1,45,106;
  --accent-bright: #5E9BF0;
  --accent-deep: #011A40;
  --accent-text: #012D6A;
  --accent-solid: #012D6A;
  --accent-soft: rgba(1,45,106,.12);
  --accent-veil: rgba(1,45,106,.06);
  --shadow-accent: 0 10px 30px rgba(1,45,106,.30);
  --gradient: linear-gradient(135deg, #5E9BF0, #012D6A, #011A40);
  --gradient-soft: linear-gradient(135deg, rgba(94,155,240,.16), rgba(1,26,64,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
  --secondary: #4B5A52;
  --secondary-rgb: 75,90,82;
  --secondary-soft: rgba(75,90,82,.14);
  --secondary-veil: rgba(75,90,82,.06);
  --logo-gap: calc(var(--logo-cap) * 0.0);
}

/* Simply Sales - Status: DRAFT */
[data-brand="sales"]{
  --brand-id: sales;
  --brand-name: "Simply Sales";
  --brand-descriptor: "Sales";
  --accent: #D0202E;
  --accent-rgb: 208,32,46;
  --accent-bright: #F2564D;
  --accent-deep: #6E1119;
  --accent-text: #A3151F;
  --accent-solid: #A3151F;
  --accent-soft: rgba(208,32,46,.12);
  --accent-veil: rgba(208,32,46,.06);
  --shadow-accent: 0 10px 30px rgba(208,32,46,.30);
  --gradient: linear-gradient(135deg, #F2564D, #D0202E, #6E1119);
  --gradient-soft: linear-gradient(135deg, rgba(242,86,77,.16), rgba(110,17,25,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Connect - Status: VERIFIED */
[data-brand="connect"]{
  --brand-id: connect;
  --brand-name: "Simply Connect";
  --brand-descriptor: "Connect";
  --accent: #018FD2;
  --accent-rgb: 1,143,210;
  --accent-bright: #34C8FF;
  --accent-deep: #012D6A;
  --accent-text: #01608F;
  --accent-solid: #01608F;
  --accent-soft: rgba(1,143,210,.12);
  --accent-veil: rgba(1,143,210,.06);
  --shadow-accent: 0 10px 30px rgba(1,143,210,.30);
  --gradient: linear-gradient(120deg, #34C8FF, #018FD2, #012D6A);
  --gradient-soft: linear-gradient(135deg, rgba(52,200,255,.16), rgba(1,45,106,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Retail - Status: VERIFIED */
[data-brand="retail"]{
  --brand-id: retail;
  --brand-name: "Simply Retail";
  --brand-descriptor: "Retail";
  --accent: #1E8E3E;
  --accent-rgb: 30,142,62;
  --accent-bright: #44B86A;
  --accent-deep: #155E2A;
  --accent-text: #14682D;
  --accent-solid: #14682D;
  --accent-soft: rgba(30,142,62,.12);
  --accent-veil: rgba(30,142,62,.06);
  --shadow-accent: 0 10px 30px rgba(30,142,62,.30);
  --gradient: linear-gradient(135deg, #44B86A, #1E8E3E, #155E2A);
  --gradient-soft: linear-gradient(135deg, rgba(68,184,106,.16), rgba(21,94,42,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
  --secondary: #3C8C78;
  --secondary-rgb: 60,140,120;
  --secondary-soft: rgba(60,140,120,.14);
  --secondary-veil: rgba(60,140,120,.06);
  --secondary-bright: #6BB6A4;
  --secondary-text: #2A6354;
  --secondary-deep: #173D34;
  --secondary-solid: #2A6354;
}

/* Tiefbau & Glasfaser - Status: PROPOSAL */
[data-brand="infra"]{
  --brand-id: infra;
  --brand-name: "Tiefbau & Glasfaser";
  --brand-descriptor: "Infra";
  --accent: #0E6E7D;
  --accent-rgb: 14,110,125;
  --accent-bright: #3FB8CC;
  --accent-deep: #063B45;
  --accent-text: #0A5A66;
  --accent-solid: #0A5A66;
  --accent-soft: rgba(14,110,125,.12);
  --accent-veil: rgba(14,110,125,.06);
  --shadow-accent: 0 10px 30px rgba(14,110,125,.30);
  --gradient: linear-gradient(135deg, #3FB8CC, #0E6E7D, #063B45);
  --gradient-soft: linear-gradient(135deg, rgba(63,184,204,.16), rgba(6,59,69,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Finance - Status: PROPOSAL */
[data-brand="finance"]{
  --brand-id: finance;
  --brand-name: "Simply Finance";
  --brand-descriptor: "Finance";
  --accent: #0A7D6E;
  --accent-rgb: 10,125,110;
  --accent-bright: #14B39E;
  --accent-deep: #043D35;
  --accent-text: #075E54;
  --accent-solid: #075E54;
  --accent-soft: rgba(10,125,110,.12);
  --accent-veil: rgba(10,125,110,.06);
  --shadow-accent: 0 10px 30px rgba(10,125,110,.30);
  --gradient: linear-gradient(135deg, #14B39E, #0A7D6E, #043D35);
  --gradient-soft: linear-gradient(135deg, rgba(20,179,158,.16), rgba(4,61,53,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Energy - Status: PROPOSAL */
[data-brand="energy"]{
  --brand-id: energy;
  --brand-name: "Simply Energy";
  --brand-descriptor: "Energy";
  --accent: #C97B0B;
  --accent-rgb: 201,123,11;
  --accent-bright: #FFC53D;
  --accent-deep: #6B3F02;
  --accent-text: #8A5405;
  --accent-solid: #8A5405;
  --accent-soft: rgba(201,123,11,.12);
  --accent-veil: rgba(201,123,11,.06);
  --shadow-accent: 0 10px 30px rgba(201,123,11,.30);
  --gradient: linear-gradient(135deg, #FFC53D, #C97B0B, #6B3F02);
  --gradient-soft: linear-gradient(135deg, rgba(255,197,61,.16), rgba(107,63,2,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Mobility - Status: PROPOSAL */
[data-brand="mobility"]{
  --brand-id: mobility;
  --brand-name: "Simply Mobility";
  --brand-descriptor: "Mobility";
  --accent: #2F8F63;
  --accent-rgb: 47,143,99;
  --accent-bright: #5DCAA5;
  --accent-deep: #134430;
  --accent-text: #256F4D;
  --accent-solid: #256F4D;
  --accent-soft: rgba(47,143,99,.12);
  --accent-veil: rgba(47,143,99,.06);
  --shadow-accent: 0 10px 30px rgba(47,143,99,.30);
  --gradient: linear-gradient(135deg, #5DCAA5, #2F8F63, #134430);
  --gradient-soft: linear-gradient(135deg, rgba(93,202,165,.16), rgba(19,68,48,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}

/* Simply Security - Status: PROPOSAL */
[data-brand="security"]{
  --brand-id: security;
  --brand-name: "Simply Security";
  --brand-descriptor: "Security";
  --accent: #2F4858;
  --accent-rgb: 47,72,88;
  --accent-bright: #8AA9BC;
  --accent-deep: #16242D;
  --accent-text: #2A4150;
  --accent-solid: #2A4150;
  --accent-soft: rgba(47,72,88,.12);
  --accent-veil: rgba(47,72,88,.06);
  --shadow-accent: 0 10px 30px rgba(47,72,88,.30);
  --gradient: linear-gradient(135deg, #8AA9BC, #2F4858, #16242D);
  --gradient-soft: linear-gradient(135deg, rgba(138,169,188,.16), rgba(22,36,45,.04));
  --logo-constant-color: var(--logo-constant);
  --logo-descriptor-color: var(--accent);
}