/* =========================================================
   ROBCOM — DESIGN TOKENS
   Single source of truth for ALL colours & themes
   ========================================================= */

/* ---------------------------------------------------------
   THEME: DARK (default)
   --------------------------------------------------------- */
:root,
html[data-theme="dark"]{

  /* ---------- NEUTRAL PALETTE ---------- */
  --p-bg: #18191A;         /*DarkNeutral0*/
  --p-bg-2: #2B2C2F;       /*DarkNeutral250*/
  --p-surface: #1F1F21;    /*DarkNeutral100*/

  /* ---------- INK ---------- */
  --p-ink: #F0F1F2;        /* primary text */
  --p-ink-muted: rgba(248,248,248,.72);
  --p-ink-soft: rgba(248,248,248,.52);

  /* ---------- LINES ---------- */
  --p-line: rgba(255,255,255,.10);
  --p-line-strong: rgba(255,255,255,.18);

  /* ---------- BRAND ---------- */
  --p-brand-main: #E06C00;   /*Orange600*/
  --p-brand-accent: #F68909; /*Orange500*/
  --p-brand-ink: #111111;

  /* ---------- SUPPORT / SIGNAL ---------- */
  --p-support1: #1868DB; /*Blue700*/
  --p-support2: #227D9B; /*Teal700*/
  --p-support3: #1F845A; /*Green700*/
  --p-support4: #5B7F24; /*Lime700*/
  --p-support5: #94C748; /*Lime400*/

  --p-support6: #AE2E24; /*Red800*/
  --p-support7: #943D73; /*Magenta800*/

  /* ---------- SEMANTIC ---------- */
  --p-danger: #ff5a6a;
  --p-warning: #f2d07b;
  --p-success: #39f5c3;

  /* ---------- SHADOWS ---------- */
  --p-shadow-lg: 0 22px 70px rgba(0,0,0,.38);
  --p-shadow-md: 0 14px 42px rgba(0,0,0,.08);

  /*----------- GRID AND OTHER MISC -------------*/
  --p-grid1: #E2E3E4; /*DarkNeutral1100*/
  --p-grid2: #E2E3E4; /*DarkNeutral1100*/
}

/* ---------------------------------------------------------
   THEME: LIGHT
   --------------------------------------------------------- */
html[data-theme="light"]{

  /* ---------- NEUTRAL PALETTE ---------- */
  --p-bg: #FFFFFF;         /*Neutral0*/
  --p-bg-2: #F0F1F2;       /*Neutral200*/
  --p-surface: #F8F8F8;    /*Neutral100*/

  /* ---------- INK ---------- */
  --p-ink: #2b2c34;
  --p-ink-muted: rgba(43,44,52,.72);
  --p-ink-soft: rgba(43,44,52,.52);

  /* ---------- LINES ---------- */
  --p-line: rgba(43,44,52,.14);
  --p-line-strong: rgba(43,44,52,.22);

  /* ---------- BRAND ---------- */
  --p-brand-main: #F68909;   /*Orange500*/
  --p-brand-accent: #E06C00; /*Orange600*/
  --p-brand-ink: #fffffe;

  /* ---------- SUPPORT / SIGNAL ---------- */
  --p-support1: #669DF1; /*Blue400*/
  --p-support2: #6CC3E0; /*Teal400*/
  --p-support3: #4BCE97; /*Green400*/
  --p-support4: #94C748; /*Lime400*/
  --p-support5: #5B7F24; /*Lime700*/

  --p-support6: #FD9891; /*Red300*/
  --p-support7: #F797D2; /*Magenta300*/


  /* ---------- SEMANTIC ---------- */
  --p-danger: #e45858;
  --p-warning: #f2c94c;
  --p-success: #2ecc71;

  /* ---------- SHADOWS ---------- */
  --p-shadow-lg: 0 20px 60px rgba(20,20,28,.10);
  --p-shadow-md: 0 12px 36px rgba(20,20,28,.08);

  /*----------- GRID AND OTHER MISC -------------*/
  --p-grid1: #111213; /*Neutral1100*/
  --p-grid2: #111213; /*Neutral1100*/

}

/* =========================================================
   ROLE MAPPING
   ⚠️ DO NOT EDIT BELOW THIS LINE
   Components must ONLY use these variables
   ========================================================= */
:root{

  /* ---------- SURFACES ---------- */
  --bg: var(--p-bg);
  --bg-alt: var(--p-bg-2);
  --panel: var(--p-surface);

  /* ---------- TEXT ---------- */
  --text: var(--p-ink);
  --muted: var(--p-ink-muted);
  --soft: var(--p-ink-soft);

  /* ---------- LINES ---------- */
  --line: var(--p-line);
  --line-strong: var(--p-line-strong);

  /* ---------- BRAND ---------- */
  --brand-1: var(--p-brand-main);
  --brand-2: var(--p-brand-accent);
  --brand-contrast: var(--p-brand-ink);

  /* ---------- SUPPORT ---------- */
  --support1: var(--p-support1);
  --support2: var(--p-support2);
  --support3: var(--p-support3);
  --support4: var(--p-support4);
  --support5: var(--p-support5);
  --support6: var(--p-support6);
  --support7: var(--p-support7);

  /* ---------- SEMANTIC ---------- */
  --danger: var(--p-danger);
  --warning: var(--p-warning);
  --success: var(--p-success);

  /* ---------- SHADOWS ---------- */
  --shadow-lg: var(--p-shadow-lg);
  --shadow-md: var(--p-shadow-md);

  /* ---------- RADII (not palette, but tokenised) ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /*----------- GRID AND OTHER MISC -------------*/
  --grid1: var(--p-grid1);
  --grid2: var(--p-grid2);
}