/*  IRAS Design Tokens
    Zentrale Stelle fuer Farben, Typografie, Spacing, Radii, Shadows.
    Aenderungen hier wirken sich auf die gesamte Seite aus.          */

:root {
    /* ── Farben: Primaer (abgeleitet aus IRAS Produkt-UI) ── */
    --c-primary-900: #0f2b33;
    --c-primary-800: #163a45;
    --c-primary-700: #1e4d5a;
    --c-primary-600: #2a6474;
    --c-primary-500: #357a8c;
    --c-primary-400: #4a99aa;
    --c-primary-300: #74b5c3;
    --c-primary-200: #a8d4dd;
    --c-primary-100: #d6edf2;
    --c-primary-50:  #eef7f9;

    /* ── Farben: Neutral ── */
    --c-neutral-950: #0e1114;
    --c-neutral-900: #1a1f24;
    --c-neutral-800: #2a3038;
    --c-neutral-700: #3d4550;
    --c-neutral-600: #556068;
    --c-neutral-500: #6e7880;
    --c-neutral-400: #8e969d;
    --c-neutral-300: #b0b7bc;
    --c-neutral-200: #d2d7da;
    --c-neutral-100: #e8ebed;
    --c-neutral-50:  #f4f6f7;

    /* ── Farben: Akzent ── */
    --c-accent: #2a8a7a;
    --c-accent-hover: #228070;

    /* ── Farben: Funktional ── */
    --c-success: #2d7a5a;
    --c-warning: #c47a20;
    --c-danger: #b83c3c;

    /* ── Farben: Semantisch (einfach anpassbar) ── */
    --color-bg: var(--c-neutral-50);
    --color-surface: #ffffff;
    --color-text: var(--c-neutral-900);
    --color-text-secondary: var(--c-neutral-600);
    --color-text-tertiary: var(--c-neutral-500);
    --color-border: var(--c-neutral-200);
    --color-border-light: var(--c-neutral-100);

    --color-hero-bg: var(--c-primary-900);
    --color-hero-text: #ffffff;
    --color-hero-muted: var(--c-primary-200);

    --color-btn-primary-bg: var(--c-primary-600);
    --color-btn-primary-text: #ffffff;
    --color-btn-primary-hover: var(--c-primary-700);

    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-text: var(--c-primary-600);
    --color-btn-secondary-border: var(--c-primary-400);
    --color-btn-secondary-hover: var(--c-primary-50);
    --color-nav-bg: rgba(15, 43, 51, 0.92);

    /* ── Typografie ── */
    --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --leading-tight: 1.1;
    --leading-snug:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.08em;

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --max-width: 1200px;
    --max-width-narrow: 720px;
    --gutter: var(--space-6);

    /* ── Radii ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(14, 17, 20, 0.06);
    --shadow-md: 0 4px 16px rgba(14, 17, 20, 0.08);
    --shadow-lg: 0 12px 40px rgba(14, 17, 20, 0.1);
    --shadow-xl: 0 24px 64px rgba(14, 17, 20, 0.14);
    --shadow-img: 0 16px 48px rgba(14, 17, 20, 0.18);

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}

html[data-themed-surfaces="true"] {
    --color-bg: var(--c-primary-50);
    --color-border: var(--c-primary-200);
    --color-border-light: var(--c-primary-100);
}

html[data-theme="ifam"] {
    --c-primary-900: #021a2b;
    --c-primary-800: #063344;
    --c-primary-700: #005f73;
    --c-primary-600: #00839b;
    --c-primary-500: #0097b2;
    --c-primary-400: #36aabd;
    --c-primary-300: #7bc9d4;
    --c-primary-200: #b7e2e8;
    --c-primary-100: #dbeff1;
    --c-primary-50: #f0fafb;
    --c-neutral-950: #021a2b;
    --c-neutral-900: #0e273a;
    --c-neutral-800: #303d48;
    --c-neutral-700: #4a5058;
    --c-neutral-600: #59636c;
    --c-neutral-500: #6d767d;
    --c-neutral-400: #8e979e;
    --c-neutral-300: #b7bec2;
    --c-neutral-200: #d6dbdd;
    --c-neutral-100: #e8ebec;
    --c-neutral-50: #f5f6f6;
    --c-accent: #4a5058;
    --c-accent-hover: #394047;
    --color-nav-bg: rgba(2, 26, 43, 0.96);
}

html[data-theme="blue"] {
    --c-primary-900: #102a43;
    --c-primary-800: #183b5b;
    --c-primary-700: #1a4f78;
    --c-primary-600: #1769aa;
    --c-primary-500: #2185d0;
    --c-primary-400: #58a9e4;
    --c-primary-300: #93c9ee;
    --c-primary-200: #c5e2f6;
    --c-primary-100: #e2f1fb;
    --c-primary-50: #f2f9fe;
    --c-neutral-950: #111820;
    --c-neutral-900: #1f2933;
    --c-neutral-800: #323f4b;
    --c-neutral-700: #4a5a68;
    --c-neutral-600: #627281;
    --c-neutral-500: #7b8b99;
    --c-neutral-400: #9aa8b5;
    --c-neutral-300: #bdc7d0;
    --c-neutral-200: #d8dfe5;
    --c-neutral-100: #e9eef2;
    --c-neutral-50: #f4f7fa;
    --c-accent: #c66a24;
    --c-accent-hover: #a8551a;
    --color-nav-bg: rgba(16, 42, 67, 0.94);
}

html[data-theme="green"] {
    --c-primary-900: #143a36;
    --c-primary-800: #1a514a;
    --c-primary-700: #1d685d;
    --c-primary-600: #247d6e;
    --c-primary-500: #2b9a84;
    --c-primary-400: #58b69e;
    --c-primary-300: #91d0bd;
    --c-primary-200: #c1e7da;
    --c-primary-100: #e0f4ed;
    --c-primary-50: #f1fbf7;
    --c-neutral-950: #131917;
    --c-neutral-900: #202c29;
    --c-neutral-800: #354440;
    --c-neutral-700: #4d5c57;
    --c-neutral-600: #65736e;
    --c-neutral-500: #7e8b86;
    --c-neutral-400: #9ca7a2;
    --c-neutral-300: #bec7c2;
    --c-neutral-200: #d9dfdb;
    --c-neutral-100: #e9eeeb;
    --c-neutral-50: #f4f7f5;
    --c-accent: #c46a28;
    --c-accent-hover: #a8561d;
    --color-nav-bg: rgba(20, 58, 54, 0.94);
}

html[data-theme="graphite"] {
    --c-primary-900: #222a31;
    --c-primary-800: #303a43;
    --c-primary-700: #46525d;
    --c-primary-600: #5d707c;
    --c-primary-500: #718593;
    --c-primary-400: #8da2af;
    --c-primary-300: #b5c4ca;
    --c-primary-200: #d6e0e3;
    --c-primary-100: #eaf0f1;
    --c-primary-50: #f5f8f8;
    --c-neutral-950: #171d22;
    --c-neutral-900: #29333a;
    --c-neutral-700: #53626b;
    --c-neutral-600: #6a7880;
    --c-neutral-500: #849098;
    --c-neutral-400: #a1aaaf;
    --c-neutral-300: #c2c9cc;
    --c-neutral-200: #dce1e3;
    --c-neutral-100: #edf0f1;
    --c-neutral-50: #f7f8f8;
    --c-accent: #00a8c6;
    --c-accent-hover: #008ba5;
    --color-nav-bg: rgba(34, 42, 49, 0.96);
}

html[data-theme="copper"] {
    --c-primary-900: #202a35;
    --c-primary-800: #2d3b48;
    --c-primary-700: #46515b;
    --c-primary-600: #b86e36;
    --c-primary-500: #ce8245;
    --c-primary-400: #df9d63;
    --c-primary-300: #edbd91;
    --c-primary-200: #f5d9bd;
    --c-primary-100: #fbebdc;
    --c-primary-50: #fef8f3;
    --c-neutral-950: #17212a;
    --c-neutral-900: #293741;
    --c-neutral-700: #52616a;
    --c-neutral-600: #6a7980;
    --c-neutral-500: #839096;
    --c-neutral-400: #a0aaad;
    --c-neutral-300: #c0c7c9;
    --c-neutral-200: #dce1e1;
    --c-neutral-100: #edf0f0;
    --c-neutral-50: #f7f8f7;
    --c-accent: #4fa895;
    --c-accent-hover: #3c8e7d;
    --color-nav-bg: rgba(32, 42, 53, 0.96);
}

html[data-theme="violet"] {
    --c-primary-900: #25243b;
    --c-primary-800: #363552;
    --c-primary-700: #514e74;
    --c-primary-600: #7161a8;
    --c-primary-500: #8877bd;
    --c-primary-400: #a696d0;
    --c-primary-300: #c3b9e2;
    --c-primary-200: #ded8f0;
    --c-primary-100: #eeeaf8;
    --c-primary-50: #f8f6fc;
    --c-neutral-950: #1d1c29;
    --c-neutral-900: #302f3c;
    --c-neutral-700: #585661;
    --c-neutral-600: #706e77;
    --c-neutral-500: #89868e;
    --c-neutral-400: #a5a2a8;
    --c-neutral-300: #c6c3c7;
    --c-neutral-200: #dedcdf;
    --c-neutral-100: #efedef;
    --c-neutral-50: #f8f7f8;
    --c-accent: #d67a83;
    --c-accent-hover: #bd626c;
    --color-nav-bg: rgba(37, 36, 59, 0.96);
}

html[data-theme="ocean"] {
    --c-primary-900: #062c42;
    --c-primary-800: #08445e;
    --c-primary-700: #075d7c;
    --c-primary-600: #007e98;
    --c-primary-500: #009eb5;
    --c-primary-400: #40b8c6;
    --c-primary-300: #85d0d7;
    --c-primary-200: #bee7e9;
    --c-primary-100: #dff3f4;
    --c-primary-50: #f1fbfb;
    --c-neutral-950: #071d2a;
    --c-neutral-900: #14394b;
    --c-neutral-700: #456371;
    --c-neutral-600: #5f7983;
    --c-neutral-500: #789099;
    --c-neutral-400: #96a9af;
    --c-neutral-300: #bbc8cc;
    --c-neutral-200: #d7e0e2;
    --c-neutral-100: #e9eeee;
    --c-neutral-50: #f4f8f8;
    --c-accent: #e2a44e;
    --c-accent-hover: #c98c39;
    --color-nav-bg: rgba(6, 44, 66, 0.96);
}

html[data-theme="sage"] {
    --c-primary-900: #263d38;
    --c-primary-800: #39534d;
    --c-primary-700: #536e65;
    --c-primary-600: #718d7f;
    --c-primary-500: #87a391;
    --c-primary-400: #a3bba9;
    --c-primary-300: #c2d2c5;
    --c-primary-200: #dce8de;
    --c-primary-100: #edf4ee;
    --c-primary-50: #f7faf7;
    --c-neutral-950: #1c2522;
    --c-neutral-900: #303d38;
    --c-neutral-700: #59645e;
    --c-neutral-600: #707a74;
    --c-neutral-500: #8a928d;
    --c-neutral-400: #a5aaa6;
    --c-neutral-300: #c4c8c5;
    --c-neutral-200: #dde0de;
    --c-neutral-100: #edefed;
    --c-neutral-50: #f7f8f7;
    --c-accent: #c88b3b;
    --c-accent-hover: #ad742c;
    --color-nav-bg: rgba(38, 61, 56, 0.96);
}

html[data-theme="sunset"] {
    --c-primary-900: #2d3446;
    --c-primary-800: #424b60;
    --c-primary-700: #5e6478;
    --c-primary-600: #d37a5d;
    --c-primary-500: #e1906e;
    --c-primary-400: #eca986;
    --c-primary-300: #f3c2a6;
    --c-primary-200: #f8ddcd;
    --c-primary-100: #fcece4;
    --c-primary-50: #fff8f5;
    --c-neutral-950: #202633;
    --c-neutral-900: #353c4a;
    --c-neutral-700: #5c6370;
    --c-neutral-600: #747a85;
    --c-neutral-500: #8b9099;
    --c-neutral-400: #a5a8ae;
    --c-neutral-300: #c5c7ca;
    --c-neutral-200: #dedfe1;
    --c-neutral-100: #efeff0;
    --c-neutral-50: #f8f8f8;
    --c-accent: #4fa69d;
    --c-accent-hover: #3b8d85;
    --color-nav-bg: rgba(45, 52, 70, 0.96);
}