/* ============================================================
variables.css — Design Tokens (Single Source of Truth)
============================================================
HOW TO USE
──────────
Load this file FIRST on every page, before style.css and
before index.css (index pages only).
HOW TO EDIT
───────────
Colors → Edit the --color-* values below.
SVG Icons → Find the fill= inside the data URI string
and update the RGB/hex to recolor without
touching any other rule.
Shadows /
Transitions→ Edit --shadow-* and --transition-* below.
KNOWN COLOR CONFLICT (resolved here)
─────────────────────────────────────
style2019.css had --color-accent: #801f6c
index2019-2.css had --color-accent: #7e1d6b (slightly darker)
⚠ Both values have been unified to #801f6c (style.css value).
If the index pages looked visually different, change only
the index.css :root block instead of editing here.
Also resolved:
index2019-2.css redeclared --color-accent-dark: #801f6c
(same as style.css --color-accent). Kept style.css value
(#521546) as the hover/pressed state; the index value looked
like a copy-paste error.
============================================================ */
:root {
/* ── Brand Colours ───────────────────────────────────── */
--color-accent: #801f6c; /* primary purple-red */
--color-accent-dark: #521546; /* hover / pressed state */
--color-accent-light: rgba(128, 31, 108, 0.15); /* tint */
--color-primary: #465696; /* index wrappers / view-more */
--color-blue: #6184d8; /* info / swiper */
--color-teal: #95dbd3; /* news tab accent */
--color-yellow: #ffc857; /* feature section bg */
--color-gold: #fec964; /* footer menu label */
--color-red: #943838; /* footer bar bg */
--color-danger: #dc3545; /* important-message */
--color-dark: #3b3b3b; /* tab inactive bg */
--color-white: #ffffff;
--color-black: #000000;
--color-body-bg: rgb(253, 234, 219); /* warm cream bg */
/* ── Text & Surface Grays ────────────────────────────── */
--color-text-dark: #444444; /* muted heading text */
--color-blue-light: #f1f5ff; /* tab inactive text */
--color-orange-light: #ffe3ca; /* mobile dropdown hover */
--color-gray: #cccccc; /* generic mid gray */
--color-gray-light: #eeeeee;
--color-gray-medium: #cccccc;
--color-gray-light2: #bbbbbb;
--color-gray-pale: #dddddd;
--color-gray-mid: #999999;
--color-footer-dark: #111111; /* footer bottom bar */
--color-purple-light: #ede0ff;
/* ── Shadows ─────────────────────────────────────────── */
--shadow-glow-white: 0 0 10px rgba(255, 255, 255, 0.6);
--shadow-nav: 5px 5px 10px rgba(255, 255, 255, 0.6);
--shadow-glow-white-alpha: rgba(255, 255, 255, 0.6); /* for drop-shadow() */
--shadow-card-alpha: rgba(0, 0, 0, 0.1); /* for box-shadow */
/* ── Transitions ─────────────────────────────────────── */
--transition-default: all 0.3s ease;
--transition-fast: all 0.2s ease;
--transition-slow: all 0.5s;
/* ── SVG Icon Data URIs ──────────────────────────────── */
/* To recolor: find fill= inside the SVG string and */
/* update the hex/RGB value there. */
--svg-arrow-left: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') ;
--svg-arrow-right: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-arrow-left-hover: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') ;
--svg-arrow-right-hover: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-icon-youtube: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') ;
--svg-icon-youtube-hover:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>') ;
--svg-icon-font: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
--svg-icon-font-hover: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
--svg-icon-search: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-icon-search-hover: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-icon-globe: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-icon-globe-hover: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
--svg-icon-font-down: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');
}