/*
Theme Name: Sewakatsu
Theme URI: https://sewa-katsu.helte.jp/
Author: Helte / Eiko (AI team)
Description: Original lightweight theme for the Sewakatsu job portal. Brand-faithful, mobile-first, multilingual (ja/en) job portal for foreign workers in Japan. No page builder.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sewakatsu
*/

/* =====================================================================
   Design tokens (single source of truth for brand colors / type).
   Official brand color system supplied by Shingo (2026-06-03).
   Logo styleguide PDF defines the 3 "theme colors" (orange/white/black);
   the full brand palette below adds sub-colors and group/service colors.
   See assets/brand/styleguide.md and docs/decisions/0002-brand-color-system.md.
   ===================================================================== */
:root {
  /* === Sewakatsu core (logo & primary) === */
  --sk-orange: #F66748; /* Sewa Orange: primary / CTA / accent */
  --sk-white:  #FFFFFF; /* Sewa White:  base background        */
  --sk-black:  #1A1A1A; /* Sewa Black:  text / logo            */

  /* === Sewakatsu sub-colors (warm backgrounds / decoration) === */
  --sk-cream:       #FFF9EC; /* warm pale-yellow background    */
  --sk-aqua:        #B6ECF6; /* light aqua accent / tags        */
  --sk-brown:       #E8DCCC; /* brown: cards / dividers         */
  --sk-brown-light: #F6EAE3; /* light brown: section background */
  --sk-brown-dark:  #591D0D; /* dark brown: strong accent / dark sections */

  /* === Content color === */
  --sk-sewanowa-yellow: #FBE14A; /* "Sewa-no-wa" (lifestyle content) */

  /* === Group / partner services (use ONLY in their own context) === */
  --sk-helte-green: #00414B; /* Helte (parent) green */
  --sk-helte-skin:  #FFC3A5; /* Helte skin tone      */
  --sk-sail-blue:   #3269F5; /* Sail (partner) blue  */
  --sk-yumepro:     #3F64A9; /* Yume-pro             */

  /* === Functional neutrals (grayscale only; not brand colors) === */
  --sk-gray-text: #555555;
  --sk-gray-line: #E6E6E6;
  --sk-gray-bg:   #F5F5F5;

  /* === Semantic roles === */
  --sk-color-text:     var(--sk-black);
  --sk-color-bg:       var(--sk-white);
  --sk-color-bg-soft:  var(--sk-cream);     /* warm section background */
  --sk-color-accent:   var(--sk-orange);
  --sk-color-cta:      var(--sk-orange);
  --sk-color-cta-text: var(--sk-white);
  /* Body links: black + underline for readability. Orange/brown reserved
     for large elements, buttons, headings (contrast-safe). */
  --sk-color-link:     var(--sk-black);

  /* Typography (no font specified in styleguide; interim brand-site face). */
  --sk-font-base: "Zen Kaku Gothic Antique", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --sk-fw-normal: 400;
  --sk-fw-medium: 500;
  --sk-fw-bold:   700;
  --sk-lh-base:   1.8;
  --sk-lh-head:   1.4;

  /* Layout */
  --sk-container:        1080px;
  --sk-container-narrow: 760px;
  --sk-gutter:           20px;
  --sk-radius:           12px;
  --sk-radius-sm:        8px;
}

/* =====================================================================
   Minimal base styles only. Full layout/components land in Phase 2.
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sk-font-base);
  font-weight: var(--sk-fw-normal);
  line-height: var(--sk-lh-base);
  color: var(--sk-color-text);
  background: var(--sk-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--sk-color-link); text-decoration: underline; }

h1, h2, h3, h4 { line-height: var(--sk-lh-head); font-weight: var(--sk-fw-bold); }

.sk-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
  box-sizing: border-box;
}

/* Primary CTA button: Sewa Orange solid + white text (no gradient). */
.sk-btn-cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--sk-orange);
  color: var(--sk-color-cta-text);
  font-weight: var(--sk-fw-bold);
  text-decoration: none;
}
.sk-btn-cta:hover,
.sk-btn-cta:focus { filter: brightness(0.94); }

/* Skip link for accessibility (keyboard / screen reader). */
.sk-skip-link { position: absolute; left: -9999px; }
.sk-skip-link:focus {
  left: 8px; top: 8px; z-index: 1000;
  background: var(--sk-white); padding: 8px 12px;
}