/* ==========================================================================
   FARMERINO DESIGN TOKENS - Single Source of Truth
   ==========================================================================
   Alle Farben, Abstände, Typografie etc. werden hier zentral definiert.
   Sowohl Tailwind als auch Radzen referenzieren diese Tokens.

   NUTZUNG:
   - Tailwind:  tailwind.config.js nutzt die Farbnamen als CSS-Variablen
   - Radzen:    --rz-* Variablen werden hier mit Token-Werten überschrieben
   - Eigenes CSS: Verwende var(--f-color-primary) etc.
   ========================================================================== */

:root {
    /* =================================================================
       MARKENFARBEN
       ================================================================= */
    --f-color-primary:           #00AB4E;
    --f-color-primary-light:     #33bc71;
    --f-color-primary-lighter:   rgba(0, 171, 78, 0.16);
    --f-color-primary-dark:      #008a3e;
    --f-color-primary-darker:    #006b30;

    --f-color-secondary:         #ffed4a;
    --f-color-secondary-light:   #fff07a;
    --f-color-secondary-lighter: rgba(255, 237, 74, 0.16);
    --f-color-secondary-dark:    #e6d542;
    --f-color-secondary-darker:  #ccbe3b;

    /* =================================================================
       SEMANTISCHE FARBEN
       ================================================================= */
    --f-color-success:           #009b51;
    --f-color-success-light:     #29ab6d;
    --f-color-success-lighter:   rgba(0, 155, 81, 0.16);
    --f-color-success-dark:      #008244;
    --f-color-success-darker:    #00763e;

    --f-color-info:              #12a4f5;
    --f-color-info-light:        #38b3f7;
    --f-color-info-lighter:      rgba(18, 164, 245, 0.16);
    --f-color-info-dark:         #0f8ace;
    --f-color-info-darker:       #0e7dba;

    --f-color-warning:           #ffae11;
    --f-color-warning-light:     #ffbb37;
    --f-color-warning-lighter:   rgba(255, 174, 17, 0.16);
    --f-color-warning-dark:      #d6920e;
    --f-color-warning-darker:    #c2840d;

    --f-color-danger:            #e53e3e;
    --f-color-danger-light:      #f56565;
    --f-color-danger-lighter:    rgba(229, 62, 62, 0.16);
    --f-color-danger-dark:       #c53030;
    --f-color-danger-darker:     #9b2c2c;

    /* =================================================================
       NEUTRALE FARBEN
       ================================================================= */
    --f-color-white:             #ffffff;
    --f-color-black:             #000000;
    --f-color-text:              #262526;
    --f-color-text-secondary:    #4f4f50;
    --f-color-text-muted:        #707072;
    --f-color-text-disabled:     #afafb2;
    --f-color-text-on-primary:   #ffffff;

    --f-color-bg:                #ffffff;
    --f-color-bg-secondary:      #f4f5f9;
    --f-color-bg-tertiary:       #e9eaed;

    --f-color-border:            #e2e8f0;
    --f-color-border-hover:      #cbd5e0;
    --f-color-border-focus:      var(--f-color-primary);

    /* =================================================================
       TYPOGRAFIE
       ================================================================= */
    --f-font-family:             "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --f-font-family-mono:        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* =================================================================
       BORDER-RADIUS
       ================================================================= */
    --f-radius-sm:               0.25rem;
    --f-radius-md:               0.5rem;
    --f-radius-lg:               0.75rem;
    --f-radius-xl:               1rem;
    --f-radius-full:             9999px;

    /* =================================================================
       SCHATTEN
       ================================================================= */
    --f-shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.05);
    --f-shadow-md:               0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --f-shadow-lg:               0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* =================================================================
       RADZEN OVERRIDES
       Radzen-Variablen werden auf die Farmerino-Tokens gemappt,
       damit alle Radzen-Komponenten konsistente Farben nutzen.
       ================================================================= */
    --rz-primary:                var(--f-color-primary);
    --rz-primary-light:          var(--f-color-primary-light);
    --rz-primary-lighter:        var(--f-color-primary-lighter);
    --rz-primary-dark:           var(--f-color-primary-dark);
    --rz-primary-darker:         var(--f-color-primary-darker);

    --rz-secondary:              var(--f-color-primary-light);
    --rz-secondary-light:        var(--f-color-primary);
    --rz-secondary-lighter:      var(--f-color-primary-lighter);
    --rz-secondary-dark:         var(--f-color-primary-dark);
    --rz-secondary-darker:       var(--f-color-primary-darker);

    --rz-success:                var(--f-color-success);
    --rz-success-light:          var(--f-color-success-light);
    --rz-success-lighter:        var(--f-color-success-lighter);
    --rz-success-dark:           var(--f-color-success-dark);
    --rz-success-darker:         var(--f-color-success-darker);

    --rz-info:                   var(--f-color-info);
    --rz-info-light:             var(--f-color-info-light);
    --rz-info-lighter:           var(--f-color-info-lighter);
    --rz-info-dark:              var(--f-color-info-dark);
    --rz-info-darker:            var(--f-color-info-darker);

    --rz-warning:                var(--f-color-warning);
    --rz-warning-light:          var(--f-color-warning-light);
    --rz-warning-lighter:        var(--f-color-warning-lighter);
    --rz-warning-dark:           var(--f-color-warning-dark);
    --rz-warning-darker:         var(--f-color-warning-darker);

    --rz-danger:                 var(--f-color-danger);
    --rz-danger-light:           var(--f-color-danger-light);
    --rz-danger-lighter:         var(--f-color-danger-lighter);
    --rz-danger-dark:            var(--f-color-danger-dark);
    --rz-danger-darker:          var(--f-color-danger-darker);

    --rz-on-primary:             var(--f-color-text-on-primary);
    --rz-on-primary-light:       var(--f-color-text-on-primary);
    --rz-on-primary-lighter:     var(--f-color-primary);
    --rz-on-primary-dark:        var(--f-color-text-on-primary);
    --rz-on-primary-darker:      var(--f-color-text-on-primary);

    --rz-text-font-family:       var(--f-font-family);
    --rz-link-color:             var(--f-color-primary);
    --rz-link-hover-color:       var(--f-color-primary-dark);

    --rz-text-title-color:       var(--f-color-text);
    --rz-text-color:             var(--f-color-text-secondary);
    --rz-text-secondary-color:   var(--f-color-text-muted);
}