/* ============================================================
   LIQUID GLASS DESIGN TOKENS
   Raven51 CD-konforme Design-Token-Bibliothek
   Zentrale Quelle für alle Liquid Glass Projekte
   ============================================================ */

:root {
    /* ── Raven51 Brand Colors ── */
    --lg-red:           #e30613;
    --lg-red-hover:     #c5000a;
    --lg-red-light:     rgba(227, 6, 19, .08);

    --lg-teal:          #006269;
    --lg-teal-hover:    #004d52;
    --lg-teal-light:    rgba(0, 98, 105, .10);

    /* Raven51 CD Sekundär */
    --lg-tradewind:     #57bcb1;
    --lg-jagged-ice:    #b9dfe0;

    /* Raven51 CD Tertiär */
    --lg-bisque:        #fde1c7;
    --lg-melon:         #f5a9a6;

    /* Raven51 CD Grautöne */
    --lg-delta-grey:    #929292;
    --lg-nero:          #2e2d2c;

    /* ── Status Colors ── */
    --lg-success:       #059669;
    --lg-success-light: rgba(5, 150, 105, .08);
    --lg-warning:       #d97706;
    --lg-warning-light: rgba(217, 119, 6, .08);
    --lg-error:         #dc2626;
    --lg-error-light:   rgba(220, 38, 38, .08);
    --lg-info:          #2563eb;
    --lg-info-light:    rgba(37, 99, 235, .06);

    /* ── Text Colors ── */
    --lg-text:          #2e2d2c;
    --lg-text-secondary:#475569;
    --lg-text-muted:    #929292;
    --lg-text-inverse:  #fff;

    /* ── Surfaces ── */
    --lg-surface:       #fff;
    --lg-surface-raised:#f8fafb;
    --lg-surface-sunken:#f1f5f6;

    /* ── Borders ── */
    --lg-border:        rgba(0, 50, 55, .12);
    --lg-border-light:  rgba(0, 50, 55, .06);
    --lg-border-focus:  var(--lg-teal);

    /* ── Glass Surfaces (3 Stufen) ── */
    --lg-glass-bg:          rgba(255, 255, 255, .85);
    --lg-glass-bg-hover:    rgba(255, 255, 255, .92);
    --lg-glass-bg-active:   rgba(255, 255, 255, .95);
    --lg-glass-blur:        blur(6px);
    --lg-glass-border:      1.5px solid var(--lg-border);
    --lg-glass-shadow:      inset 0 1px 3px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .02);
    --lg-glass-focus-ring:  0 0 0 3px rgba(0, 98, 105, .10);

    /* Glass Strong (Footer, Overlays) */
    --lg-glass-strong-bg:       rgba(255, 255, 255, .18);
    --lg-glass-strong-blur:     blur(40px) saturate(1.8) brightness(1.05);
    --lg-glass-strong-border:   1px solid rgba(255, 255, 255, .45);
    --lg-glass-strong-shadow:   0 -4px 24px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .3);

    /* Glass Dark (Headers) */
    --lg-glass-dark-bg:     var(--lg-teal);
    --lg-glass-dark-border: rgba(255, 255, 255, .12);

    /* ── AI / Orbit System ── */
    --lg-ai-color:      #006269;
    --lg-ai-light:      rgba(0, 98, 105, .06);
    --lg-ai-gradient:   linear-gradient(135deg, #006269 0%, #57bcb1 100%);
    --lg-ai-surface:    linear-gradient(145deg, #E2F0F1, #BAD9D8);
    --lg-ai-surface-hover: linear-gradient(145deg, #d8eaeb, #afd0cf);

    --lg-orbit-conic: conic-gradient(
        from 45deg,
        rgba(0, 98, 105, .7),
        rgba(87, 188, 177, .5),
        rgba(185, 223, 224, .35),
        rgba(253, 225, 199, .3),
        rgba(245, 169, 166, .4),
        rgba(227, 6, 19, .3),
        rgba(40, 94, 98, .5),
        rgba(0, 98, 105, .7)
    );
    --lg-orbit-conic-strong: conic-gradient(
        from 45deg,
        rgba(0, 98, 105, .9),
        rgba(87, 188, 177, .7),
        rgba(185, 223, 224, .5),
        rgba(253, 225, 199, .4),
        rgba(245, 169, 166, .55),
        rgba(227, 6, 19, .4),
        rgba(40, 94, 98, .7),
        rgba(0, 98, 105, .9)
    );

    /* ── Spacing Scale ── */
    --lg-space-2xs:     2px;
    --lg-space-xs:      4px;
    --lg-space-sm:      8px;
    --lg-space-md:      12px;
    --lg-space-lg:      16px;
    --lg-space-xl:      24px;
    --lg-space-2xl:     32px;
    --lg-space-3xl:     48px;

    /* ── Border Radius ── */
    --lg-radius-xs:     4px;
    --lg-radius-sm:     6px;
    --lg-radius-md:     10px;
    --lg-radius-lg:     14px;
    --lg-radius-xl:     20px;
    --lg-radius-full:   9999px;

    /* ── Shadows ── */
    --lg-shadow-xs:     0 1px 2px rgba(0, 0, 0, .04);
    --lg-shadow-sm:     0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --lg-shadow-md:     0 2px 8px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
    --lg-shadow-lg:     0 8px 24px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
    --lg-shadow-xl:     0 16px 48px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);

    /* ── Typography ── */
    --lg-font:          'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lg-text-2xs:      clamp(.625rem,  .6rem  + .1vw,  .6875rem);   /* ~10–11px */
    --lg-text-xs:       clamp(.75rem,   .73rem + .1vw,  .8125rem);   /* ~12–13px */
    --lg-text-sm:       clamp(.875rem,  .85rem + .15vw, .9375rem);   /* ~14–15px */
    --lg-text-base:     clamp(1rem,     .95rem + .25vw, 1.1rem);     /* ~16–17.6px */
    --lg-text-lg:       clamp(1.15rem,  1.05rem + .5vw, 1.35rem);    /* ~18.4–21.6px */
    --lg-text-xl:       clamp(1.5rem,   1.3rem + 1vw,   1.9rem);     /* ~24–30.4px */

    /* ── Transitions ── */
    --lg-ease-fast:     .15s ease;
    --lg-ease-base:     .2s ease;
    --lg-ease-slow:     .3s ease;
    --lg-ease-spring:   .35s cubic-bezier(.4, 0, .2, 1);

    /* ── Icon Sizes (4 feste Stufen) ── */
    --lg-icon-sm:       14px;
    --lg-icon-md:       18px;
    --lg-icon-lg:       24px;
    --lg-icon-xl:       32px;

    /* ── Portal Brand Colors ── */
    --lg-c-stepstone:   #009ee0;
    --lg-c-indeed:      #2164f3;
    --lg-c-linkedin:    #0a66c2;
    --lg-c-xing:        #006567;
    --lg-c-glassdoor:   #0caa41;
    --lg-c-ba:          #004b76;
    --lg-c-jobware:     #0066cc;
}