/*
 * 一般社団法人よか隊ネット熊本 Design System
 * Source of truth: docs/design-system.md
 * This file contains tokens and reusable primitives only. Page-specific rules
 * belong in org-site.css or the relevant feature stylesheet.
 */
:root{
  /* Brand and semantic colors */
  --color-brand-primary:#13756a;
  --color-brand-primary-dark:#123f38;
  --color-brand-secondary:#315f77;
  --color-mint:#dff1ec;
  --color-aqua:#e3f1f5;
  --color-beige:#f7efd9;
  --color-background:#f8faf8;
  --color-background-subtle:#f1f7f4;
  --color-surface:#fff;
  --color-text:#183b35;
  --color-text-muted:#4d625b;
  --color-border:#b9d0ca;
  --color-support:#287798;
  --color-warning:#856413;
  --color-emergency:#a83c33;
  --color-focus:#f0bd38;

  /* Typography */
  --font-sans:"BIZ UDPGothic","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-display:"Yu Mincho","Hiragino Mincho ProN",var(--font-sans);
  --text-display:clamp(2.75rem,5vw,4.375rem);
  --text-h1:clamp(2.25rem,4.5vw,3.75rem);
  --text-h2:clamp(1.875rem,3.6vw,3rem);
  --text-h3:clamp(1.25rem,2vw,1.5rem);
  --text-h4:1.125rem;
  --text-body-lg:1.125rem;
  --text-body:1rem;
  --text-body-sm:.9375rem;
  --text-label:.8125rem;
  --text-caption:.75rem;
  --leading-display:1.3;
  --leading-heading:1.45;
  --leading-body:1.9;
  --tracking-display:-.025em;
  --tracking-label:.1em;

  /* 4px-based spacing scale */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-24:6rem;
  --space-section:clamp(4rem,8vw,6.5rem);

  /* Layout */
  --container-article:47.5rem;
  --container-content:73.75rem;
  --container-wide:77.5rem;
  --gutter:clamp(1.125rem,4vw,2rem);

  /* Shape and depth */
  --radius-sm:.5rem;
  --radius-md:.875rem;
  --radius-lg:1.5rem;
  --radius-pill:999px;
  --border-default:2px solid var(--color-border);
  --shadow-subtle:0 .25rem 1rem rgba(24,59,53,.07);
  --shadow-offset:.375rem .4375rem 0 #dfebe7;

  /* Motion */
  --motion-fast:180ms;
  --motion-base:520ms;
  --motion-slow:720ms;
  --motion-distance-sm:.75rem;
  --motion-distance-md:1.5rem;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-emphasized:cubic-bezier(.2,.8,.2,1);

  /* Breakpoints are documented because CSS custom properties cannot drive media queries. */
  --touch-target-min:2.75rem;
}

/* Layout primitives */
.ds-container{width:min(calc(100% - (var(--gutter)*2)),var(--container-content));margin-inline:auto}
.ds-container[data-size="wide"]{max-width:var(--container-wide)}
.ds-container[data-size="article"]{max-width:var(--container-article)}
.ds-section{padding-block:var(--space-section)}
.ds-section-header{display:grid;gap:var(--space-3);max-width:var(--container-article);margin-bottom:var(--space-8)}
.ds-section-header__eyebrow,.ds-badge{font-size:var(--text-label);font-weight:900;letter-spacing:var(--tracking-label)}

