/* Amami Design System tokens (_ds より移植) */

/* --- tokens/fonts.css --- */
/* リゾバる AMAMI — webfonts.
   Noto Sans JP is the single UI/text family (spec §5). Loaded from Google Fonts
   because no font binaries shipped with the source materials.
   Zen Maru Gothic is used ONLY for the rare handwritten-adjacent brand line
   substituting for the tegaki artwork (assets/brand/tegaki_copy.png is the real asset). */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kurenaido&display=swap");

/* --- tokens/colors.css --- */
:root{
  /* Brand — base scales */
  --color-forest-700:#0F302C;
  --color-forest-600:#173F3A;
  --color-forest-500:#24564F;
  --color-forest-100:#E5EFEC;
  --color-ocean-700:#1D6470;
  --color-ocean-600:#2B7D8A;
  --color-ocean-500:#3694A3;
  --color-ocean-100:#E4F2F3;
  --color-coral-700:#C96543;
  --color-coral-600:#E7825B;
  --color-coral-100:#FBE9E2;
  --color-ivory:#F7F3E9;
  --color-blush:#F8E9E4;
  --color-ink:#24313A;

  /* Neutral */
  --color-white:#FFFFFF;
  --color-gray-900:#1B252B;
  --color-gray-700:#46545C;
  --color-gray-500:#718087;
  --color-gray-300:#C8D0D3;
  --color-gray-100:#EEF1F2;
  --color-sand-200:#E9E1D2;
  --color-sand-100:#F1EBDD;

  /* Semantic status */
  --color-success:#2F7A55;
  --color-warning:#B97824;
  --color-danger:#B84B4B;
  --color-info:#2B7D8A;

  /* Legacy logo palette — the pink/yellow リゾバる wordmark only.
     Never use these as UI colours. */
  --logo-sun:#EDAF2E;
  --logo-lime:#EFF59B;
  --logo-pink:#F44FA0;
  --logo-pink-soft:#FBD0E4;
  --logo-sea:#6FC3D8;

  /* Semantic aliases — use THESE in components */
  --surface-page:var(--color-white);
  --surface-page-alt:var(--color-ivory);
  --surface-card:var(--color-white);
  --surface-video:var(--color-ocean-100);
  --surface-life:var(--color-blush);
  --surface-inverse:var(--color-forest-600);
  --surface-inverse-strong:var(--color-forest-700);
  --surface-muted:var(--color-gray-100);
  --surface-selected:var(--color-forest-100);
  --surface-sub:var(--color-sand-100);

  --text-heading:var(--color-ink);
  --text-body:var(--color-gray-700);
  --text-meta:var(--color-gray-500);
  --text-strong:var(--color-gray-900);
  --text-inverse:var(--color-white);
  --text-link:var(--color-ocean-600);
  --text-link-hover:var(--color-ocean-700);
  --text-disabled:var(--color-gray-300);

  --border-default:var(--color-sand-200);
  --border-input:var(--color-gray-300);
  --border-hover:var(--color-ocean-600);
  --border-focus:var(--color-ocean-600);
  --border-inverse:rgba(255,255,255,.24);

  --action-primary:var(--color-coral-600);
  --action-primary-hover:var(--color-coral-700);
  --action-primary-text:var(--color-white);
  --action-secondary-border:var(--color-ocean-600);
  --action-secondary-text:var(--color-ocean-600);
  --action-secondary-hover-bg:var(--color-ocean-100);
  --action-business:var(--color-forest-600);
  --action-business-hover:var(--color-forest-700);
  --action-disabled:var(--color-gray-300);

  --icon-default:var(--color-ocean-600);
  --icon-accent:var(--color-coral-600);
}

/* --- tokens/typography.css --- */
:root{
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-hand:"Zen Kurenaido","Noto Sans JP",sans-serif;

  /* PC scale (spec §5) */
  --font-size-display:3.5rem;   /* 56 */
  --font-size-h1:2.75rem;       /* 44 */
  --font-size-h2:2.25rem;       /* 36 */
  --font-size-h3:1.625rem;      /* 26 */
  --font-size-h4:1.25rem;       /* 20 */
  --font-size-lead:1.125rem;    /* 18 */
  --font-size-body:1rem;        /* 16 */
  --font-size-small:0.875rem;   /* 14 */
  --font-size-caption:0.75rem;  /* 12 */

  /* SP scale */
  --font-size-display-sp:2.25rem; /* 36 */
  --font-size-h1-sp:2rem;         /* 32 */
  --font-size-h2-sp:1.75rem;      /* 28 */
  --font-size-h3-sp:1.375rem;     /* 22 */
  --font-size-h4-sp:1.125rem;     /* 18 */
  --font-size-lead-sp:1.0625rem;  /* 17 */

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;

  --line-height-display:1.25;
  --line-height-h1:1.35;
  --line-height-h2:1.4;
  --line-height-h3:1.45;
  --line-height-h4:1.5;
  --line-height-lead:1.8;
  --line-height-body:1.75;
  --line-height-small:1.7;
  --line-height-caption:1.6;
  --line-height-button:1;

  --letter-spacing-eyebrow:0.08em;
  --letter-spacing-heading:0.01em;
}

/* --- tokens/spacing.css --- */
:root{
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Layout */
  --container-max:75rem;      /* 1200 */
  --content-reading:47.5rem;  /* 760 */
  --header-height:4.75rem;    /* 76 */
  --utility-bar-height:2rem;  /* 32 */
  --gutter-desktop:1.5rem;
  --gutter-tablet:1.25rem;
  --gutter-mobile:1rem;
  --page-padding-desktop:var(--space-8);
  --page-padding-mobile:var(--space-5);
  --section-y-pc:var(--space-20);
  --section-y-sp:var(--space-16);
  --tap-min:2.75rem; /* 44px */
}

/* --- tokens/shape.css --- */
:root{
  --radius-sm:0.5rem;
  --radius-md:0.75rem;
  --radius-lg:1rem;
  --radius-xl:1.25rem;
  --radius-pill:999px;

  --border-width-hairline:1px;
  --border-width-focus:2px;

  --shadow-sm:0 2px 8px rgba(23,63,58,.08);
  --shadow-md:0 10px 30px rgba(23,63,58,.12);

  /* Photo aspect ratios (spec §8) */
  --ratio-hero:16/9; /* @kind other */
  --ratio-job-card:4/3; /* @kind other */
  --ratio-area-card:3/2; /* @kind other */
  --ratio-article:1.91/1; /* @kind other */
  --ratio-portrait:4/5; /* @kind other */
  --ratio-vertical-video:9/16; /* @kind other */
}

/* --- tokens/motion.css --- */
:root{
  --duration-hover:150ms; /* @kind other */
  --duration-accordion:200ms; /* @kind other */
  --duration-overlay:240ms; /* @kind other */
  --duration-switch:200ms; /* @kind other */
  --easing-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --easing-in-out:cubic-bezier(.45,.05,.55,.95); /* @kind other */
  --transition-hover:var(--duration-hover) var(--easing-out); /* @kind other */
  --hover-lift:-2px; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --duration-hover:1ms; /* @kind other */
    --duration-accordion:1ms; /* @kind other */
    --duration-overlay:1ms; /* @kind other */
    --duration-switch:1ms; /* @kind other */
    --hover-lift:0px; /* @kind other */
  }
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--font-size-body);line-height:var(--line-height-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-heading);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--transition-hover)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--border-width-focus) solid var(--border-focus);outline-offset:2px}
img{max-width:100%;display:block}
button{font-family:inherit}