/* =====================
   FONTS
   ===================== */
@font-face {
    font-family: 'Playfair Display';
    src: url('/res/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('/res/fonts/Lora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/* ── New fonts ── */
@font-face {
    font-family: 'Cinzel';
    src: url('/fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Code';
    src: url('/fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Amiri Quran';
    src: url('/fonts/AmiriQuran-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ── Font CSS custom properties ── */
:root {
    --font-body: 'Montserrat', sans-serif;
    --font-mono: 'Fira Code', monospace;
    --font-arabic: 'Tajawal', sans-serif;
    --font-title: 'Cinzel';
    --font-button: 'Montserrat', sans-serif;

    /* ── Colors — Fresh Garden ── */
    --color-bg:       #f4f7f2;
    --color-bg-card:  #fafcf8;
    --color-border:   #dce4d4;
    --color-text:     #1a2e14;
    --color-muted:    #5a7a4a;
    --color-faint:    #8aae7a;
    --color-structure: #3d7a4a;
    --color-accent:   #c49a20;
    --color-accent-bg: #f5f0d8;
    --color-offline:  #6b5e3a;
    --color-offline-bg: #f0ecd8;
    --color-divider:  #dce4d4;

    /* Functional / inset surface */
    --color-bg-inset:   #eef3ea;
    --color-accent-text: #7a5800;
    --color-text-on-structure: #a8c896;

    /* Type scale */
    --text-display: clamp(1.6rem, 4vw, 2.4rem);
    --text-heading: 1.25rem;
    --text-body:    1rem;
    --text-small:   0.875rem;
    --text-label:   0.65rem;
    --text-arabic:  1.3rem;
    --leading-tight:  1.2;
    --leading-body:   1.65;
    --leading-arabic: 1.9;

    /* Legacy aliases (backward compat) */
    --bg:           var(--color-bg);
    --card:         var(--color-bg-card);
    --text:         var(--color-text);
    --border:       var(--color-border);
    --muted:        var(--color-muted);
    --green:        var(--color-structure);
    --action:       var(--color-structure);
    --action-text:  #ffffff;
    --outline-text: var(--color-structure);
    --moss:         var(--color-structure);
    --sprout:       #b5d99c;
    --sun:          #c49a20;
    --terracotta:   #c4503a;
    --fern:         #8db87a;
    --red:          #c4503a;
}

/* English font variants */
[data-english-font="fira-code"] {
    --font-body: 'Fira Code', monospace;
    --font-button: 'Fira Code', monospace;
}
[data-english-font="tajawal"] {
    --font-body: 'Tajawal', sans-serif;
    --font-button: 'Tajawal', sans-serif;
}

/* Arabic font variants */
[data-arabic-font="amiri"] {
    --font-arabic: 'Amiri Quran', serif;
}

/* =====================
   VARIABLES — DARK
   ===================== */
body.dark-mode {
    --bg:           #0f1a12;
    --card:         #162418;
    --text:         #e8f0e0;
    --border:       #1a3018;
    --muted:        #6aaa5a;
    --color-bg-inset:   #0c140e;
    --color-accent-text: #e8c850;
    --color-divider:    #1a3018;
    --action:       #2a4d2e;
    --action-text:  #e8f0e0;
    --outline-text: #8db87a;
    --moss:         #3d6a3d;
    --sprout:       #4a8a4a;
    --sun:          #d4aa30;
    --terracotta:   #b86040;
    --fern:         #4a8a4a;
    --green:        #2a4d2e;
    --red:          #b86040;
}