/* ============================================================
   FILE 1 of 7
   DESTINATION: Capston_Project/wwwroot/css/theme.css   (NEW FILE)

   The one place the clinic's visual language is defined.

   WHY THIS FILE EXISTS
   --------------------
   Every module currently picks its own greens, blues and greys by
   hand — Patients uses #0d6efd, Reports uses #1b6ec2, the sidebar
   uses #2e9ba3. Nine modules, nine sets of hex codes, and no way to
   change the brand colour without editing all nine.

   From here on, module stylesheets reference these variables rather
   than literal colours. Restyling the next module becomes "point it
   at the tokens". If the adviser says the green is too dark two days
   before the defense, it changes here, once.

   Loaded FIRST in _Layout, before Bootstrap's overrides and before
   any module stylesheet, so everything downstream can read it.
   ============================================================ */

:root {
    /* ---- Brand green ------------------------------------------------
       Read off the approved mockup. 600 is the workhorse: buttons,
       links, active nav. 700 is for hover and for text that has to
       pass contrast on a pale background. */
    --brand-700: #0A5D4C;
    --brand-600: #0E7C66;
    --brand-500: #159C80;
    --brand-200: #C7E5DC;
    --brand-100: #E3F2ED;
    --brand-050: #F4FAF8;
    /* ---- Surfaces ---------------------------------------------------
       Cards are white and sit on a barely-tinted page, which is what
       makes a white card read as raised without needing a heavy shadow. */
    --surface-card: #FFFFFF;
    --surface-page: #F6FAF9;
    --surface-sidebar: #F4FAF8;
    --surface-sunken: #F1F6F4;
    /* ---- Ink --------------------------------------------------------
       Not pure black. #1F2A2E carries a trace of the brand hue, which
       stops text from looking cold against the green. */
    --ink-900: #1F2A2E;
    --ink-700: #3D4C51;
    --ink-500: #6B7B80;
    --ink-400: #8E9DA1;
    /* ---- Lines ------------------------------------------------------ */
    --line-strong: #D3E3DD;
    --line: #E4EDEA;
    --line-soft: #EFF4F2;
    /* ---- Status -----------------------------------------------------
       Kept OUTSIDE the brand ramp on purpose. A danger colour that is a
       shade of the brand green cannot say "danger". These are the same
       hues the Appointments and Reports pages already use, so a reader
       who has learned them there does not learn them twice. */
    --ok: #198754;
    --ok-bg: #E7F4EC;
    --warn: #B76E00;
    --warn-bg: #FDF3E4;
    --danger: #C0392B;
    --danger-bg: #FDECEA;
    --info: #2E6F9E;
    --info-bg: #E8F1F7;
    /* ---- Highlight --------------------------------------------------
       Search matches stay amber. A green highlight on a green page is
       not a highlight. */
    --highlight-bg: #FFF3A3;
    --highlight-row: #FFFDF2;
    --highlight-bar: #E3B341;
    /* ---- Type -------------------------------------------------------
       Poppins is geometric and matches the mockup's heading weight. The
       fallbacks matter: if Google Fonts is blocked or slow, the page
       falls back to the platform UI font rather than to Times. */
    --font-ui: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Figures line up on the decimal in tables and money columns. */
    --font-numeric: var(--font-ui);
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* ---- Shape ------------------------------------------------------ */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    /* ---- Elevation --------------------------------------------------
       Tinted rather than neutral black, so shadows sit in the same
       colour family as everything else. */
    --shadow-sm: 0 1px 2px rgba(16, 58, 48, .05);
    --shadow: 0 2px 10px rgba(16, 58, 48, .07);
    --shadow-lg: 0 12px 40px rgba(16, 58, 48, .14);
    /* ---- Focus ------------------------------------------------------
       One ring, defined once. Bootstrap's default is blue and shows up
       everywhere a form does. */
    --ring: 0 0 0 3px rgba(14, 124, 102, .18);
    /* ---- Motion -----------------------------------------------------
       Short enough to feel like a response rather than an animation. */
    --t-fast: 130ms ease;
    --t: 170ms ease;
}

/* Someone who has asked their operating system to stop animating things
   has asked every application, not just the ones that remember. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t: 0ms;
    }
}