:root {
    --brand-hue: 212;
    --brand-saturation: 84%;
    --brand-lightness: 18%;
    --brand-color: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
    --accent-color: #E1CB88;
    --surface-light: #ffffff;
    --surface-light-2: #f6f6f6;
    --shadow-color: 0px 10px 50px 0px rgba(0, 0, 0, 0.08);
    --back-shadow: 1px 2px 10px rgba(0, 0, 0, 0.08);
    --text-color: #111111;          /* darker for contrast */
    --text-color-mute: hsl(0 0% 60%);
    --image-back-color: #dedede;
    --icon-color: hsl(0 0% 70%);
    --icon-color-2: hsl(0 0% 50%);
    --content-width: 136.6rem;
    --gutter: 4rem;

    --border-color: rgba(206, 212, 218, 1);
    --fieldset-color: rgba(206, 212, 218, .6);
    --border-radius: 10px;
    --input-border-radius: 5px;
    --card-sahdow-color: rgba(0, 0, 0, 0.1);

    

    /* ===== Mobile-aligned status palette (background tints) ===== */
    /* Base (from app): #006a4e, #4CAF50, #2196F3, #FF9800, #F44336, purple */

    --status-draft-bg:       #E0F2EC; /* Draft + Not Submitted => primary green tint */
    --status-submitted-bg:   #E3F5E5; /* Submitted (green tint)  */
    --status-pending-bg:     #E2F0FF; /* Pending (blue tint)     */
    --status-approved-bg:    #FFE8D5; /* Approved (orange tint)  */
    --status-rejected-bg:    #FFE0E6; /* Rejected / Revisit (red tint) */
    --status-total-bg:       #E3D7FF; /* Total (purple tint)     */

    /* ===== PSU cards ===== */
    --psu-assigned-color:     var(--status-submitted-bg); /* Assigned = submitted */
    --psu-unassigned-color:   var(--status-draft-bg);     /* Unassigned = draft/not submitted */
    --psu-total-color:        var(--status-total-bg);     /* Total */

    /* ===== Listing (khana) cards ===== */
    --khana-total-color:      var(--status-total-bg);
    --khana-submitted-color:  var(--status-submitted-bg);
    --khana-pending-color:    var(--status-pending-bg);
    --khana-approved-color:   var(--status-approved-bg);
    --khana-rejected-color:   var(--status-rejected-bg);  /* use for Rejected / Revisit */

    /* ===== Sample household cards ===== */
    --sample-khana-total-color:          var(--status-total-bg);
    --sample-khana-not-submitted-color:  var(--status-draft-bg);      /* same as Draft */
    --sample-khana-submitted-color:      var(--status-submitted-bg);
    --sample-khana-pending-color:        var(--status-pending-bg);
    --sample-khana-approved-color:       var(--status-approved-bg);
    --sample-khana-rejected-color:       var(--status-rejected-bg);

    --status-submitted-bg:   #E3F5E5;  /* green tint   */
    --status-pending-bg:     #E2F0FF;  /* blue tint    */
    --status-approved-bg:    #FFE8D5;  /* orange tint  */
    --status-rejected-bg:    #FFE0E6;  /* red tint     */
    --status-total-bg:       #E3D7FF;  /* purple tint  */
    --status-draft-bg:       #E0F2EC;  /* Draft/Not Submitted */

    --fs-default: 1.6rem;
    --fs-title-1: 2rem;

    --fw-400: 400;
    --fw-500: 500;
    --fw-550: 550;

    --dropdown-menu-index: 10;

     /* solid colors used in charts / legend */
    --status-submitted: #4CAF50; /* green   */
    --status-pending:   #2196F3; /* blue    */
    --status-approved:  #FF9800; /* orange  */
    --status-rejected:  #F44336; /* red     */
    --status-total:     #9C27B0; /* purple  */

    /* soft tints for cards (same hue family as above) */
    --status-draft-bg:       #E0F2EC; /* Draft / Not submitted */
    --status-submitted-bg:   #E6F4EA; /* light green  */
    --status-pending-bg:     #E3F2FD; /* light blue   */
    --status-approved-bg:    #FFF3E0; /* light orange */
    --status-rejected-bg:    #FFEBEE; /* light red    */
    --status-total-bg:       #EDE7F6; /* light purple */

    /* map to existing card vars */

    /* PSU */
    --psu-assigned-color:   var(--status-submitted-bg);
    --psu-unassigned-color: var(--status-draft-bg);
    --psu-total-color:      var(--status-total-bg);

    /* Listing */
    --khana-total-color:     var(--status-total-bg);
    --khana-submitted-color: var(--status-submitted-bg);
    --khana-pending-color:   var(--status-pending-bg);
    --khana-approved-color:  var(--status-approved-bg);
    --khana-rejected-color:  var(--status-rejected-bg);

    /* Sample */
    --sample-khana-total-color:         var(--status-total-bg);
    --sample-khana-not-submitted-color: var(--status-draft-bg);
    --sample-khana-submitted-color:     var(--status-submitted-bg);
    --sample-khana-pending-color:       var(--status-pending-bg);
    --sample-khana-approved-color:      var(--status-approved-bg);
    --sample-khana-rejected-color:      var(--status-rejected-bg);

    /* ============================================================
       SOLID STATUS COLORS (match Dashboard cards exactly)
       Use these for table rows, buttons, badges, etc.
       ============================================================ */

    /* Listing / Sample household status solids */
    --khana-not-submitted-color: #FF9800; /* Not Submitted (orange) */
    --khana-submitted-color:     #4CAF50; /* Submitted (green) */
    --khana-pending-color:       #2196F3; /* Pending (blue) */
    --khana-approved-color:      #006A4E; /* Approved (deep green) */
    --khana-rejected-color:      #F44336; /* Rejected/Revisit (red) */

    /* If you also want to use these for sample list rows */
    --sample-khana-not-submitted-color: #FF9800;
    --sample-khana-submitted-color:     #4CAF50;
    --sample-khana-pending-color:       #2196F3;
    --sample-khana-approved-color:      #006A4E;
    --sample-khana-rejected-color:      #F44336;
}