/* NORA design tokens
   ------------------------------------------------------------------
   Every colour the interface uses is defined here and nowhere else.
   style.css, the sign-in pages and the storefront preview all read these
   variables, so restyling NORA means editing this one file.

   Current look: black and white. Black is the primary (chrome, buttons,
   active states), white is the background, and greys carry borders and
   secondary text.

   The three state colours (warning, danger, success) aren't brand
   colours. They're there so an error or a placeholder price can't be
   mistaken for normal content. They're kept muted to suit the black and
   white look; set them to greys too if you want pure monochrome. */

:root {
  /* --- brand --- */
  --primary: #111111;          /* buttons, links, headings */
  --primary-mid: #2b2b2b;      /* hover */
  --primary-deep: #000000;     /* strongest text, dark surfaces */
  --primary-wash: #f2f2f2;     /* selected rows, soft highlights */
  --primary-ring: rgba(0, 0, 0, .14);   /* focus rings, soft outlines */

  --accent: #111111;           /* active tabs, progress bars, toggles */
  --accent-dark: #000000;
  --accent-deep: #000000;
  --accent-wash: #f2f2f2;
  --accent-line: #d6d6d6;      /* border on an accent-wash panel */

  --on-primary: #ffffff;       /* text on a black surface */
  --on-primary-muted: #bdbdbd; /* secondary text on a black surface */

  /* --- text --- */
  --ink: #1a1a1a;
  --ink-soft: #555555;
  --ink-faint: #767676;        /* lightest grey that still passes 4.5:1 on white */

  /* --- surfaces and borders --- */
  --paper: #ffffff;
  --canvas: #f7f7f7;
  --line: #e0e0e0;
  --line-soft: #eeeeee;

  /* --- state --- */
  --amber: #8a5a00;
  --amber-mid: #c08a2e;
  --amber-wash: #fbf5ea;
  --amber-line: #ecd9b4;
  --red: #a4372b;
  --red-wash: #fbeeed;
  --red-line: #e8cdca;
  --green: #2f6b45;
  --green-wash: #eef5f0;
  --green-line: #c9e0d2;

  /* --- shape --- */
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-lift: 0 24px 60px rgba(0, 0, 0, .35);

  /* --- sign-in page --- */
  /* The photo behind the sign-in card, and the shade laid over it so the
     white text stays readable. */
  --login-photo: url('/static/img/login-background.jpg');   /* absolute: used from the page, not this file */
  --login-shade: rgba(0, 0, 0, .55);
  --hero-ink: #ffffff;          /* text over the sign-in photo */
  --hero-ink-muted: #d0d0d0;

  /* --- chrome ---
     Named parts of the interface an organisation can recolour on its
     Theme page (theme.py writes overrides for these after this file).
     By default they follow the brand tokens above. */
  --on-accent: #ffffff;         /* text on an accent surface */
  --link: var(--primary);
  --heading: var(--primary-deep);
  --btn-bg: var(--primary);
  --btn-hover: var(--primary-mid);
  --btn-ink: var(--on-primary);

  --sidebar-bg: var(--paper);
  --sidebar-ink: var(--ink-soft);         /* menu items */
  --sidebar-ink-strong: var(--primary-deep);
  --sidebar-ink-faint: var(--ink-faint);
  --sidebar-hover-bg: var(--canvas);
  --sidebar-active-bg: var(--primary-wash);
  --sidebar-active-ink: var(--primary-deep);
  --sidebar-marker: var(--accent);
  --sidebar-label: var(--accent-deep);    /* section headings in the menu */
  --sidebar-line: var(--line-soft);
  --sidebar-logo-height: 40px;

  --topbar-bg: var(--paper);
  --topbar-ink: var(--primary-deep);
  --topbar-sub: var(--ink-soft);
  --topbar-line: var(--line);
}