/* ============================================================
   Saladizer · Colors & Type
   Reconciles brand guidelines (docx) with shipped app theme.
   - Brand guidelines = marketing surfaces (web, packaging, signage)
   - App theme       = product surfaces (mobile app, in-product UI)
   Both are kept under the same prefix so designs can mix freely.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Brand fonts loaded from Google Fonts CDN.
   - IBM Plex Sans         — Latin body & display
   - IBM Plex Sans Arabic  — Arabic body & display
   - Readex Pro            — bilingual rounded face for hero/display
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Readex+Pro:wght@160..700&display=swap");

:root {
  /* ===========================================================
     COLOR · Brand palette (Brand Guidelines v2)
     60-30-10: Green 60 · Amber 30 · Red+Purple 10 (food art only)
     =========================================================== */
  --color-forest-green: #1B5E20;     /* Primary 60% — headers, fascia */
  --color-leaf-green:   #43A047;     /* Secondary 30% */
  --color-fresh-green:  #66BB6A;     /* Tertiary — highlights */

  --color-smart-amber:  #F5A623;     /* AI accent, CTAs, gauge */
  --color-tomato-red:   #E53935;     /* Food art ONLY */
  --color-onion-purple: #7B1FA2;     /* Food art ONLY */

  --color-mist:     #E8F5E9;
  --color-sprout:   #F1F8E9;
  --color-cream:    #FFF8E1;
  --color-snow:     #FAFAF8;
  --color-charcoal: #2E2E2C;

  /* ===========================================================
     COLOR · Product palette (shipped app theme — light)
     These drive the mobile app and webview. Slightly lighter,
     more sage-leaning than the brand-guideline forest.
     =========================================================== */
  --app-primary:        #2D7A3E;   /* Fresh leaf — buttons, active */
  --app-primary-light:  #E8F5E9;   /* Mint surface */
  --app-text:           #1B3A1F;   /* Deep forest — body text */
  --app-text-secondary: #5A7A5F;   /* Muted sage — captions */
  --app-accent:         #FF8A65;   /* Carrot — destructive/remove */
  --app-error:          #DC3545;
  --app-border:         #D4E8D4;
  --app-bg-root:        #FAFFFE;   /* Warm white with green hint */
  --app-bg-default:     #FFFFFF;
  --app-bg-secondary:   #F5FAF5;
  --app-bg-tertiary:    #E8F5E9;

  /* ===========================================================
     COLOR · Product palette (shipped app theme — dark)
     =========================================================== */
  --app-dark-primary:        #4CAF50;
  --app-dark-primary-light:  #1B3A1F;
  --app-dark-text:           #E8F5E9;
  --app-dark-text-secondary: #A8C8AC;
  --app-dark-accent:         #FF8A65;
  --app-dark-border:         #2D4A32;
  --app-dark-bg-root:        #0D1F10;
  --app-dark-bg-default:     #142218;
  --app-dark-bg-secondary:   #1B2A1E;
  --app-dark-bg-tertiary:    #223326;

  /* ===========================================================
     COLOR · Semantic (default to product theme · light)
     Re-bind these inside [data-theme="dark"] to switch.
     =========================================================== */
  --fg:           var(--app-text);
  --fg-muted:     var(--app-text-secondary);
  --fg-inverse:   #FFFFFF;
  --bg:           var(--app-bg-root);
  --bg-surface:   var(--app-bg-default);
  --bg-elevated:  #FFFFFF;
  --bg-tinted:    var(--app-bg-secondary);
  --border:       var(--app-border);
  --primary:      var(--app-primary);
  --primary-soft: var(--app-primary-light);
  --accent:       var(--color-smart-amber); /* AI / paid feature accent */
  --danger:       var(--app-accent);        /* remove / decrement */
  --error:        var(--app-error);

  /* ===========================================================
     TYPE · Families
     - Sans: IBM Plex Sans for product UI (Latin body + headings)
     - Display: Readex Pro — rounded humanist, used for hero/marketing
     - Arabic: IBM Plex Sans Arabic (matches Latin Plex DNA exactly)
     IBM Plex Sans is the brand canonical; Readex Pro is the display alt
     used where the brand guidelines previously called for Poppins.
     =========================================================== */
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans", system-ui, sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI Arabic", Tahoma, sans-serif;
  --font-mono:    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ===========================================================
     TYPE · Scale (brand guidelines, retuned for Plex/Readex)
     Display uses Readex Pro; H1–body use IBM Plex Sans.
     =========================================================== */
  --fs-display: 56px;   --lh-display: 1.1;  --fw-display: 800;
  --fs-h1:      36px;   --lh-h1:      1.2;  --fw-h1:      700;
  --fs-h2:      26px;   --lh-h2:      1.3;  --fw-h2:      600;
  --fs-h3:      20px;   --lh-h3:      1.4;  --fw-h3:      600;
  --fs-body:    16px;   --lh-body:    1.6;  --fw-body:    400;
  --fs-small:   14px;   --lh-small:   1.5;  --fw-small:   400;
  --fs-caption: 12px;   --lh-caption: 1.5;  --fw-caption: 400;
  --fw-button:  600;

  /* ===========================================================
     SPACING (matches app code · 4-pt scale)
     =========================================================== */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 40px;
  --sp-5xl: 48px;

  --input-h:  48px;
  --button-h: 52px;

  /* ===========================================================
     RADII (matches app code)
     =========================================================== */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-3xl: 50px;
  --r-full: 9999px;

  /* ===========================================================
     ELEVATION (matches app code's boxShadows)
     =========================================================== */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-sticky: 0 -2px 8px rgba(0, 0, 0, 0.08);
  --shadow-press:  0 2px 2px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 12px 32px rgba(27, 58, 31, 0.18);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
}

[data-theme="dark"] {
  --fg:          var(--app-dark-text);
  --fg-muted:    var(--app-dark-text-secondary);
  --bg:          var(--app-dark-bg-root);
  --bg-surface:  var(--app-dark-bg-default);
  --bg-elevated: var(--app-dark-bg-secondary);
  --bg-tinted:   var(--app-dark-bg-secondary);
  --border:      var(--app-dark-border);
  --primary:     var(--app-dark-primary);
  --primary-soft:var(--app-dark-primary-light);
}

/* RTL flag – consumers honor this with margin-inline / direction. */
[dir="rtl"] {
  --font-sans: var(--font-arabic);
  --font-display: var(--font-arabic);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply by class or by mapping headings
   ============================================================ */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: -0.01em;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  color: var(--fg);
}
body, p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--fg);
}
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-muted);
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
  font-weight: 500;
}
.mono { font-family: var(--font-mono); }
.arabic, [lang="ar"] { font-family: var(--font-arabic); }