/* ============================================================
   Per-platform themes — Datum design system v3.1

   Every platform keeps its own identity. What is shared is the STRUCTURE
   (see shell.css) and the discipline, not the palette:

     - the chrome colour is dark and platform-specific: rails, header bands
     - the mark is the platform's own brand colour, spent once per board on
       the figure the page is about
     - status colours (#059669 good, #DC2626 bad) are reserved everywhere and
       never plot a data series

   datum.css declares its tokens on :root and every dp-* component reads them
   through var(). Each block below redefines the same names for one platform's
   subtree, so components change appearance with no component edits, and a
   platform without a theme class renders exactly as it always has.

   Token roles:
     --accent / --accent-dark / --accent-bg   chrome
     --mark / --mark-deep / --mark-line       the story colour
                                              (-deep is the value that clears
                                               4.5:1 as TEXT; the bright value
                                               generally does not)
     --mark-ground                            lede boxes and total rows
   ============================================================ */

/* ---------------- Amazon — Forest and Gold ---------------- */
.amz-theme {
  --bg: #F4F5F8;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #E7F2EC;
  --ink: #0F172A;  --ink2: #334155;  --ink3: #64748B;  --ink4: #94A3B8;
  --rule: #E2E8F0;  --rule2: #EEF0F4;

  --accent: #16583A;  --accent-light: #1E7A4E;  --accent-dark: #0B3D28;  --accent-bg: #E7F2EC;
  --mark: #C9962F;  --mark-deep: #7F6111;  --mark-line: #EDE3CC;  --mark-ground: #FAF6EC;

  /* Amazon's pages were written against these names before the tokens were
     generalised; kept as aliases so those inline styles keep resolving. */
  --gold: #C9962F;  --gold-deep: #7F6111;  --gold-line: #EDE3CC;  --cream: #FAF6EC;
  --forest-900: #0B3D28;  --forest-700: #16583A;  --forest-050: #E7F2EC;

  --serif: 'Libre Caslon Text', 'Questrial', Georgia, serif;
}

/* ---------------- Blinkit — Ink and Yellow ---------------- */
.bk-theme {
  --bg: #F6F6F4;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #FBF4D9;
  --ink: #16150F;  --ink2: #3A382C;  --ink3: #6B6857;  --ink4: #9C9884;
  --rule: #E4E2D8;  --rule2: #F0EFE8;

  --accent: #6B5A00;  --accent-light: #8F7A00;  --accent-dark: #221C00;  --accent-bg: #FBF4D9;
  --mark: #D4A800;  --mark-deep: #6B5600;  --mark-line: #EBE0B8;  --mark-ground: #FDF8E3;
}

/* ---------------- Swiggy — Umber and Orange ---------------- */
.sw-theme {
  --bg: #F8F5F2;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #FFF0E4;
  --ink: #1C1008;  --ink2: #402A18;  --ink3: #6F5545;  --ink4: #A28A78;
  --rule: #E8DED5;  --rule2: #F3EDE7;

  --accent: #A34B00;  --accent-light: #C75C00;  --accent-dark: #3D1D00;  --accent-bg: #FFF0E4;
  --mark: #E66A00;  --mark-deep: #8A3D00;  --mark-line: #F0D8C2;  --mark-ground: #FFF6EE;
}

/* ---------------- Zepto — Aubergine and Lilac ---------------- */
.zp-theme {
  --bg: #F7F4F8;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #F3E8F7;
  --ink: #17091C;  --ink2: #3A2242;  --ink3: #66516F;  --ink4: #9A88A1;
  --rule: #E6DCEA;  --rule2: #F2ECF4;

  --accent: #6B2280;  --accent-light: #8A31A3;  --accent-dark: #2E0E38;  --accent-bg: #F3E8F7;
  /* Lilac is the mark on dark chrome; the deep plum is the value that clears
     contrast as text on the light ground. */
  --mark: #C9A6FF;  --mark-deep: #5A1470;  --mark-line: #E4D5EC;  --mark-ground: #FAF5FC;
}

/* ---------------- Nykaa — Plum and Pink ---------------- */
.nk-theme {
  --bg: #F9F4F6;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #FDE9F1;
  --ink: #1B0710;  --ink2: #451B2C;  --ink3: #714A5A;  --ink4: #A5838F;
  --rule: #EBDCE2;  --rule2: #F5ECEF;

  --accent: #A8114E;  --accent-light: #C71A61;  --accent-dark: #4A0A28;  --accent-bg: #FDE9F1;
  --mark: #FC2779;  --mark-deep: #A8114E;  --mark-line: #F2D3E0;  --mark-ground: #FFF5F9;
}

/* ---------------- Flipkart — Navy and Amber ---------------- */
.fk-theme {
  --bg: #F4F6FA;  --card: #FFFFFF;  --surface: #FFFFFF;  --hover: #EAF1FE;
  --ink: #0B1424;  --ink2: #26374F;  --ink3: #5A6B82;  --ink4: #93A1B5;
  --rule: #DDE4EE;  --rule2: #EDF1F7;

  --accent: #1B4F9C;  --accent-light: #2874F0;  --accent-dark: #0A2A5E;  --accent-bg: #EAF1FE;
  /* Flipkart's own pairing: the blue is the chrome, the amber is the mark. */
  --mark: #FFB800;  --mark-deep: #8A5F00;  --mark-line: #EDE0BE;  --mark-ground: #FFFAEC;
}

/* ============================================================
   Shared component treatments. Written against the generic tokens, so each
   platform picks up its own colours from the block above.
   ============================================================ */

/* Table header bands carry the chrome colour. */
.amz-theme .dp-tbl thead th,
.bk-theme  .dp-tbl thead th,
.sw-theme  .dp-tbl thead th,
.zp-theme  .dp-tbl thead th,
.nk-theme  .dp-tbl thead th,
.fk-theme  .dp-tbl thead th {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

/* Total rows sit on the mark's light ground, under a mark-coloured rule. */
.amz-theme .dp-tbl tfoot td, .amz-theme .dp-tbl tr.dp-total td,
.bk-theme  .dp-tbl tfoot td, .bk-theme  .dp-tbl tr.dp-total td,
.sw-theme  .dp-tbl tfoot td, .sw-theme  .dp-tbl tr.dp-total td,
.zp-theme  .dp-tbl tfoot td, .zp-theme  .dp-tbl tr.dp-total td,
.nk-theme  .dp-tbl tfoot td, .nk-theme  .dp-tbl tr.dp-total td,
.fk-theme  .dp-tbl tfoot td, .fk-theme  .dp-tbl tr.dp-total td {
  background: var(--mark-ground);
  border-top: 1px solid var(--mark-line);
}

/* The hero closes on a mark-coloured rule: the one place the mark is spent on
   chrome, showing where the KPI strip ends and the board begins. */
.amz-theme .dp-hero, .bk-theme .dp-hero, .sw-theme .dp-hero,
.zp-theme .dp-hero, .nk-theme .dp-hero, .fk-theme .dp-hero {
  border-bottom: 2px solid var(--mark);
}

/* Signal-card ladder: 4 / 2 / 1. The column count has to divide the card
   count, or the last card orphans onto a row of its own — which auto-fit with
   a min-width floor does at almost every viewport width. */
.amz-ladder { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .amz-ladder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  620px) { .amz-ladder { grid-template-columns: 1fr; } }