@charset "UTF-8";
/* =====================================================================
   iBricks Design Tokens — single source of truth for the visi2http UI
   ---------------------------------------------------------------------
   Foundation layer: every color is declared once here as a CSS custom
   property and consumed elsewhere via var(--ib-*). This is loaded first
   (before ibricks-*.css) so the stylesheets can resolve the tokens.

   The neutral dark surfaces/borders/text are the CloudPortalCore-style
   black / dark-gray ramp. The brand accent (lime) and the map functional
   colors (--ib-fe-*) are kept. The semantic palette is the luminous set
   from the styleguide lab; in the live app the on/active green collapses to
   the lime accent (#BFFF2F) for consistency with the buttons.

   SSOT mirror lives in the knowledge base:
   _iBricks_claude_skills/internals/architecture/visi2http-styleguide/ibricks-tokens.css
   The webfonts (@font-face for roboto and true-minimalistic-icons) are already
   declared by the app's own stylesheets, so they are intentionally omitted
   here — this file carries tokens only.
   ===================================================================== */
:root {
    /* Declare the page as dark so Android Chrome's "Auto Dark Theme" leaves
       our already-dark UI alone instead of force-inverting it. */
    color-scheme: dark;

    /* --- Brand ------------------------------------------------------- */
    --ib-accent:            #BFFF2F;   /* Hellgrün — primary accent     */
    --ib-accent-dark:       #A6E01F;   /* Hellgrün dunkel               */
    --ib-accent-contrast:   #0C0C0D;   /* text/icon on top of accent    */

    /* --- Surfaces (dark theme) -------------------------------------- */
    --ib-bg:                #0A0A0B;   /* app background (deepest)      */
    --ib-surface:           #151517;   /* infobar, cards, modal body    */
    --ib-surface-2:         #0F0F11;   /* main menu (one notch darker)  */
    --ib-surface-3:         #1F1F22;   /* raised rows / Dunkelgrau hell */
    --ib-surface-4:         #1A1A1C;   /* Dunkelgrau dunkel             */
    --ib-overlay:           rgba(0, 0, 0, .55);  /* modal backdrop      */
    --ib-scrim:             rgba(0, 0, 0, .48);  /* neutral scrim        */

    /* --- Borders / dividers ----------------------------------------- */
    --ib-border:            #2B2B2F;   /* default hairline border       */
    --ib-border-soft:       #202024;   /* modal frame border            */
    --ib-border-strong:     #3A3A40;   /* input / control border        */

    /* --- Text ------------------------------------------------------- */
    --ib-text:              #EAEAEC;   /* Weiss hell — body text        */
    --ib-text-strong:       #FFFFFF;   /* headings / emphasis           */
    --ib-text-muted:        #8E8E95;   /* Hellgrau — secondary text     */
    --ib-text-faint:        #5A5A61;   /* Mittelgrau — disabled/labels  */
    --ib-text-on-light:     var(--ib-text);   /* REPURPOSED 2026-08-27: Eingabe-Text jetzt HELL auf dunklem Feld (war #0C0C0D); Name historisch */

    /* --- Semantic palette (Hell / Dunkel) ---------------------------
       Die Dunkel-Werte sind bewusst DEUTLICH dunkler als die Hell-Werte (klarer
       Hell/Dunkel-Kontrast, aus der SSOT 2026-08-27). Grün bleibt live == Limette
       (Akzent); die Grau-Rampe unten ist unverändert (trägt die Button-Flächen). */
    --ib-red:        #FF4D4F;  --ib-red-dark:       #801A1C;
    --ib-orange:     #FFB020;  --ib-orange-dark:    #6E4906;
    --ib-limegreen:  #BFFF2F;  --ib-limegreen-dark: #A6E01F;  /* == accent */
    --ib-green:      #BFFF2F;  --ib-green-dark:     #A6E01F;  /* live app: on/active green == lime accent */
    --ib-blue:       #2E90FA;  --ib-blue-dark:      #0D4288;
    --ib-violet:     #9D6BFF;  --ib-violet-dark:    #43267C;
    --ib-pink:       #E86BF0;  --ib-pink-dark:      #642673;
    --ib-fuchsia:    #FF4D94;  --ib-fuchsia-dark:   #7E1D46;
    --ib-graydark:   #242424;  --ib-graydark-dark:  #1A1A1C;
    --ib-graymid:    #3A3A40;  --ib-graymid-dark:   #2A2A2E;
    --ib-graylight:  #8E8E95;  --ib-graylight-dark: #5A5A61;
    --ib-white:      #EAEAEC;  --ib-white-dark:     #8C8C8C;

    /* --- Button role fills (calm greys for settings/assistants) ----- */
    --ib-btn-create:    var(--ib-graylight-dark);  /* #5A5A61 — Assistent · Neuer Eintrag · ändern */
    --ib-btn-secondary: var(--ib-graymid-dark);    /* #2A2A2E — Test · Zurück · Aus */

    /* --- Canonical button face (Szenen-Kachel) — flache dunkle Fläche + dezenter Gloss & Schatten;
       KEIN Hover, :active = pressed inset. Semantik auf Icon/Text/Rahmen, nie Füllung — ausser --primary
       (lime). NB: der Panel-Button (ibricks-button.css) setzt --ib-btn-face zusätzlich INLINE je Instanz aus
       der Geräte-Config; die Inline-Zuweisung schlägt dieses :root-Token, Default-Wert ist ohnehin #2A2A2E. */
    --ib-btn-face:      var(--ib-graymid-dark);     /* #2A2A2E */
    --ib-btn-gloss:     linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.07));
    --ib-btn-shadow:    0 1px 2px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.07);
    --ib-btn-pressed:   inset 0 1px 3px rgba(0, 0, 0, .38);

    --ib-progbox:       var(--ib-surface-2);        /* script / program boxes */
    --ib-field:         var(--ib-surface-3);        /* REPURPOSED 2026-08-27: Eingabe-Flaeche jetzt DUNKEL #1F1F22 (war hell #EAEAECEC) */

    /* --- Status aliases (map intent -> palette) --------------------- */
    --ib-success:           var(--ib-green);
    --ib-warning:           var(--ib-orange);
    --ib-danger:            var(--ib-red);
    --ib-info:              var(--ib-blue);

    /* --- Notification dots ------------------------------------------ */
    --ib-dot-red:           #FF5257;
    --ib-dot-blue:          #5AACFF;
    --ib-dot-yellow:        #FFE536;
    --ib-dot-green:         #C6FF3D;
    --ib-dot-white:         #FFFFFF;

    /* --- Map functional-element colors (DO NOT CHANGE) -------------- */
    --ib-fe-light:    #D3FF4A;   /* light / spot                         */
    --ib-fe-shade:    #12CDFF;   /* shutter / lock / door / window / fan */
    --ib-fe-climate:  #D2FFCC;   /* heating / cooling / outlet / valve   */
    --ib-fe-motor:    #45FF45;   /* motor / reader / device              */
    --ib-fe-media:    #FF3BAB;   /* speaker / audio / video              */
    --ib-fe-camera:   #FFEAB0;   /* camera                               */
    --ib-fe-item:     #D7E70E;   /* item / vehicle                       */
    --ib-fe-alarm:    #FF797B;   /* alarm — triggered                    */
    --ib-fe-alarm-warn: #FFA500; /* alarm — warning                      */
    --ib-director-heat: #FF4444; /* director ring — heating              */
    --ib-director-cool: #9BD2FF; /* director ring — cooling              */
    --ib-director-ring: #101010; /* director backdrop circle             */

    /* --- Radii / motion (available for future migration) ------------ */
    --ib-radius-sm:  8px;
    --ib-radius-btn: 10px;   /* Button / Segment (Szenen-Kachel) */
    --ib-radius:     12px;
    --ib-radius-lg:  16px;
    --ib-radius-pill: 999px;
    --ib-ease:    cubic-bezier(.4, 0, .2, 1);
    --ib-dur:     .15s;

    /* --- Glass design language (opt-in PER PANEL via [data-design="glass"]) ------
       A whole panel switches to a frosted-glass skin; every element on it follows,
       so glass is "durchgängig" and never a lone foreign body (the reason the
       isolated-slider prototype was pulled — knowledge/plans/visi2-glass-design.md).

       The look combines TWO effects so it works on the near-black panel ground:
       (1) a translucent LIGHT film (--ib-glass-bg) that lifts off the dark
           background on its own — this is what carries the effect where nothing
           sits behind the panel; and
       (2) backdrop-blur (--ib-glass-blur), which additionally bites wherever a
           colored/image ground or an overlapping element sits behind the glass.
       Perf is uncritical for small faces (measured: no delta at 60fps); re-measure
       if glass ever covers large areas on a wall panel. backdrop-filter does NOT
       apply to ::-webkit-slider-thumb — the slider needs a real overlay element. */
    --ib-glass-bg:        rgba(255, 255, 255, .10);  /* translucent light film over the dark ground */
    --ib-glass-bg-strong: rgba(255, 255, 255, .16);  /* denser film for text-bearing faces (contrast) */
    --ib-glass-blur:      blur(12px) saturate(140%);  /* backdrop-filter value */
    --ib-glass-gloss:     linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,0) 100%);
    --ib-glass-rim-light: rgba(255, 255, 255, .55);  /* top/left glass edge highlight — carries the look on a dark ground */
    --ib-glass-rim-dark:  rgba(0, 0, 0, .30);        /* bottom/right edge shade */
    --ib-glass-shadow:    0 6px 22px rgba(0, 0, 0, .45);  /* drop shadow to lift glass off the surface */
}