/*
 * Church People Ops design tokens — single source (DESIGN.md §4).
 * Values follow Wanted Montage (github.com/wanteddev/montage-web, MIT) packages/theme:
 * atomic palette, semantic light/dark, typography, spacing, radius, elevation.
 * Deviations from Montage for WCAG contrast are marked "dev:" and listed in DESIGN.md §11.
 * Theme: light by default; dark via prefers-color-scheme or <html data-theme="dark">.
 */

/* Pretendard Variable: @font-face in fonts/pretendard.css (split by Unicode range). */

:root{
  color-scheme:light;

  /* Color · surfaces */
  --ds-bg-canvas:#F7F7F8;          /* background.neutral.secondary  coolNeutral99 */
  --ds-bg-sidebar:#FFFFFF;         /* background.neutral.primary    common100 */
  --ds-bg-surface:#FFFFFF;         /* surface.neutral.primary       common100 */
  /* Chart series (dashboard round 7: age bands) — the dataviz reference categorical palette, fixed order, validated on
     this surface (CVD ΔE ≥ 8.4, normal ≥ 19.3); light slots 3–5 are under 3:1, so charts keep a legend and a table. */
  --ds-chart-1:#2a78d6; --ds-chart-2:#eb6834; --ds-chart-3:#1baf7a; --ds-chart-4:#eda100; --ds-chart-5:#e87ba4; --ds-chart-6:#008300; --ds-chart-7:#6250d6; --ds-chart-8:#e34948;
  --ds-bg-subtle:#70737C0D;        /* surface.neutral.tertiary      coolNeutral50 @5% */
  --ds-bg-raised:#70737C14;        /* surface.neutral.secondary     coolNeutral50 @8% */
  --ds-border-subtle:#70737C38;    /* line.neutral.primary          coolNeutral50 @22% */
  --ds-border-control:#878A93;     /* dev: coolNeutral60 (line.neutral.primary is 1.3:1) */

  /* Color · text */
  --ds-text-primary:#171719;       /* foreground.neutral.primary    coolNeutral10 */
  --ds-text-secondary:#2E2F33E0;   /* foreground.neutral.secondary  coolNeutral22 @88% */
  --ds-text-disabled:#37383C29;    /* foreground.disable.primary    coolNeutral25 @16% */

  /* Color · brand */
  --ds-accent:#0066FF;             /* foreground.brand.primary      blue50 */
  --ds-accent-fill:#0066FF;        /* surface.brand.primary         blue50 */
  --ds-on-accent:#FFFFFF;          /* static.white */
  --ds-focus:#0066FF;              /* dev: solid ring (line.brand.focus is a 12% halo) */
  --ds-accent-text:#005BE6;        /* dev: brand text on a tinted fill (blue50 is 4.49:1 on info-bg) */

  /* Color · status — text / solid fill / subtle background */
  --ds-success:#006E25;  --ds-success-fill:#00BF40;  --ds-success-bg:#00BF4014;  /* text dev: green30; positive.primary green50 */
  --ds-warning:#9C5800;  --ds-warning-fill:#FF9200;  --ds-warning-bg:#FF920014;  /* text dev: orange30; cautionary.primary orange50 */
  --ds-error:#B00C0C;    --ds-error-fill:#FF4242;    --ds-error-bg:#FF424214;    /* text dev: red30 (negative.strong red40 is 4.1 on error-bg); negative.primary red50 */
  --ds-info:#006796;     --ds-info-fill:#00AEFF;     --ds-info-bg:#00AEFF14;     /* text dev: lightBlue30; accent.lightBlue */
  --ds-neutral:#2E2F33E0; --ds-neutral-bg:#70737C14;
  --ds-on-status:#171719;          /* text on status fills: coolNeutral10 */
  /* Color · task labels the status colours do not cover (task-management): text / subtle background */
  --ds-label-yellow:#735600; --ds-label-yellow-bg:#FFC10A1F;
  --ds-label-purple:#5B35C2; --ds-label-purple-bg:#7C4DFF14;

  /* Effect */
  --ds-backdrop:#17171985;         /* effect.dimmer.primary         coolNeutral10 @52% */
  --ds-shadow-overlay:0px 6px 10px -4px #17171714,0px 16px 24px -6px #17171714; /* elevation.shadow.normal.large */
  --ds-shadow-small:0px 2px 4px -2px #1717170F,0px 4px 6px -1px #1717170F;     /* elevation.shadow.normal.small */

  /* Typography — Montage variants (px = rem × 16) */
  --ds-font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --ds-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ds-text-page-title:28px;   --ds-leading-page-title:38px;   --ds-tracking-page-title:-0.0236em;   /* title2 */
  --ds-text-section-title:20px; --ds-leading-section-title:28px; --ds-tracking-section-title:-0.012em; /* heading2 */
  --ds-text-card-title:17px;   --ds-leading-card-title:24px;   --ds-tracking-card-title:0em;         /* headline2 */
  --ds-text-body:14px;         --ds-leading-body:20px;         --ds-tracking-body:0.0145em;          /* label1 */
  --ds-text-aux:13px;          --ds-leading-aux:18px;          --ds-tracking-aux:0.0194em;           /* label2 */
  --ds-text-caption:12px;      --ds-leading-caption:16px;      --ds-tracking-caption:0.0252em;       /* caption1 */
  --ds-text-kpi:28px;          --ds-leading-kpi:38px;                                                 /* title2 */
  --ds-text-reading:15px;      --ds-leading-reading:24px;      --ds-tracking-reading:0.0096em;       /* body2Reading */
  --ds-text-input:16px;        /* dev: text in a field — under 16px, iPhone Safari zooms the page in on focus */

  /* Spacing — Montage spacing scale */
  --ds-spacing-2:2px;   --ds-spacing-4:4px;   --ds-spacing-6:6px;   --ds-spacing-8:8px;
  --ds-spacing-10:10px; --ds-spacing-12:12px; --ds-spacing-14:14px; --ds-spacing-16:16px;
  --ds-spacing-20:20px; --ds-spacing-24:24px; --ds-spacing-32:32px; --ds-spacing-40:40px;
  --ds-spacing-48:48px; --ds-spacing-56:56px; --ds-spacing-64:64px; --ds-spacing-72:72px; --ds-spacing-80:80px;

  /* Radius — Montage radius scale + roles */
  --ds-radius-4:4px; --ds-radius-8:8px; --ds-radius-10:10px; --ds-radius-12:12px; --ds-radius-14:14px;
  --ds-radius-16:16px; --ds-radius-20:20px; --ds-radius-24:24px; --ds-radius-full:9999px;
  --ds-radius-control:var(--ds-radius-8);
  --ds-radius-row:var(--ds-radius-8);
  --ds-radius-panel:var(--ds-radius-12);
  --ds-radius-dialog:var(--ds-radius-20);
  --ds-radius-badge:var(--ds-radius-full);

  /* Size · layering · motion */
  --ds-control-height:44px;
  --ds-control-height-dense:36px;
  --ds-z-modal:1300;               /* Montage zIndex.modal */
  --ds-motion-fast:120ms;
  --ds-motion-base:180ms;
  /* Sign-in page (DESIGN.md §11): the providers' own button and mark colours (Google's and Microsoft's branding), the
     shade over the church's photo, white words on it and the white plate behind a logo — kept here, not in screens. */
  --ds-signin-border:#747775; --ds-signin-bg:#FFFFFF; --ds-signin-text:#1F1F1F; --ds-signin-hover:#F8F9FA;
  --ds-signin-ms-border:#8C8C8C; --ds-signin-ms-bg:#FFFFFF; --ds-signin-ms-text:#5E5E5E;
  --ds-brand-google-red:#EA4335; --ds-brand-google-blue:#4285F4; --ds-brand-google-yellow:#FBBC05; --ds-brand-google-green:#34A853;
  --ds-brand-ms-red:#F25022; --ds-brand-ms-green:#7FBA00; --ds-brand-ms-blue:#00A4EF; --ds-brand-ms-yellow:#FFB900;
  --ds-photo-scrim:rgb(0 0 0 / 0.65); --ds-photo-scrim-band:rgb(0 0 0 / 0.7); --ds-photo-scrim-strong:rgb(0 0 0 / 0.75);
  --ds-on-photo:#FFFFFF; --ds-on-photo-shadow:rgb(0 0 0 / 0.35); --ds-logo-plate:#FFFFFF;
  --ds-photo-placeholder:#5B6670; --ds-photo-placeholder-tint:rgb(60 70 80 / 0.6);
  /* Breakpoints (Montage, for @media literals): sm 768px · md 992px · lg 1200px · xl 1600px */
}

