@import url("https://fonts.googleapis.com/css2?family=Federo&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* ==========================================================
   Skillforests design system on Fider
   Source of truth: Skillforests Design System tokens
   (tokens/colors.css, typography.css, spacing.css)
   ========================================================== */

/* --- Light theme: DS neutrals + brand green ramp --- */
body[data-theme="light"] {
  --primary-color: #2c7d40;        /* green-500, brand */
  --primary-color-dark: #016632;   /* green-700, hover deepens */
  --primary-color-light: #a4dd97;  /* green-100 */

  --colors-gray-50: #f7f9f7;   /* neutral-25 */
  --colors-gray-100: #f7f9f7;  /* surface-app */
  --colors-gray-200: #e8ece9;  /* border-card */
  --colors-gray-300: #cdd5ce;  /* neutral-200 */
  --colors-gray-400: #aab4ab;  /* neutral-300 */
  --colors-gray-500: #aab4ab;
  --colors-gray-600: #7e8a80;  /* neutral-400 */
  --colors-gray-700: #515b53;  /* neutral-600 */
  --colors-gray-800: #2a312b;  /* neutral-800, body text */
  --colors-gray-900: #1a1f1b;  /* neutral-900 */
  --colors-black: #1a1f1b;

  /* Fider's accent ramp (vote counter, mentions, hints) -> brand green */
  --colors-blue-50: #f1f8ef;
  --colors-blue-100: #e7f3e4;  /* brand-subtle */
  --colors-blue-200: #c9e8c1;
  --colors-blue-300: #a4dd97;
  --colors-blue-400: #469d33;
  --colors-blue-500: #2c7d40;
  --colors-blue-600: #016632;
  --colors-blue-700: #016632;
  --colors-blue-800: #004d2e;
  --colors-blue-900: #004d2e;

  /* Success / completed -> same green ramp (deeper green = more grown) */
  --colors-green-100: #e7f3e4;
  --colors-green-300: #a4dd97;
  --colors-green-500: #469d33;
  --colors-green-600: #2c7d40;
  --colors-green-700: #016632;
  --colors-green-800: #004d2e;
  --colors-green-900: #004d2e;
}

/* --- Dark theme: the DS defines no dark tokens, so only the brand hue is carried over --- */
body[data-theme="dark"] {
  --primary-color: #469d33;        /* green-300 */
  --primary-color-dark: #2c7d40;
  --primary-color-light: #a4dd97;
  --colors-blue-50: #12261a;
  --colors-blue-100: #12261a;
  --colors-blue-200: #0e2f1c;
  --colors-blue-300: #004d2e;
  --colors-blue-400: #016632;
  --colors-blue-500: #2c7d40;
  --colors-blue-600: #469d33;
  --colors-blue-700: #7cc46c;
  --colors-blue-800: #a4dd97;
  --colors-blue-900: #e7f3e4;
}

/* --- Typography: Noto Sans JP for UI, Federo for brand moments (header wordmark + welcome headline) --- */
body, button, input, textarea, select {
  font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.c-header__brand h1, .c-header__brand .text-header {
  font-family: "Federo", "Optima", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
.c-header__nav-link::after, #c-header { font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.p-home__welcome-title {
  font-family: "Federo", "Optima", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.p-home__welcome-title .header-emphasis { color: var(--colors-primary-base); }
.p-home__welcome-body { line-height: 1.55; }

/* Links stay info-blue, outside the green ramp */
body[data-theme="light"] .c-markdown a,
body[data-theme="light"] .text-link { color: #1f6feb; }
body[data-theme="light"] .c-markdown a:hover,
body[data-theme="light"] .text-link:hover { color: #016632; }

/* --- Shape and depth: 4px controls, 12px cards, low neutral shadows --- */
.c-button { border-radius: 4px; font-weight: 600; transition: background 120ms cubic-bezier(0.2,0,0.2,1), border-color 120ms cubic-bezier(0.2,0,0.2,1), transform 120ms cubic-bezier(0.2,0,0.2,1); }
.c-button:active { transform: scale(0.97); }
.c-input, .c-textarea, .c-select { border-radius: 4px; }
.c-input:focus, .c-textarea:focus, .c-select:focus { box-shadow: 0 0 0 3px rgba(44,125,64,0.28); }
.p-home__add-idea-btn {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26,31,27,0.08), 0 0 0 1px #e8ece9;
}
.p-home__add-idea-btn:hover { box-shadow: 0 4px 12px rgba(26,31,27,0.10), 0 0 0 1px #e8ece9; }
body[data-theme="dark"] .p-home__add-idea-btn,
body[data-theme="dark"] .p-home__add-idea-btn:hover { box-shadow: 0 0 0 1px #3a3a3a; }

/* --- Relabel Fider's built-in nav for the professions board --- */
.c-header__nav-link { font-size: 0 !important; }
.c-header__nav-link::after { font-size: 14px; line-height: 22.4px; }
.c-header__nav-link[href="/"]::after { content: "All professions"; }
.c-header__nav-link[href="/roadmap"]::after { content: "Progress"; }