/* =====================================================================
   Design System — FLAVOUR: 360 ERP  v0.3.0
   OPT-IN brand skin for 360 ERP (360erp.com) work. Never loaded by
   default: link this file *in addition to* tokens.css and put
   .theme-360 (light — the brand's own site look) or .theme-360-dark
   (dashboards/internal tools) on the root element. Applied ONLY when
   Douwe explicitly asks for "the 360 flavour" — every other build
   ignores this file entirely; the base system is untouched.

   A FLAVOUR = a theme + brand typography. It overrides the --c-*
   color tokens (like any theme) plus --font (Poppins). Everything
   else — spacing, radius, motion, components — stays the shared core.
   360's own headings font is Space Grotesk, which already IS the
   system's --font-display: no override needed, the pairing just works.

   Source: extracted from the live 360erp.com Odoo theme (2026-07-07).
   Brand palette (o-color-1..5): #E45630 vermilion / #E9D1A4 sand /
   #F6F5F4 stone / #F7EEDD cream (their body bg) / #1F22A1 indigo.
   Body font Poppins; headings Space Grotesk (500); pill CTAs.
   Raw brand hues ship as --c-360-* for hero fills and graphics; the
   semantic --c-accent is darkened (light) / lifted (dark) to hold
   WCAG AA for text — same policy as the core light theme.

   Fonts (consumer loads once; custom-first with system fallback):
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">

   Verified WCAG AA (small text):
   - light, on cream bg: txt 13.4:1 · accent 4.65 · info 5.07 ·
     good 5.10 · warn 5.31 · danger 5.27 · white-on-accent 5.36 ·
     indigo 10.1 · white-on-indigo 11.7
   - dark, on bg/surface: txt 15.6:1 · txt-2 8.5 · muted 4.6+ ·
     accent 4.9 (4.6 on surface-2) · sand 11.2 · status 5.4–8.4
   - raw --c-360-vermilion is 3.2:1 on cream — large fills, heroes
     and graphics ONLY, never body text.

   Brand affinity notes: primary CTAs read most on-brand as pills
   (`ds-btn ds-btn-primary ds-btn-pill`, matching their 2rem-radius
   buttons); --c-360-indigo works as a full-bleed section/hero fill
   with white or cream text, exactly how 360erp.com uses it.
   ===================================================================== */

@layer ds.tokens{

/* Raw brand palette + brand typography — shared by both 360 themes.
   The --c-360-* hues are for fills/heroes/graphics, NOT body text. */
.theme-360,
.theme-360-dark{
  --c-360-vermilion:#e45630;
  --c-360-sand:#e9d1a4;
  --c-360-cream:#f7eedd;
  --c-360-stone:#f6f5f4;
  --c-360-indigo:#1f22a1;

  --font:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* --font-display stays Space Grotesk — 360's own headings font. */

  /* Brand logo (official mark, 1462×535, transparent bg) — ships in
     assets/360erp/, copy that folder along with this file. Indigo is
     the original; vermilion (--c-360-vermilion) and cream (--c-360-cream,
     their site bg) are the same mark recoloured for indigo/dark fills.
     Vars are for CSS backgrounds (background-image:var(--logo-360));
     for <img> use the path directly. */
  --logo-360:url("assets/360erp/logo-indigo.png");
  --logo-360-vermilion:url("assets/360erp/logo-vermilion.png");
  --logo-360-cream:url("assets/360erp/logo-cream.png");
}

/* =====================================================================
   THEME: 360 light  (the brand's own look — cream page, white cards)
   ===================================================================== */
.theme-360{
  --c-bg:#f7eedd;               /* brand cream = their live body bg */
  --c-surface:#ffffff;
  --c-surface-2:#f6f5f4;        /* brand stone */
  --c-surface-hover:#f1ece0;
  --c-line:#e6dcc8;
  --c-line-2:#d8cdb3;

  --c-txt:#212529;              /* their body ink */
  --c-txt-2:#4a4540;
  --c-muted:#6b645b;

  --c-accent:#c03d17;           /* brand #E45630 darkened -> AA on cream */
  --c-accent-2:#1f22a1;         /* indigo -> signature gradient vermilion→indigo */
  --c-on-accent:#ffffff;
  --c-focus:#c03d17;

  --c-info:#0d6b9b;
  --c-good:#117437;
  --c-warn:#85590d;
  --c-danger:#bf1d3d;           /* crimson, kept distinct from the vermilion accent */
  --c-danger-strong:#a8172f;

  --c-x:#1d9bf0; --c-gh:#8250df; --c-feed:#117437;

  --c-bg-grad:none;
  --sh-1:0 1px 2px rgba(46,29,17,.06), 0 6px 18px rgba(46,29,17,.07);
  --sh-2:0 4px 14px rgba(46,29,17,.11);
  --sh-pop:0 14px 40px rgba(46,29,17,.18);
}

/* =====================================================================
   THEME: 360 dark  (dashboards in brand character — warm near-neutral
   dark, cream ink, vermilion energy; indigo is unusable on dark)
   ===================================================================== */
.theme-360-dark{
  --c-bg:#171519;
  --c-surface:#1f1d22;
  --c-surface-2:#252229;
  --c-surface-hover:#2a272f;
  --c-line:#322e38;
  --c-line-2:#3f3a45;

  --c-txt:#f2ede3;              /* cream-tinted ink */
  --c-txt-2:#b8b1a4;
  --c-muted:#8b857a;

  --c-accent:#e7623e;           /* vermilion lifted a step -> AA on surfaces */
  --c-accent-2:#e9d1a4;         /* sand -> signature gradient vermilion→sand */
  --c-on-accent:#2a0f06;
  --c-focus:#ef9a83;            /* their own dark-section salmon link color */

  --c-info:#56b6e6;
  --c-good:#46c463;
  --c-warn:#e0a83a;
  --c-danger:#ec6a62;
  --c-danger-strong:#d94238;

  --c-bg-grad:radial-gradient(1100px 520px at 78% -8%, #272028 0%, transparent 60%);
}
}