/*==============================================================
  EDGE ACADEMY — THEME TOKENS
  --------------------------------------------------------------
  This is the ONLY file you need to edit to change site colours.
  Everything else (app.css, catalog.css, detail.css) reads from
  the variables defined here.

  Two layers:
    1. BRAND PALETTE — your raw logo colours. Rarely changes.
    2. SEMANTIC ROLES — what each colour is used FOR. Change
       these to re-skin the site without touching the palette.

  Each colour has a matching "-rgb" triple used for translucent
  fills, e.g. rgb(var(--accent-1-rgb) / 0.2). If you change a
  hex value, change the triple directly beneath it too.
==============================================================*/

:root {
  /*------------------------------------------------------------
    1. BRAND PALETTE (from the Edge Academy logo)
  ------------------------------------------------------------*/

  /* Greens */
  --brand-green-light: #bdff9d;
  --brand-green-light-rgb: 189 255 157;
  --brand-green: #7ec65a;
  --brand-green-rgb: 126 198 90;
  --brand-green-shade: #5f804f;
  --brand-green-shade-rgb: 95 128 79;
  --brand-green-deep: #3f632d;
  --brand-green-deep-rgb: 63 99 45;

  /* Blues */
  --brand-blue-light: #59a6f6;
  --brand-blue-light-rgb: 89 166 246;
  --brand-blue: #206fbe;
  --brand-blue-rgb: 32 111 190;
  --brand-blue-shade: #2d537b;
  --brand-blue-shade-rgb: 45 83 123;
  --brand-blue-deep: #10385f;
  --brand-blue-deep-rgb: 16 56 95;

  /*------------------------------------------------------------
    2. SEMANTIC ROLES
  ------------------------------------------------------------*/

  /* PRIMARY — buttons, links, active nav, icons, focus rings.
     Blue is primary because it is the only brand colour that
     carries white text at an accessible contrast (5.03:1).
     To make the site green-led instead, see the note at the
     bottom of this file. */
  --accent-1: var(--brand-blue);
  --accent-1-rgb: var(--brand-blue-rgb);
  --accent-1-hover: var(--brand-blue-deep);
  --accent-1-soft: #d6e7f9; /* pale wash for tinted panels */

  /* SECONDARY — badges, tags, category pills, progress fills.
     Always pair with DARK text, never white (2.03:1 fails). */
  --accent-2: var(--brand-green);
  --accent-2-rgb: var(--brand-green-rgb);
  --accent-2-soft: var(--brand-green-light);

  /* HIGHLIGHT — section tints, hover washes, illustration fills */
  --accent-3: var(--brand-green-light);
  --accent-3-rgb: var(--brand-green-light-rgb);

  /*------------------------------------------------------------
    NEUTRALS
  ------------------------------------------------------------*/
  --white: #fefcfb;
  --white-rgb: 254 252 251;
  --pure-white: #ffffff;
  --black: #2a322d;
  --medium-black: #1a1e1d;
  --dark-black: #141515;
  --lightest-gray: #f4f5f5;
  --light-gray: #c9cfce;
  --medium-gray: #b7bdbb;
  --dark-gray: #7a8582;
  --border-gray: #e4e4e4;

  /*------------------------------------------------------------
    STATUS
  ------------------------------------------------------------*/
  --color-danger: #bc0f0f;
  --danger-soft: #f1d9d6; /* pale background behind danger text */

  /*------------------------------------------------------------
    SHADOWS — tinted with the deep brand blue so elevation
    reads as part of the palette rather than neutral grey.
  ------------------------------------------------------------*/
  --shadow-rgb: var(--brand-blue-deep-rgb);
  --shadow:
    2px 1px 5px 0px rgb(var(--shadow-rgb) / 0.04),
    9px 4px 10px 0px rgb(var(--shadow-rgb) / 0.03),
    19px 10px 13px 0px rgb(var(--shadow-rgb) / 0.02),
    35px 17px 15px 0px rgb(var(--shadow-rgb) / 0.01),
    54px 27px 17px 0px rgb(var(--shadow-rgb) / 0);
}

/*==============================================================
  SWAPPING TO A GREEN-LED SITE
  --------------------------------------------------------------
  Green cannot sit under white button text accessibly, so use
  the deep green rather than the bright one. Replace the three
  PRIMARY lines above with:

    --accent-1: var(--brand-green-deep);      // 6.77:1, passes AA
    --accent-1-rgb: var(--brand-green-deep-rgb);
    --accent-1-hover: #2b4520;

  ...and move blue into the secondary slot:

    --accent-2: var(--brand-blue-light);
    --accent-2-rgb: var(--brand-blue-light-rgb);

  Nothing else needs to change.
==============================================================*/