/* Legacy --app-* tokens — wrapped in @layer legacy so newer layers win. */
@layer legacy {
    :root {
        --app-brand-color: green; /*#0D54B1;*/
        --app-brand-icon-color: green; /*#0D54B1;*/
        --app-primary-bg-color: var(--app-brand-color, green);
        --app-primary-text-color: white;
    }
}

/* ============================================================
   Africa Documents brand — new design system.
   Primitives + semantic rebindings. Components read only the
   semantic tokens; changing a primitive here propagates
   everywhere the semantic is consumed.
   ============================================================ */
@layer brand {
    :root {
        /* Africa Documents primitive palette */
        --ad-ink-950:    #0f1411;  /* primary text / strong ink */
        --ad-ink-800:    #2c342e;
        --ad-ink-500:    #6b746d;
        --ad-paper-50:   #faf9f5;  /* warm off-white page */
        --ad-paper-100:  #f1f0ea;  /* warm alt surface */
        --ad-line-200:   #e1ddd0;  /* hairline borders */
        --ad-forest-700: #1a3a1a;  /* deep forest green accent */
        --ad-forest-900: #0d2b0d;  /* darker forest for press states */
        --ad-sage-400:   #7d9471;  /* sage green — soft accent */

        /* Rebind RCL semantic tokens to Africa Documents primitives.
           Functional default: white surface so Syncfusion inputs/grids
           (pure-white chrome) don't clash against a warm paper canvas.
           Marketing scope ([data-shell="marketing"]) opts in to warm paper
           below. */
        --color-ink:          var(--ad-ink-950);
        --color-ink-soft:     var(--ad-ink-800);
        --color-ink-mute:     var(--ad-ink-500);
        --color-surface:      #ffffff;
        --color-surface-alt:  var(--ad-paper-50);
        --color-line:         var(--ad-line-200);
        --color-accent:       var(--ad-forest-700);
        --color-accent-deep:  var(--ad-forest-900);
        --color-accent-soft:  var(--ad-sage-400);
        --color-on-dark:      var(--ad-paper-50);
        --color-on-dark-mute: rgb(250 249 245 / .65);

        /* Stable inverse-surface tokens — bind directly to brand primitives
           so they stay fixed inside [data-surface="dark"] scopes. */
        --color-surface-inverse:    var(--ad-ink-950);
        --color-on-surface-inverse: var(--ad-paper-50);
    }

    [data-shell="marketing"] {
        --color-surface:     var(--ad-paper-50);
        --color-surface-alt: var(--ad-paper-100);
    }
}