# CubeCraft Creations display system — Home Assistant theme
#
# Source of truth for the tokens below is the production card's stylesheet:
#   custom_components/cubecraft_production/www/cubecraft-production-card.js
# Keep the two in sync. The card reads HA theme variables for its surfaces, so
# once this theme is active the CubeOps board and the rest of a dashboard end up
# on the same surfaces, borders and text colours automatically.
#
# The theme carries `modes:`, so it follows HA's light/dark setting. The brand
# gradient, type, radii and semantic colours are identical in both modes; only
# the surface and text ramps flip.
#
# TUNED FOR WALL PANELS: `header-height: 0px` near the bottom collapses the HA
# toolbar, matching what dakboard-dark did on these dashboards. If you ever want
# CubeCraft on a phone or desktop where you still need the toolbar, copy this
# file to themes/cubecraft-desktop.yaml, rename the top-level key, and delete
# that one line. (HA themes cannot inherit from each other, and this repo's YAML
# is loaded by HA's own loader, so a `<<:` merge anchor is not worth the risk of
# taking the whole themes include down.)
#
# Hiding the sidebar as well needs the kiosk-mode frontend plugin (HACS), which
# is not currently installed — see dashboards/views/cubeops-dashboard.yaml.

cubecraft:
  # ─────────────────────────────────────────────────────────────────────────
  # Brand tokens — mirrors the `:host` block in cubecraft-production-card.js.
  # Exposed as --cc-* so dashboard card_mod blocks can reference them by name
  # instead of hard-coding hexes in a dozen places.
  # ─────────────────────────────────────────────────────────────────────────
  cc-blue: "#3B3AB8"
  cc-purple: "#A035CC"
  cc-gradient: "linear-gradient(135deg, #3B3AB8 0%, #A035CC 100%)"

  cc-primary-50: "#EBEBF8"
  cc-primary-500: "#3B3AB8"
  cc-primary-700: "#201F7A"

  cc-neutral-0: "#FFFFFF"
  cc-neutral-50: "#FAFAFA"
  cc-neutral-100: "#F4F4F6"
  cc-neutral-150: "#EDEDF1"
  cc-neutral-200: "#E4E4EA"
  cc-neutral-400: "#9898A8"
  cc-neutral-600: "#52525E"
  cc-neutral-900: "#18181D"

  cc-success: "#16A34A"
  cc-warning: "#D97706"
  cc-warning-bg: "#FEF3C7"
  cc-error: "#DC2626"
  cc-error-bg: "#FEE2E2"

  # 4px spacing scale
  cc-space-1: "4px"
  cc-space-2: "8px"
  cc-space-3: "12px"
  cc-space-4: "16px"
  cc-space-5: "20px"
  cc-space-6: "24px"
  cc-space-7: "28px"

  cc-radius-sm: "6px"
  cc-radius-md: "8px"
  cc-radius-lg: "12px"
  cc-radius-xl: "16px"
  cc-radius-brand: "20px"
  cc-radius-full: "9999px"

  cc-shadow-sm: "0 2px 6px 0 rgba(0,0,0,.08)"
  cc-shadow-md: "0 4px 12px 0 rgba(0,0,0,.10)"
  cc-shadow-brand: "0 4px 20px 0 rgba(59,58,184,.25)"

  cc-ease: "cubic-bezier(0,0,.2,1)"
  cc-dur: "200ms"

  # ─────────────────────────────────────────────────────────────────────────
  # Typography — Nunito 400..800.
  # The @font-face has to be declared in the document, not a shadow root; that
  # is what www/cubecraft/cubecraft-brand-font.js does (wired up via
  # frontend.extra_module_url in configuration.yaml). Without it everything
  # below falls back to system-ui and the rest of the theme still works.
  # ─────────────────────────────────────────────────────────────────────────
  cc-font: "'Nunito', 'Nunito Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
  primary-font-family: "var(--cc-font)"
  ha-font-family-body: "var(--cc-font)"
  ha-font-family-heading: "var(--cc-font)"
  mdc-typography-font-family: "var(--cc-font)"
  paper-font-common-base_-_font-family: "var(--cc-font)"
  paper-font-common-nowrap_-_font-family: "var(--cc-font)"
  paper-font-body1_-_font-family: "var(--cc-font)"
  paper-font-subhead_-_font-family: "var(--cc-font)"
  paper-font-headline_-_font-family: "var(--cc-font)"
  paper-font-title_-_font-family: "var(--cc-font)"
  paper-font-caption_-_font-family: "var(--cc-font)"

  # ─────────────────────────────────────────────────────────────────────────
  # Shape — brand radius on cards, pills on controls.
  # ─────────────────────────────────────────────────────────────────────────
  ha-card-border-radius: "var(--cc-radius-brand)"
  ha-card-border-width: "0"
  ha-dialog-border-radius: "var(--cc-radius-brand)"
  ha-badge-border-radius: "var(--cc-radius-full)"
  mdc-shape-small: "var(--cc-radius-full)"
  mdc-shape-medium: "var(--cc-radius-lg)"
  mdc-shape-large: "var(--cc-radius-xl)"
  button-border-radius: "var(--cc-radius-full)"

  # ─────────────────────────────────────────────────────────────────────────
  # Colour — brand ramp. Surfaces/text live in the mode blocks below.
  # ─────────────────────────────────────────────────────────────────────────
  success-color: "var(--cc-success)"
  warning-color: "var(--cc-warning)"
  error-color: "var(--cc-error)"

  label-badge-green: "var(--cc-success)"
  label-badge-yellow: "var(--cc-warning)"
  label-badge-red: "var(--cc-error)"

  # Text sitting on top of primary-color (buttons, selected states). White
  # clears AA against both ends of the gradient (8.5:1 on the blue, 5.4:1 on
  # the purple), so it is safe wherever the gradient is used.
  text-primary-color: "#FFFFFF"
  app-header-text-color: "#FFFFFF"
  mdc-theme-on-primary: "#FFFFFF"

  # Wall-panel chrome: collapse the HA toolbar. Delete this line for a variant
  # you navigate by hand (see the header comment).
  header-height: "0px"

  modes:
    # ═══════════════════════════════════════════════════════════════════════
    # Light — the design system as authored: white surfaces, neutral sunken
    # backgrounds, near-black text.
    # ═══════════════════════════════════════════════════════════════════════
    light:
      cc-surface: "var(--cc-neutral-0)"
      cc-surface-sunken: "var(--cc-neutral-100)"
      cc-text: "var(--cc-neutral-900)"
      cc-text-muted: "var(--cc-neutral-600)"
      cc-border: "var(--cc-neutral-150)"
      cc-accent: "var(--cc-primary-500)"
      cc-accent-soft: "var(--cc-primary-50)"

      primary-color: "#3B3AB8"
      accent-color: "#A035CC"
      dark-primary-color: "#201F7A"
      light-primary-color: "#EBEBF8"
      info-color: "#3B3AB8"

      primary-text-color: "#18181D"
      secondary-text-color: "#52525E"
      disabled-text-color: "#9898A8"

      primary-background-color: "#F4F4F6"
      secondary-background-color: "#EDEDF1"
      card-background-color: "#FFFFFF"
      ha-card-background: "#FFFFFF"
      divider-color: "#EDEDF1"
      ha-card-box-shadow: "0 4px 12px 0 rgba(0,0,0,.10)"

      app-header-background-color: "#3B3AB8"
      more-info-header-background: "#F4F4F6"

      sidebar-background-color: "#FFFFFF"
      sidebar-text-color: "#52525E"
      sidebar-icon-color: "#9898A8"
      sidebar-selected-text-color: "#3B3AB8"
      sidebar-selected-icon-color: "#3B3AB8"

      state-icon-color: "#3B3AB8"
      state-icon-active-color: "#A035CC"
      state-unavailable-color: "#9898A8"
      paper-item-icon-color: "#9898A8"
      paper-item-icon-active-color: "#3B3AB8"

      switch-checked-color: "#3B3AB8"
      switch-checked-track-color: "#3B3AB8"
      switch-unchecked-color: "#9898A8"
      switch-unchecked-track-color: "#E4E4EA"
      slider-color: "#3B3AB8"
      slider-bar-color: "#E4E4EA"

      label-badge-blue: "#3B3AB8"
      label-badge-gray: "#9898A8"
      label-badge-text-color: "#18181D"
      ha-label-badge-background-color: "#FFFFFF"
      ha-label-badge-border-color: "#EDEDF1"

      table-row-background-color: "#FFFFFF"
      table-row-alternative-background-color: "#FAFAFA"
      markdown-code-background-color: "#F4F4F6"
      code-editor-background-color: "#FAFAFA"

      paper-card-background-color: "#FFFFFF"
      paper-card-header-color: "#18181D"
      paper-dialog-background-color: "#FFFFFF"
      paper-listbox-background-color: "#FFFFFF"
      input-fill-color: "#F4F4F6"
      input-ink-color: "#18181D"
      input-label-ink-color: "#52525E"
      iron-overlay-backdrop-background-color: "rgba(24,24,29,.32)"

      mdc-theme-primary: "#3B3AB8"
      mdc-theme-secondary: "#A035CC"
      mdc-theme-surface: "#FFFFFF"

      # Weather glyphs, kept in the brand family rather than default sky blue.
      weather-icon-sun-color: "#D97706"
      weather-icon-rain-color: "#3B3AB8"
      weather-icon-cloud-front-color: "#9898A8"
      weather-icon-cloud-back-color: "#E4E4EA"
      weather-icon-moon-color: "#52525E"

    # ═══════════════════════════════════════════════════════════════════════
    # Dark — violet-tinted neutrals so the brand gradient sits in the same
    # family as the surfaces rather than floating on plain grey. The primary
    # is lightened to #8B8AF2 (5.6:1 on the card surface); #3B3AB8 itself is
    # too dark to read as an accent here, though it stays correct inside the
    # gradient, which is left untouched.
    # ═══════════════════════════════════════════════════════════════════════
    dark:
      cc-surface: "#1C1C27"
      cc-surface-sunken: "#16161F"
      cc-text: "#EDEDF1"
      cc-text-muted: "#9898A8"
      cc-border: "#2A2A38"
      cc-accent: "#8B8AF2"
      cc-accent-soft: "#252438"

      primary-color: "#8B8AF2"
      accent-color: "#C77BEE"
      dark-primary-color: "#3B3AB8"
      light-primary-color: "#C9C8FA"
      info-color: "#8B8AF2"

      primary-text-color: "#EDEDF1"
      secondary-text-color: "#9898A8"
      disabled-text-color: "#6A6A7C"

      primary-background-color: "#0E0E14"
      secondary-background-color: "#16161F"
      card-background-color: "#1C1C27"
      ha-card-background: "#1C1C27"
      divider-color: "#2A2A38"
      ha-card-box-shadow: "0 4px 12px 0 rgba(0,0,0,.45)"

      app-header-background-color: "#16161F"
      more-info-header-background: "#16161F"

      sidebar-background-color: "#0E0E14"
      sidebar-text-color: "#9898A8"
      sidebar-icon-color: "#6A6A7C"
      sidebar-selected-text-color: "#8B8AF2"
      sidebar-selected-icon-color: "#8B8AF2"

      state-icon-color: "#8B8AF2"
      state-icon-active-color: "#C77BEE"
      state-unavailable-color: "#6A6A7C"
      paper-item-icon-color: "#6A6A7C"
      paper-item-icon-active-color: "#8B8AF2"

      switch-checked-color: "#8B8AF2"
      switch-checked-track-color: "#8B8AF2"
      switch-unchecked-color: "#6A6A7C"
      switch-unchecked-track-color: "#2A2A38"
      slider-color: "#8B8AF2"
      slider-bar-color: "#2A2A38"

      # Semantic colours lifted for dark surfaces; the light-mode values are
      # too dense to read at a distance on #1C1C27.
      success-color: "#4ADE80"
      warning-color: "#FBBF24"
      error-color: "#F87171"
      label-badge-green: "#4ADE80"
      label-badge-yellow: "#FBBF24"
      label-badge-red: "#F87171"
      label-badge-blue: "#8B8AF2"
      label-badge-gray: "#6A6A7C"
      label-badge-text-color: "#EDEDF1"
      ha-label-badge-background-color: "#1C1C27"
      ha-label-badge-border-color: "#2A2A38"

      table-row-background-color: "#1C1C27"
      table-row-alternative-background-color: "#20202C"
      markdown-code-background-color: "#252433"
      code-editor-background-color: "#16161F"

      paper-card-background-color: "#1C1C27"
      paper-card-header-color: "#EDEDF1"
      paper-dialog-background-color: "#1C1C27"
      paper-listbox-background-color: "#1C1C27"
      input-fill-color: "#252433"
      input-ink-color: "#EDEDF1"
      input-label-ink-color: "#9898A8"
      iron-overlay-backdrop-background-color: "rgba(0,0,0,.6)"

      mdc-theme-primary: "#8B8AF2"
      mdc-theme-secondary: "#C77BEE"
      mdc-theme-surface: "#1C1C27"

      weather-icon-sun-color: "#FBBF24"
      weather-icon-rain-color: "#8B8AF2"
      weather-icon-cloud-front-color: "#9898A8"
      weather-icon-cloud-back-color: "#3A3A4A"
      weather-icon-moon-color: "#C9C8FA"