/* Dark — Montage semantic dark */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ds-bg-canvas:#0F0F10;        /* background.neutral.secondary  coolNeutral5 */
    --ds-bg-sidebar:#1B1C1E;       /* background.neutral.primary    coolNeutral15 */
    --ds-bg-surface:#1B1C1E;       /* surface.neutral.primary       coolNeutral15 */
    --ds-chart-1:#3987e5; --ds-chart-2:#d95926; --ds-chart-3:#199e70; --ds-chart-4:#c98500; --ds-chart-5:#d55181; --ds-chart-6:#008300; --ds-chart-7:#9085e9; --ds-chart-8:#e66767;
    --ds-bg-subtle:#70737C1F;      /* surface.neutral.tertiary      @12% */
    --ds-bg-raised:#70737C38;      /* surface.neutral.secondary     @22% */
    --ds-border-subtle:#70737C52;  /* line.neutral.primary          @32% */
    --ds-border-control:#70737C;   /* dev: coolNeutral50 */
    --ds-text-primary:#F7F7F8;
    --ds-text-secondary:#C2C4C8E0;
    --ds-text-disabled:#989BA229;
    --ds-accent:#3385FF;           /* foreground.brand.primary      blue60 */
    --ds-accent-fill:#0066FF;      /* surface.brand.heavy           blue50 (white text ≥4.5) */
    --ds-focus:#3385FF;
    --ds-accent-text:#3385FF;
    --ds-success:#1ED45A;  --ds-success-fill:#1ED45A;  --ds-success-bg:#1ED45A14;
    --ds-warning:#FFA938;  --ds-warning-fill:#FFA938;  --ds-warning-bg:#FFA93814;
    --ds-error:#FF6363;    --ds-error-fill:#FF6363;    --ds-error-bg:#FF636314;
    --ds-info:#3DC2FF;     --ds-info-fill:#3DC2FF;     --ds-info-bg:#3DC2FF14;
    --ds-neutral:#C2C4C8E0; --ds-neutral-bg:#70737C38;
    --ds-label-yellow:#FFD44D; --ds-label-yellow-bg:#FFD44D1F;
    --ds-label-purple:#B9A1FF; --ds-label-purple-bg:#B9A1FF1F;
    --ds-backdrop:#171719BD;       /* effect.dimmer.primary         @74% */
    --ds-signin-border:#8E918F; --ds-signin-bg:#131314; --ds-signin-text:#E3E3E3; --ds-signin-hover:#1F1F20;
    --ds-signin-ms-border:#8C8C8C; --ds-signin-ms-bg:#2F2F2F; --ds-signin-ms-text:#FFFFFF;
    --ds-photo-scrim:rgb(0 0 0 / 0.75); --ds-photo-scrim-band:rgb(0 0 0 / 0.75);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ds-bg-canvas:#0F0F10; --ds-bg-sidebar:#1B1C1E; --ds-bg-surface:#1B1C1E;
  --ds-chart-1:#3987e5; --ds-chart-2:#d95926; --ds-chart-3:#199e70; --ds-chart-4:#c98500; --ds-chart-5:#d55181; --ds-chart-6:#008300; --ds-chart-7:#9085e9; --ds-chart-8:#e66767;
  --ds-bg-subtle:#70737C1F; --ds-bg-raised:#70737C38;
  --ds-border-subtle:#70737C52; --ds-border-control:#70737C;
  --ds-text-primary:#F7F7F8; --ds-text-secondary:#C2C4C8E0; --ds-text-disabled:#989BA229;
  --ds-accent:#3385FF; --ds-accent-fill:#0066FF; --ds-focus:#3385FF; --ds-accent-text:#3385FF;
  --ds-success:#1ED45A;  --ds-success-fill:#1ED45A;  --ds-success-bg:#1ED45A14;
  --ds-warning:#FFA938;  --ds-warning-fill:#FFA938;  --ds-warning-bg:#FFA93814;
  --ds-error:#FF6363;    --ds-error-fill:#FF6363;    --ds-error-bg:#FF636314;
  --ds-info:#3DC2FF;     --ds-info-fill:#3DC2FF;     --ds-info-bg:#3DC2FF14;
  --ds-neutral:#C2C4C8E0; --ds-neutral-bg:#70737C38;
  --ds-label-yellow:#FFD44D; --ds-label-yellow-bg:#FFD44D1F;
  --ds-label-purple:#B9A1FF; --ds-label-purple-bg:#B9A1FF1F;
  --ds-backdrop:#171719BD;
  --ds-signin-border:#8E918F; --ds-signin-bg:#131314; --ds-signin-text:#E3E3E3; --ds-signin-hover:#1F1F20;
  --ds-signin-ms-border:#8C8C8C; --ds-signin-ms-bg:#2F2F2F; --ds-signin-ms-text:#FFFFFF;
  --ds-photo-scrim:rgb(0 0 0 / 0.75); --ds-photo-scrim-band:rgb(0 0 0 / 0.75);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}
}