/* Typography primitives */
.ds-display{font-size:var(--text-display);font-weight:900;line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.ds-heading-1{font-size:var(--text-h1);font-weight:900;line-height:var(--leading-display)}
.ds-heading-2{font-size:var(--text-h2);font-weight:900;line-height:var(--leading-heading)}
.ds-heading-3{font-size:var(--text-h3);font-weight:850;line-height:var(--leading-heading)}
.ds-body-lg{font-size:var(--text-body-lg);line-height:var(--leading-body)}
.ds-body{font-size:var(--text-body);line-height:var(--leading-body)}
.ds-caption{font-size:var(--text-caption);line-height:1.65}

/* Shared component primitives and variants */
.ds-card{padding:var(--space-6);border:var(--border-default);border-radius:var(--radius-md);background:var(--color-surface)}
.ds-card[data-variant="support"]{border-left:.375rem solid var(--color-support)}
.ds-card[data-variant="history"]{border-top:.25rem solid var(--color-brand-primary)}
.ds-card[data-variant="article"]{box-shadow:var(--shadow-subtle)}
.ds-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-target-min);padding:var(--space-3) var(--space-4);border:2px solid var(--color-brand-primary);border-radius:var(--radius-sm);background:var(--color-brand-primary);color:#fff;font-weight:900;text-decoration:none}
.ds-button[data-variant="secondary"]{background:#fff;color:var(--color-brand-primary-dark)}
.ds-button[data-variant="emergency"]{border-color:var(--color-emergency);background:var(--color-emergency)}
.ds-badge{display:inline-flex;align-items:center;min-height:1.75rem;padding:.25rem .625rem;border-radius:var(--radius-pill);background:var(--color-mint);color:var(--color-brand-primary-dark)}
.ds-notice{padding:var(--space-4) var(--space-6);border-left:.375rem solid var(--color-support);background:var(--color-aqua)}
.ds-notice[data-variant="warning"]{border-left-color:var(--color-warning);background:#fff8df}
.ds-notice[data-variant="emergency"]{border-left-color:var(--color-emergency);background:#fff5f3}
.ds-page-hero{padding:var(--space-section) var(--gutter)}
.ds-page-hero[data-variant="brand"]{background:var(--color-background-subtle)}
.ds-page-hero[data-variant="content"]{padding-block:var(--space-16);background:var(--color-surface)}
.ds-page-hero[data-variant="support"]{padding-block:var(--space-12);border-bottom:1px solid var(--color-border);background:#f5faf8}
.ds-breadcrumb{font-size:var(--text-label);color:var(--color-text-muted)}
.ds-icon{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Graphic primitives: dots are people/information/places; lines are connection;
   circles are community/safety; fields are regions; curves/waves are recovery/time. */
.graphic-dot{display:block;width:.5rem;height:.5rem;border-radius:50%;background:var(--color-brand-primary)}
.graphic-dot-grid{background-image:radial-gradient(circle,var(--color-brand-primary) 1.5px,transparent 2px);background-size:.875rem .875rem}
.graphic-line{display:block;height:2px;background:var(--color-brand-primary);transform-origin:left}
.graphic-curve{display:block;border:2px solid var(--color-brand-primary);border-left-color:transparent;border-radius:50%}
.graphic-circle{display:block;border:2px solid var(--color-border);border-radius:50%}
.graphic-field{display:block;border-radius:38% 62% 48% 52%;background:var(--color-background-subtle)}
.graphic-wave{display:block;background:linear-gradient(165deg,transparent 45%,var(--color-mint) 46% 58%,transparent 59%)}
.graphic-network[data-variant="support"]{color:var(--color-support)}
.graphic-network[data-variant="community"]{color:var(--color-brand-primary)}
.graphic-network[data-variant="history"]{color:var(--color-brand-secondary)}
.graphic-network[data-variant="recovery"]{color:var(--color-warning)}

/* Motion primitives. Content is visible by default and is hidden only after JS
   has successfully applied data-motion="enabled". */
[data-motion="enabled"] .motion-reveal{opacity:0;transform:translateY(var(--motion-distance-sm));transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
[data-motion="enabled"] .motion-reveal[data-motion-direction="up"]{transform:translateY(var(--motion-distance-md))}
[data-motion="enabled"] .motion-reveal.is-revealed{opacity:1;transform:none}
[data-motion="enabled"] .motion-stagger{transition-delay:calc(min(var(--motion-order,0),4)*90ms)}
[data-motion="enabled"] .motion-line-draw{transform:scaleX(0);transform-origin:left;transition:transform var(--motion-slow) var(--ease-out)}
[data-motion="enabled"] .motion-line-draw.is-revealed{transform:scaleX(1)}
[data-motion="enabled"] .motion-dot-reveal{opacity:0;transform:scale(.8);transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
[data-motion="enabled"] .motion-dot-reveal.is-revealed{opacity:1;transform:scale(1)}

/* Emergency information must never wait for motion. */
[data-priority="critical"],[data-priority="critical"] *{animation:none!important;transition-delay:0ms!important}

:where(a,button,input,select,textarea,summary):focus-visible{outline:4px solid var(--color-focus);outline-offset:4px}
:where(button,[role="button"],input,select,textarea,.ds-button){min-height:var(--touch-target-min)}

@media(hover:hover) and (pointer:fine){.ds-button:hover{transform:translateY(-1px)}.ds-button:active{transform:scale(.98)}}
@media(max-width:800px){.ds-section{padding-block:var(--space-16)}.ds-card{padding:var(--space-4)}.ds-page-hero{padding-inline:var(--space-4)}.graphic-field,.graphic-dot-grid{opacity:.45}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}[data-motion="enabled"] :is(.motion-reveal,.motion-line-draw,.motion-dot-reveal){opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}