/* ==========================================================================
       CSS Variables & Themes (Cursor Aesthetic)
       ========================================================================== */
    :root {
      --header-height: 70px;
      --bg-body: #ffffff;
      --bg-header: rgba(255, 255, 255, 0.92);
      --header-border: rgba(0, 0, 0, 0.05);

      --text-primary: #26251E;
      --text-secondary: rgba(38, 37, 30, 0.68);
      --text-tag: rgba(38, 37, 30, 0.65);
      --text-muted: rgba(38, 37, 30, 0.4);

      /* Buttons */
      --btn-primary-bg: #26251E;
      --btn-primary-text: #ffffff;
      --btn-primary-hover: #3f3e36;

      --btn-secondary-border: rgba(38, 37, 30, 0.22);
      --btn-secondary-text: #26251E;
      --btn-secondary-hover-bg: rgba(38, 37, 30, 0.05);
      --btn-secondary-hover-border: rgba(38, 37, 30, 0.4);

      /* Media Preview Card */
      --media-container-bg: #d1d4c8;
      --media-container-border: rgba(0, 0, 0, 0.08);
      --media-container-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);

      /* Feature Cards Variables */
      --card-bg: #f7f7f5;
      --card-border: rgba(0, 0, 0, 0.06);
      --card-inner-bg: #eaebe5;
      --card-inner-border: rgba(0, 0, 0, 0.06);
      --accent-orange: #d95d39;
      --accent-orange-hover: #bf4d2c;
      --progress-track: rgba(0, 0, 0, 0.08);
      --progress-thumb: #26251E;

    }

    /* Dark Theme */
    [data-theme="dark"] {
      --bg-body: #121211;
      --bg-header: rgba(18, 18, 17, 0.88);
      --header-border: rgba(255, 255, 255, 0.08);

      --text-primary: #ededec;
      --text-secondary: rgba(237, 237, 236, 0.65);
      --text-tag: rgba(237, 237, 236, 0.55);
      --text-muted: rgba(237, 237, 236, 0.35);

      /* Buttons */
      --btn-primary-bg: #ededec;
      --btn-primary-text: #121211;
      --btn-primary-hover: #ffffff;

      --btn-secondary-border: rgba(255, 255, 255, 0.18);
      --btn-secondary-text: #ededec;
      --btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
      --btn-secondary-hover-border: rgba(255, 255, 255, 0.35);

      /* Media Preview Card */
      --media-container-bg: #1c1c1a;
      --media-container-border: rgba(255, 255, 255, 0.1);
      --media-container-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

      /* Feature Cards Variables */
      --card-bg: #181816;
      --card-border: rgba(255, 255, 255, 0.07);
      --card-inner-bg: #21211e;
      --card-inner-border: rgba(255, 255, 255, 0.07);
      --accent-orange: #e26b48;
      --accent-orange-hover: #f17d5b;
      --progress-track: rgba(255, 255, 255, 0.12);
      --progress-thumb: #ededec;

    }