/* ===========================================================================
   AnySmart — theme layer.

   Loaded LAST on every page, after the page's own stylesheet, so it can refine
   the design without any page CSS being rewritten. Delete the four <link> tags
   that pull it in and the site returns to exactly how it looked before.

   SCOPE, DELIBERATELY NARROW.

   #03a9f4 is AnySmart's signature blue and it is a fixed requirement. This
   file does not touch it — not on the buttons, not on the icon circles, not on
   the blue wash over the hero photograph. An earlier version of this file did
   all three, and also swapped the icon font for its outlined variant. That
   last one silently broke every hover rule in home.css, because those rules
   select `.material-icons` by name, so the chevrons stayed dark and vanished
   into the blue fill behind them.

   The lesson is in the file now: home.css ALREADY gets the interactive states
   right. A white circle carries a blue glyph and turns blue-with-white on
   hover; a blue circle carries a white glyph throughout. Nothing here should
   restate any of that, and nothing here does.

   So this file changes three things, none of which carries brand meaning:

     1. TYPE. Body copy was font-weight 300 in #666666 — thin grey on white,
        which reads as tentative and clears contrast only at 5.7:1. Now 400 at
        #4a5560, which is 7.4:1, with a darker ink and slightly tighter
        letter-spacing on headings. This is the single biggest lift available
        and it costs nothing in identity.

     2. RADIUS. The site ran 6, 8, 10, 12, 16, 20, 24, 50% and clamp() values
        up to 4rem with no system behind them. Cards settle on 8px. Circles
        stay circles. An earlier version took everything to 4px and looked
        cheap; sharp corners are not what makes something look considered.

     3. ELEVATION. Cards carried a resting double shadow and lifted 8px on
        hover, which read as floating. Softened to a lighter resting shadow and
        a 3px lift — closer to how material actually specifies elevation,
        without flattening anything.
   =========================================================================== */

:root {
    /* Ink. Darker and heavier than before; no brand meaning. */
    --ink: #1f262c;              /* headings */
    --ink-2: #4a5560;            /* body copy — 7.4:1 on white */

    /* Kept under its old name: this token was the body-copy grey, and it was
       too light. The brand blue is NOT redefined here — it stays wherever the
       page CSS already sets it. */
    --dark-gray: #4a5560;

    --shadow: rgba(20, 28, 36, 0.08);
    --shadow-hover: rgba(20, 28, 36, 0.14);
}

/* ---------------------------------------------------------------------------
   1. Type.
   --------------------------------------------------------------------------- */
body {
    color: var(--ink-2);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4,
.card-title,
.card-title-small,
.service-title,
.intro-block h2 {
    color: var(--ink);
    letter-spacing: -0.012em;
}

.card-description,
.card-description-small,
.service-description,
.intro-block p,
.text-content p {
    font-weight: 400;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   2 & 3. Cards: softer corners, lighter rest, shorter lift.

   Only the box — the blue accent bar, the icon circles and every hover colour
   are left exactly as home.css and services.css define them.
   --------------------------------------------------------------------------- */
.service-card,
.product-card {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 28, 36, 0.06), 0 2px 8px rgba(20, 28, 36, 0.06);
}

.service-card:hover,
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--shadow-hover);
}

/* ---------------------------------------------------------------------------
   Focus visibility, in the brand blue. Keyboard users could not previously
   tell where they were.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-blue, #03a9f4);
    outline-offset: 2px;
}