/*
  Church360 design tokens, taken from diadynshop360.com (Diadyn's sister site,
  light theme). See CLAIMS.md, "Design reference: diadynshop360 tokens".
  All colours live in this file. Do not hard-code colours elsewhere.

  diadynshop360 writes its colours in oklch(); the hex values are conversions.

  Contrast notes (WCAG 2.1), worst case across paper, surface and band:
  - ink: 16.6:1 or more. Headings, body text, buttons.
  - ink-soft: 6.0:1 or more. Paragraphs, menu items, secondary links.
  - highlight-ink: 6.8:1 or more. Eyebrow labels and icon tiles.
  - accent-ink: 4.9:1 or more. Tick marks.
  - accent: 3.5:1 or more. Focus rings and outlines only, never text.
  - ink-faint: 3.0:1. Decorative only, never text.
  - On ink (footer): paper 18.3:1, paper-70 9.1:1, highlight-on-ink 6.1:1.
*/

/* DM Sans, served locally (SIL Open Font License, see ../fonts/OFL-LICENSE.txt) */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}

/* 800 (ExtraBold): diadynshop360's heading weight. Same OFL font project,
   from the same Fontsource latin build as the other four files. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-800-normal.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --paper: #f9fafd;           /* page background, every other section */
  --surface: #ffffff;         /* cards, header, menus */
  --surface-sunken: #f2f3f7;  /* hover fills, icon buttons */
  --band: #e8f0fe;            /* hero, every other section, demo band */
  --band-soft: #f9fafd;       /* the alternate section background */

  /* Ink */
  --ink: #0b0e23;             /* text, primary buttons, footer background */
  --ink-90: #232639;          /* primary button hover (ink at 90% on paper) */
  --ink-soft: #555a6c;        /* paragraphs, menu items */
  --ink-faint: #848998;       /* decorative only */
  --line: #dedfe4;            /* borders */
  --line-strong: #c8cad0;     /* step connector */

  /* Accent */
  --accent: #007aff;          /* focus rings, outlines */
  --accent-ink: #0061db;      /* accent as a text or icon colour */
  --accent-tint: #e4f2ff;
  --highlight: #7151e6;       /* glow behind images */
  --highlight-ink: #543eaf;   /* eyebrows, icon tiles */

  /* On ink (footer and photo bands) */
  --on-ink: #f9fafd;                   /* paper */
  --on-ink-soft: rgb(249 250 253 / 0.7);
  --on-ink-line: rgb(249 250 253 / 0.14);
  --highlight-on-ink: #8687f1;         /* diadynshop360's dark-theme eyebrow colour */
  --focus-on-ink: #35b9ff;             /* diadynshop360's dark-theme accent */

  /* Photo bands: ink over the photo, with a violet and blue wash from the
     diadynshop360 image glow. See CLAIMS.md for the measured contrast. */
  --photo-overlay:
    linear-gradient(135deg, rgb(113 81 230 / 0.32), rgb(0 122 255 / 0.12) 70%),
    rgb(11 14 35 / 0.66);

  /* Glow behind images and on panels (diadynshop360: highlight + brand blue) */
  --glow:
    radial-gradient(60% 60% at 30% 25%, rgb(113 81 230 / 0.32), transparent 70%),
    radial-gradient(55% 55% at 80% 80%, rgb(0 122 255 / 0.26), transparent 70%);

  /* Shadows */
  --ring: 0 0 0 1px rgb(11 14 35 / 0.05);
  --shadow-soft: 0 18px 40px -24px rgb(11 14 35 / 0.22), 0 2px 6px -2px rgb(11 14 35 / 0.06);
  --shadow-glow: 0 24px 48px -22px rgb(113 81 230 / 0.55), 0 2px 6px -2px rgb(11 14 35 / 0.06);
  --shadow-image: 0 25px 50px -12px rgb(11 14 35 / 0.15), 0 30px 70px -30px rgb(113 81 230 / 0.55);
  --shadow-menu: 0 25px 50px -12px rgb(11 14 35 / 0.1);

  /* Radius */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 0.75rem;  /* 12px: menu items */
  --radius-lg: 1rem;     /* 16px: icon tiles, menus, FAQ items */
  --radius-xl: 1.5rem;   /* 24px: cards, images */
  --radius-pill: 999px;  /* buttons */

  /* Type */
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tracking-tight: -0.025em;
  --tracking-tighter: -0.05em;
  --tracking-widest: 0.1em;

  /* Layout */
  --container: 80rem;
  --header-h: 72px;
}