/*
  Design tokens for Dumbo Kids.

  The prototype had no :root block - nearly every colour was an inline hex literal repeated
  across both pages, and one selector matched on inline styles containing the literal string
  "Fredoka". Ported as-is that becomes unmaintainable Razor, so the palette is defined once
  here and referenced everywhere (ADR-0009, item 5).

  The values are exactly the prototype's, so nothing looks different - only the way it is
  expressed.
*/

:root {
    /* Brand */
    --dk-accent: #D2694B;          /* terracotta: primary actions, active chips */
    --dk-accent-strong: #b9563a;   /* hover/pressed */
    --dk-accent-shadow: rgba(210, 105, 75, .3);
    --dk-gold: #C99A4E;            /* loyalty points */
    --dk-blue: #5C8AA0;
    --dk-green: #7A9B76;

    /* Surfaces */
    --dk-page: #FBF9F5;            /* storefront background */
    --dk-page-admin: #F5F3EE;      /* admin background */
    --dk-surface: #ffffff;
    --dk-surface-muted: #FBFAF7;   /* table rows */
    --dk-photo: #F2F2F2;           /* behind a product photo: the grey LC Waikiki shoots on */
    --dk-ink: #2B2A28;             /* body text, admin sidebar, footer */

    /* Text */
    --dk-text-muted: #6B6459;
    --dk-text-faint: #9a938a;
    --dk-text-on-dark: #b7afa2;
    --dk-text-on-dark-strong: #d8d2c6;

    /* Lines */
    --dk-border: #E5E7EB;
    --dk-hairline: #F0EFEA;
    --dk-track: #F0EEE6;

    /* Status: success / warning / danger, each as a background and a foreground */
    --dk-success-bg: #E9EFE6;
    --dk-success-fg: #5f7f5c;
    --dk-warning-bg: #F3E7CE;
    --dk-warning-fg: #8a6a3a;
    --dk-danger-bg: #F7E3E1;
    --dk-danger-fg: #a1503f;
    --dk-info-bg: #E4EEF3;
    --dk-info-fg: #3f6b80;

    /* Elevation */
    --dk-shadow-card: 0 4px 14px rgba(43, 42, 40, .06);
    --dk-shadow-raised: 0 8px 18px rgba(43, 42, 40, .1);
    --dk-shadow-modal: 0 10px 30px rgba(43, 42, 40, .12);

    /* Type */
    --dk-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dk-font-display: 'Fredoka', var(--dk-font-body);

    /* Arabic. Swapped in by [dir="rtl"] rather than by a separate stylesheet. */
    /* The fallbacks spelled out, not var(--dk-font-body): [dir="rtl"] below sets --dk-font-body
       to this, and the two referring to each other is a cycle, which makes both invalid - every
       Arabic paragraph fell back to the browser's default serif. */
    /* Each font's fallback straight after it: the phone's own font with the Arabic font's line
       height, so nothing moves when the font arrives (fonts.css, feature 66). */
    --dk-font-body-ar: 'Cairo', 'Cairo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dk-font-display-ar: 'Baloo Bhaijaan 2', 'Baloo Bhaijaan 2 Fallback', 'Cairo', sans-serif;

    /* Shape */
    --dk-radius-sm: 10px;
    --dk-radius: 14px;
    --dk-radius-lg: 20px;
    --dk-radius-pill: 999px;
}

/*
  The prototype used `.app[dir="rtl"] [style*="Fredoka"]` to swap the display font - a
  selector that depends on inline styles containing a literal font name, and breaks the
  moment those move to classes. Real classes instead.
*/
[dir="rtl"] {
    --dk-font-body: var(--dk-font-body-ar);
    --dk-font-display: var(--dk-font-display-ar);
}