/* EPFL theme for Indico -- color tokens.
   Every value below is lifted from the live EPFL Elements stylesheet
   (https://web2018.epfl.ch/8.7.0/css/elements.min.css), which is what
   https://epfl-si.github.io/elements/ documents. Where a comment cites a
   rule, that rule was read out of that file -- not guessed. */
:root {
  /* .btn-primary{background-color:red} -- EPFL's red is pure #f00. */
  --epfl-red: #ff0000;
  /* .btn-primary:hover{background-color:#d90000;border-color:#c00} */
  --epfl-red-hover: #d90000;
  --epfl-red-border: #cc0000;
  /* .btn-primary:not(:disabled):not(.disabled):active{background:#891818} */
  --epfl-red-active: #891818;
  /* The darker red of the historic EPFL logo, used for dense UI chrome. */
  --epfl-red-dark: #b51f1f;
  --epfl-red-text: #c73333;

  /* body{color:#212121} -- EPFL's "black" is never pure #000. */
  --epfl-black: #212121;
  --epfl-white: #ffffff;

  /* Grey ramp as used by Elements: .btn-secondary:hover #ececec,
     $gray-200 #e6e6e6, .table-dark border #d5d5d5,
     .table-bordered #c1c1c1, .form-control border #8e8e8e,
     .form-control::placeholder #707070. */
  --epfl-gray-050: #f5f5f5;
  --epfl-gray-100: #ececec;
  --epfl-gray-200: #e6e6e6;
  --epfl-gray-300: #d5d5d5;
  --epfl-gray-400: #c1c1c1;
  --epfl-gray-500: #8e8e8e;
  --epfl-gray-600: #707070;

  /* EPFL's secondary brand colours (bootstrap-variables.scss). */
  --epfl-leman: #00a79f;
  --epfl-canard: #007480;
  --epfl-canard-dark: #004248;
  --epfl-blue: #4a90e2;
  --epfl-orange: #f5a623;
  --epfl-green: #7ed321;
  --epfl-green-text: #487915;

  /* $border-radius: 2px -- EPFL corners are near-square, never pills. */
  --epfl-radius: 2px;
}

/* Indico's own theming hooks (indico/web/client/styles/partials/_variables).
   Retinting these carries most of the app for free; the later files in this
   bundle only exist for the places Indico hardcodes a hex instead. */
body {
  --text-color: var(--epfl-black);
  --text-inverse-color: var(--epfl-white);
  --text-disabled-color: var(--epfl-gray-400);
  --text-secondary-color: var(--epfl-gray-600);

  --background-primary: var(--epfl-white);
  --background-secondary: var(--epfl-gray-050);
  --surface-default: var(--epfl-gray-050);
  --surface-inverse-color: var(--epfl-black);
  --surface-accent-color: var(--epfl-red);
  --surface-accent-secondary-color: #ffe8e8;
  --surface-highlight-color: var(--epfl-gray-200);
  --surface-highlight-inverse-color: var(--text-secondary-color);
  --surface-disabled-color: var(--epfl-gray-100);
  --surface-disabled-inverse-color: var(--epfl-gray-500);

  --border-default-color: var(--epfl-gray-300);
  --border-disabled-color: var(--epfl-gray-200);

  --accent-color: var(--epfl-red);
  --accent-secondary-color: var(--epfl-canard);
  --accent-highlight-color: var(--epfl-red-hover);
  --accent-border-color: var(--epfl-red-border);
  --active-color: var(--epfl-red);
  --visited-color: var(--epfl-canard-dark);
  --protected-color: var(--epfl-orange);
  /* Indico's highlight is a cream (#fff9b8), used for "current" markers
     (the month heading on the front page) and important messages. EPFL has
     no cream anywhere in Elements, so this is the lightest red tint that
     still reads as a highlight. */
  --highlight-color: #fff0f0;
  --attention-color: var(--epfl-orange);

  --text-red-color: var(--epfl-red-text);
  --text-green-color: var(--epfl-green-text);
  --text-blue-color: var(--epfl-blue);
  --text-orange-color: var(--epfl-orange);
}

/* Indico's control / link / table tokens. Indico declares all of these on
   `body` too, so these later declarations win on load order alone -- no
   specificity tricks, and no hunting for the component selectors that
   consume them.

   The important one is --clickable-text-color. Indico resolves it to
   --accent-color, so making the accent EPFL red turned every category and
   event link red (verified live: `ul.category-list li a, .event-list li
   .list-name a, .infogrid a, .footer a { color: var(--link-color) }`).
   Elements wants the opposite -- black text, red underline, red on hover --
   so the clickable-text tokens are pinned to black/red explicitly rather
   than inheriting the accent. */
body {
  --clickable-text-color: var(--epfl-black);
  --clickable-text-highlight-color: var(--epfl-red);
  --clickable-text-active-color: var(--epfl-red);
  --clickable-text-used-color: var(--epfl-canard-dark);
  --clickable-text-disabled-color: var(--epfl-gray-400);

  /* $border-radius: 2px. Indico's default is 0.3em, which reads as a
     rounded web-app control; EPFL corners are near-square. */
  --control-border-radius: var(--epfl-radius);
  /* Elements .form-control{padding:.375rem .75rem}; em so it tracks
     Indico's 13px base rather than fighting it. */
  --control-padding: 0.375em 0.75em;
  --control-border-width: 1px;
  /* Elements .form-control{border:1px solid #8e8e8e} */
  --control-border-color: var(--epfl-gray-500);

  /* Elements .table-bordered td,th{border:1px solid #c1c1c1} */
  --table-border-color: var(--epfl-gray-400);
  --table-header-border-color: var(--epfl-gray-400);

  /* Indico's alert red (#c00) is already close; pin it to the EPFL cut. */
  --msgbox-alert-key-color: var(--epfl-red-dark);

  --container-separator-color: var(--epfl-gray-300);
}